[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).

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!

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?

If you want to know if the codes for SCEditor can be adapted for CKEditor, the answer is yes!

YoshiGM wrote:Of course, here's the problem:

Spoiler:

Probably the error may be in another code.
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.

Yep, i've deleted some codes and the new editor has already appeared

Daemon wrote:

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?

If you want to know if the codes for SCEditor can be adapted for CKEditor, the answer is yes!

ok thats good in the future to know

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();
    });
});

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();
    });
});

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

Is there way to add host image option ?

You have here (click in the camera icon):

Abdalah tupe2 wrote:and Is it able to make ( translation with change side of typing from right-to-left as defualt ) ?

Change your code to:

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);

@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:

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!

You can have conflicts if you have more JS in your forum, deactivate them and leave only that and you are trying

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.

Any ideas?