[Tutorial] CKEditor

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

Luffy wrote:Confirmed for PhpBB3 too. Nice work. Thanks for sharing.

If I may point out some suggestions, I'd suggest on the Insert An Image pop up, when you insert an image, the preview there under the image preview still says the text it was saying before. My suggestion is removing that part. I don't know if there's a lang in there somewhere but if not I'd suggest maybe in the future to add one!

Overall, excellent code. Thank you for sharing.

Code:

CKEDITOR.replace('text_editor_textarea', {
    image_previewText : CKEDITOR.tools.repeat('Modified text', 35 ) // Changing image preview text. 35 is the number of times the text will repeat in the preview
});

Luffy wrote:@Daemon, once you add an image to the preview, the text remains in the preview. That's what I'm suggesting to be removed!

SLGray wrote:Do you have an English version?  It is not in English for me.  I mean the text in the image button.

Code:

CKEDITOR.replace('text_editor_textarea', {
    language: 'en'
});

SLGray wrote:Thanks.  Are you going to add the host an image button?

Code:

$(function() {
    $.ajax({
        type: "GET",
        url: "http://cdn.ckeditor.com/4.9.2/standard-all/ckeditor.js",
        dataType: "script",
        success: function() {
          CKEDITOR.replace("text_editor_textarea", {
            language: "en",
            extraPlugins: "bbcode,dialogadvtab,bidi,copyformatting,colorbutton,colordialog,templates,div,find,flash,font,forms,iframe,indentblock,smiley,justify,language,liststyle,newpage,pagebreak,preview,print,save,selectall,showblocks"
          });
        },
        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();
    });
});

SLGray wrote:Thanks.  Are you going to add the host an image button?

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: 'servimg'
            });
            CKEDITOR.dialog.add('servimg', function(editor) {
                return {
                    title: 'Host an image',
                    minWidth: 540,
                    minHeight: 385,
                    contents: [{
                        elements: [{
                            type: 'html',
                            html: '<p><iframe id="obj_servimg" src="https://' + servimgDomain + "/multiupload.php?&mode=" + (typeof(servImgMode) == "undefined" || servImgMode == "" ? "fae" : servImgMode) + "&account=" + servImgAccount + '&id=' + servImgId + '&f=' + servImgF + '" style="height:385px;width:540px;" border="0"></iframe></p>'
                        }]
                    }],
                    buttons: [CKEDITOR.dialog.okButton]
                };
            });
            CKEDITOR.plugins.add('servimg', {
                init: function(editor) {
                    var command = editor.addCommand('servimg', new CKEDITOR.dialogCommand('servimg'));
                    editor.ui.addButton('ServImg', {
                        label: 'Host an image',
                        command: 'servimg',
                        toolbar: 'insert,10',
                        icon: 'https://i62.servimg.com/u/f62/18/12/37/46/image_11.png'
                    });
                    CKEDITOR.dialog.add('servimg', 'servimg');
                }
            });
        },
        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();
    });
});
function onMessage(e) {
    if(e.data.from === 'servimg') CKEDITOR.instances['text_editor_textarea'].insertText(e.data.data + '\n');
}
window.addEventListener('message', onMessage, true);

SLGray wrote:I can confirm it works on ModernBB.

The one thing I do not see in this editor is the host an image button.

SLGray wrote:Thanks.  Are you going to add the host an image button?

YoshiGM wrote:Hello, i've installed it in my Spanish forum and it didn't worked.
I'm still seeing the Sceditor

Why ?

APE wrote:The color picker is also missing on the forum editor

skouliki wrote:hello again i came across to another issue i dont know if it's just me or its general 
when i upload an image using servming i cannot insert the image url into the post 
when i click insert i get zero results when i click ok i get the message below

Daemon wrote:

YoshiGM wrote:Hello, i've installed it in my Spanish forum and it didn't worked.
I'm still seeing the Sceditor

Why ?

Can you activate the code in your forum and send me a print from the browser console so I can check if there is an error?

Spoiler: