[Tutorial] CKEditor
+7
YoshiGM
tikky
SLGray
Wecoc
TheCrow
skouliki
Daemon
11 posters
Page 2 of 2
Page 2 of 2 • 1, 2
[Tutorial] CKEditor
First topic message reminder :
Destroy SCEditor and Build CKEditor
All you have to do is create a new JavaScript (The placement: All pages).
For more advanced users, I leave the editor configuration guide link: https://docs.ckeditor.com/ckeditor4/latest/api/index.html
If you want to add an extra tab to host images on Servimg, read the following message: https://help.forumotion.com/t155678-tutorial-ckeditor#1071520
Enjoy!
Destroy SCEditor and Build CKEditor
All you have to do is create a new JavaScript (The placement: All pages).
- Code:
/*
* Application: CKEditor
* Date: 30/04/2018
* Version: 1.030042018
* Copyright (c) CKSource and Adapted to forumotion by Daemon <help.forumotion.com>
* This work is free. You can redistribute it and/or modify it
*/
$(function() {
if (!$.sceditor) return;
$.ajax({
type: 'GET',
url: 'https://cdn.ckeditor.com/4.9.2/standard/ckeditor.js',
dataType: 'script',
success: function() {
CKEDITOR.replace('text_editor_textarea');
},
error: function (jqXHR, textStatus, errorThrown) {
if(jqXHR.status == 500) {
console.log('Internal error: ' + jqXHR.responseText);
} else {
console.log('Unexpected error.');
}
}
});
$(function() {
$('#text_editor_textarea').sceditor('instance').destroy();
});
});
For more advanced users, I leave the editor configuration guide link: https://docs.ckeditor.com/ckeditor4/latest/api/index.html
If you want to add an extra tab to host images on Servimg, read the following message: https://help.forumotion.com/t155678-tutorial-ckeditor#1071520
Enjoy!
Last edited by Daemon on Tue May 08, 2018 3:05 am; edited 6 times in total
Daemon- Forumember
- Posts : 104
Reputation : 91
Language : Português
Re: [Tutorial] CKEditor
If you want to know if the codes for SCEditor can be adapted for CKEditor, the answer is yes!skouliki wrote:Thanks yes that ok now
just a general question ..all the java we have like change editor theme or admin presets that works with SCEditor are there a way to work also with CKEditor?
Daemon- Forumember
- Posts : 104
Reputation : 91
Language : Português
Re: [Tutorial] CKEditor
Probably the error may be in another code.YoshiGM wrote:Of course, here's the problem:
- Spoiler:
It may be that you have some code that works over the default SCEditor, and because CKEditor replaces it, the other code has no effect on anything, which may be causing the possible error.
Daemon- Forumember
- Posts : 104
Reputation : 91
Language : Português
Re: [Tutorial] CKEditor
Daemon wrote:If you want to know if the codes for SCEditor can be adapted for CKEditor, the answer is yes!skouliki wrote:Thanks yes that ok now
just a general question ..all the java we have like change editor theme or admin presets that works with SCEditor are there a way to work also with CKEditor?
ok thats good in the future to know
Re: [Tutorial] CKEditor
Insert video from YouTube:
- Code:
/*
* Application: CKEditor
* Date: 30/04/2018
* Version: 1.030042018
* Copyright (c) CKSource and Adapted to forumotion by Daemon <help.forumotion.com>
* This work is free. You can redistribute it and/or modify it
*/
$(function() {
$.ajax({
type: 'GET',
url: 'https://cdn.ckeditor.com/4.9.2/standard/ckeditor.js',
dataType: 'script',
success: function() {
CKEDITOR.replace('text_editor_textarea', {
extraPlugins: 'youtube',
allowedContent: true
});
CKEDITOR.dialog.add('youtube', function(editor) {
return {
title: 'Insert YouTube video',
minWidth: 390,
minHeight: 230,
contents: [{
id: 'urlTab',
label: 'Video URL',
title: 'Video URL',
elements: [{
id: 'url',
type: 'text',
label: 'Paste YouTube Video URL'
}, {
id: 'width',
type: 'text',
label: 'Width',
width: '40'
}, {
id: 'height',
type: 'text',
label: 'Height',
width: '40'
}]
}, {
id: 'embedTab',
label: 'Embed Code',
title: 'Embed Code',
elements: [{
id: 'embed',
type: 'textarea',
label: 'Paste the code generated by YouTube (embed)'
}]
}],
onOk: function() {
var editor = this.getParentEditor();
var contentUrl = this.getValueOf('urlTab', 'url');
var contentEmbed = this.getValueOf('embedTab','embed');
var width = this.getValueOf('urlTab', 'width');
var height = this.getValueOf('urlTab', 'height');
width = width ? width : 450;
height = height ? height : 366;
if (contentUrl.length > 0) {
contentUrl = contentUrl.replace(/^[^v]+v.(.{11}).*/, "$1");
editor.insertHtml('<iframe width="' + width + '" height="' + height + '" src="https://www.youtube.com/embed/' + contentUrl + '" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>');
} else if (contentEmbed.length > 0) {
editor.insertHtml(contentEmbed);
}
},
buttons: [CKEDITOR.dialog.okButton, CKEDITOR.dialog.cancelButton]
};
});
CKEDITOR.plugins.add('youtube', {
init: function(editor) {
var command = editor.addCommand('youtube', new CKEDITOR.dialogCommand('youtube'));
command.modes = {wysiwyg: 1,source: 1};
command.canUndo = false;
editor.ui.addButton('YouTube', {
label: 'Insert YouTube video',
command: 'youtube',
toolbar: 'insert',
icon: 'https://i62.servimg.com/u/f62/17/31/71/58/18-you10.png'
});
CKEDITOR.dialog.add('youtube', 'youtube');
}
});
},
error: function(jqXHR, textStatus, errorThrown) {
if(jqXHR.status == 500) {
console.log('Internal error: ' + jqXHR.responseText);
} else {
console.log('Unexpected error.');
}
}
});
$(function() {
$('#text_editor_textarea').sceditor('instance').destroy();
});
});
Daemon- Forumember
- Posts : 104
Reputation : 91
Language : Português
Re: [Tutorial] CKEditor
Create CKEditor in #awesomebb version
- Code:
/*
* Application: CKEditor
* Version: Only AwesomeBB
* Date: 30/04/2018
* Version: 1.030042018
* Copyright (c) CKSource and Adapted to forumotion by Daemon <help.forumotion.com>
* This work is free. You can redistribute it and/or modify it
*/
$(function() {
if (_board.tpl_version !== 'awesomebb') return;
$.ajax({
type: 'GET',
url: 'https://cdn.ckeditor.com/4.13.0/standard-all/ckeditor.js',
dataType: 'script',
success: function() {
CKEDITOR.replace('quick-reply-textarea', {
extraPlugins: 'bbcode'
});
},
error: function(jqXHR, textStatus, errorThrown) {
if(jqXHR.status == 500) {
console.log('Internal error: ' + jqXHR.responseText);
} else {
console.log('Unexpected error.');
}
}
});
$(function() {
$('#quick-reply-textarea').sceditor('instance').destroy();
});
});
skouliki and TonnyKamper like this post
Re: [Tutorial] CKEditor
pedxz wrote:Create CKEditor in #awesomebb version
- Code:
/*
* Application: CKEditor
* Version: Only AwesomeBB
* Date: 30/04/2018
* Version: 1.030042018
* Copyright (c) CKSource and Adapted to forumotion by Daemon <help.forumotion.com>
* This work is free. You can redistribute it and/or modify it
*/
$(function() {
if (_board.tpl_version !== 'awesomebb') return;
$.ajax({
type: 'GET',
url: 'https://cdn.ckeditor.com/4.13.0/standard-all/ckeditor.js',
dataType: 'script',
success: function() {
CKEDITOR.replace('quick-reply-textarea', {
extraPlugins: 'bbcode'
});
},
error: function(jqXHR, textStatus, errorThrown) {
if(jqXHR.status == 500) {
console.log('Internal error: ' + jqXHR.responseText);
} else {
console.log('Unexpected error.');
}
}
});
$(function() {
$('#quick-reply-textarea').sceditor('instance').destroy();
});
});
Is there way to add host image option ? and Is it able to make ( translation with change side of typing from right-to-left as defualt ) ?
regards
Re: [Tutorial] CKEditor
You have here (click in the camera icon):Is there way to add host image option ?
Change your code to:Abdalah tupe2 wrote:and Is it able to make ( translation with change side of typing from right-to-left as defualt ) ?
- Code:
/*
* Application: CKEditor
* Version: Only AwesomeBB
* Date: 30/04/2018
* Version: 1.030042018
* Copyright (c) CKSource and Adapted to forumotion by Daemon <help.forumotion.com>
* This work is free. You can redistribute it and/or modify it
*/
(function($) {
$(function() {
if (_board.tpl_version !== 'awesomebb') return;
if (!$('form[action="/post"]').length) return;
$.ajax({
type: 'GET',
url: 'https://cdn.ckeditor.com/4.15.0/standard-all/ckeditor.js',
dataType: 'script',
success: function() {
CKEDITOR.replace(($.sceditor ? 'text_editor_textarea' : 'quick-reply-textarea'), {
height: 280,
extraPlugins: 'bbcode,smiley,font,colorbutton,justify',
contentsLangDirection: 'rtl',
language: _userdata.user_lang,
removePlugins: 'filebrowser,smiley,format,horizontalrule,pastetext,pastefromword,scayt,showborders,stylescombo,table,tabletools,tableselection,wsc',
removeButtons: 'Anchor,BGColor,Font,Strike,Subscript,Superscript,JustifyBlock',
disableObjectResizing: true,
fontSize_sizes: "10/10px;13/13px;16/16px;18/18px;24/24px"
});
},
error: function(jqXHR, textStatus, errorThrown) {
if (jqXHR.status == 500) {
console.log('Internal error: ' + jqXHR.responseText);
} else {
console.log('Unexpected error.');
}
}
});
if(!$.sceditor) return;
$('#quick-reply-textarea').sceditor('instance').destroy();
});
})(jQuery);
TonnyKamper and Abdalah tupe2 like this post
Re: [Tutorial] CKEditor
@pedxz @Daemon
Hello guys!
I'm having this issue. Missing icons when using the script:
Without the new editor:
This is the code I'm using:
Any ideas?.
Thank you!
Hello guys!
I'm having this issue. Missing icons when using the script:
Without the new editor:
This is the code I'm using:
- Code:
(function($) {
$(function() {
if (_board.tpl_version !== 'awesomebb') return;
if (!$('form[action="/post"]').length) return;
$.ajax({
type: 'GET',
url: 'https://cdn.ckeditor.com/4.15.0/standard-all/ckeditor.js',
dataType: 'script',
success: function() {
CKEDITOR.replace(($.sceditor ? 'text_editor_textarea' : 'quick-reply-textarea'), {
height: 200,
width: 1000,
extraPlugins: 'bbcode,smiley,font,colorbutton,justify,horizontalrule',
language: _userdata.user_lang,
removePlugins: 'filebrowser,format,pastetext,pastefromword,scayt,showborders,stylescombo,table,tabletools,tableselection,wsc',
removeButtons: 'Anchor,BGColor,Font,Strike,Subscript,Superscript,JustifyBlock',
disableObjectResizing: true,
fontSize_sizes: "16/16px;18/18px;24/24px;30/30px"
});
},
error: function(jqXHR, textStatus, errorThrown) {
if (jqXHR.status == 500) {
console.log('Internal error: ' + jqXHR.responseText);
} else {
console.log('Unexpected error.');
}
}
});
if(!$.sceditor) return;
$('#quick-reply-textarea').sceditor('instance').destroy();
});
})(jQuery);
Any ideas?.
Thank you!
Re: [Tutorial] CKEditor
You can have conflicts if you have more JS in your forum, deactivate them and leave only that and you are trying
Re: [Tutorial] CKEditor
jucarese wrote:You can have conflicts if you have more JS in your forum, deactivate them and leave only that and you are trying
Hmmm no.
Actually I tried removing the other 2 scripts I had but that didn't fix this problem.
Page 2 of 2 • 1, 2
Similar topics
» [Help] CKeditor wont delete
» [Tutorial] Hovercard
» How can i put a tutorial on here?
» CSS Tutorial for your forums
» How to submit a tutorial
» [Tutorial] Hovercard
» How can i put a tutorial on here?
» CSS Tutorial for your forums
» How to submit a tutorial
Page 2 of 2
Permissions in this forum:
You cannot reply to topics in this forum