[Tutorial] CKEditor Hitskin_logo Hitskin.com

This is a Hitskin.com skin preview
Install the skinReturn to the skin page

The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.
+7
YoshiGM
tikky
SLGray
Wecoc
TheCrow
skouliki
Daemon
11 posters

    [Tutorial] CKEditor

    Daemon
    Daemon
    Forumember


    Posts : 104
    Reputation : 91
    Language : Português

    [Tutorial] CKEditor Empty [Tutorial] CKEditor

    Post by Daemon April 28th 2018, 5:29 pm

    Destroy SCEditor and Build CKEditor

    [Tutorial] CKEditor Apmbzuz

    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 May 8th 2018, 5:05 am; edited 6 times in total
    skouliki
    skouliki
    Manager
    Manager


    Female Posts : 15190
    Reputation : 1696
    Language : English,Greek
    Location : Greece

    [Tutorial] CKEditor Empty Re: [Tutorial] CKEditor

    Post by skouliki April 28th 2018, 5:43 pm

    i can confirm that works on punbb
    the insert image button is way more advanced than here , spelling, dictionary and plenty more this is very good work and we thank you for sharing this with us

    TheCrow
    TheCrow
    Manager
    Manager


    Male Posts : 6921
    Reputation : 795
    Language : Greek, English

    [Tutorial] CKEditor Empty Re: [Tutorial] CKEditor

    Post by TheCrow April 28th 2018, 10:16 pm

    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! Wink

    Overall, excellent code. Thank you for sharing.



    [Tutorial] CKEditor Thecro10
    Forum of the Forums

    Forumotion Rules | Tips & Tricks |
    FAQ | Did you forget your password?



    *** The Support Forum will never ask you for your email or password, so please do not post them anywhere! ***
    No support via PM!
    Wecoc
    Wecoc
    Forumember


    Male Posts : 144
    Reputation : 111
    Language : Catalan, Spanish, English

    [Tutorial] CKEditor Empty Re: [Tutorial] CKEditor

    Post by Wecoc April 28th 2018, 10:33 pm

    I appreciate your work, pretty neat.

    I already saw this a while ago in the portuguese forum: CKEditor como editor do forum
    An older version of CKEditor is being used there and the code also changes a little, but I noticed that one works better indeed.
    The code provided there uses BBcode as an extra plugin instead of only HTML.
    Also, this new version you posted seems to be adding too many line jumps and does not conserve the font size properly in some cases... at least in phpBB3.

    Maybe both codes can be mixed to get the best of each one Wink
    SLGray
    SLGray
    Administrator
    Administrator


    Male Posts : 51515
    Reputation : 3519
    Language : English
    Location : United States

    [Tutorial] CKEditor Empty Re: [Tutorial] CKEditor

    Post by SLGray April 28th 2018, 10:37 pm

    I can confirm it works on ModernBB.

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



    [Tutorial] CKEditor Slgray10

    When your topic has been solved, ensure you mark the topic solved.
    Never post your email in public.
    Daemon
    Daemon
    Forumember


    Posts : 104
    Reputation : 91
    Language : Português

    [Tutorial] CKEditor Empty Re: [Tutorial] CKEditor

    Post by Daemon April 28th 2018, 10:40 pm

    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! Wink

    Overall, excellent code. Thank you for sharing.
    You can change the text as follows:
    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
    });
    35 is the number of times the text will repeat in the preview


    Last edited by Daemon on April 30th 2018, 7:28 pm; edited 1 time in total
    TheCrow
    TheCrow
    Manager
    Manager


    Male Posts : 6921
    Reputation : 795
    Language : Greek, English

    [Tutorial] CKEditor Empty Re: [Tutorial] CKEditor

    Post by TheCrow April 28th 2018, 10:51 pm

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



    [Tutorial] CKEditor Thecro10
    Forum of the Forums

    Forumotion Rules | Tips & Tricks |
    FAQ | Did you forget your password?



    *** The Support Forum will never ask you for your email or password, so please do not post them anywhere! ***
    No support via PM!
    Daemon
    Daemon
    Forumember


    Posts : 104
    Reputation : 91
    Language : Português

    [Tutorial] CKEditor Empty Re: [Tutorial] CKEditor

    Post by Daemon April 28th 2018, 10:58 pm

    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! Wink
    If you refer to the text in the preview of the image, I believe it is there to show how the image will be in relation to the text in the editor.
    TheCrow
    TheCrow
    Manager
    Manager


    Male Posts : 6921
    Reputation : 795
    Language : Greek, English

    [Tutorial] CKEditor Empty Re: [Tutorial] CKEditor

    Post by TheCrow April 28th 2018, 11:02 pm

    Oh okay.. Then it's fine!! Smile



    [Tutorial] CKEditor Thecro10
    Forum of the Forums

    Forumotion Rules | Tips & Tricks |
    FAQ | Did you forget your password?



    *** The Support Forum will never ask you for your email or password, so please do not post them anywhere! ***
    No support via PM!
    SLGray
    SLGray
    Administrator
    Administrator


    Male Posts : 51515
    Reputation : 3519
    Language : English
    Location : United States

    [Tutorial] CKEditor Empty Re: [Tutorial] CKEditor

    Post by SLGray April 28th 2018, 11:30 pm

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



    [Tutorial] CKEditor Slgray10

    When your topic has been solved, ensure you mark the topic solved.
    Never post your email in public.
    tikky
    tikky
    Forumember


    Posts : 898
    Reputation : 157
    Language : 🇵🇹

    [Tutorial] CKEditor Empty Re: [Tutorial] CKEditor

    Post by tikky April 28th 2018, 11:34 pm

    Testing in my forum (Power Pixel) i'm using #punbb, congratulations [Tutorial] CKEditor 1f600
    Daemon
    Daemon
    Forumember


    Posts : 104
    Reputation : 91
    Language : Português

    [Tutorial] CKEditor Empty Re: [Tutorial] CKEditor

    Post by Daemon April 28th 2018, 11:56 pm

    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'
    });
    Very Happy
    SLGray
    SLGray
    Administrator
    Administrator


    Male Posts : 51515
    Reputation : 3519
    Language : English
    Location : United States

    [Tutorial] CKEditor Empty Re: [Tutorial] CKEditor

    Post by SLGray April 29th 2018, 12:08 am

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



    [Tutorial] CKEditor Slgray10

    When your topic has been solved, ensure you mark the topic solved.
    Never post your email in public.
    Daemon
    Daemon
    Forumember


    Posts : 104
    Reputation : 91
    Language : Português

    [Tutorial] CKEditor Empty Re: [Tutorial] CKEditor

    Post by Daemon April 29th 2018, 6:17 am

    SLGray wrote:Thanks.  Are you going to add the host an image button?
    I'll try to do this as soon as i can!
    skouliki
    skouliki
    Manager
    Manager


    Female Posts : 15190
    Reputation : 1696
    Language : English,Greek
    Location : Greece

    [Tutorial] CKEditor Empty Re: [Tutorial] CKEditor

    Post by skouliki April 29th 2018, 9:32 am

    i get this message for copy/paste buttons all browsers

    [Tutorial] CKEditor Scree379


    edit: https://github.com/ckeditor/ckeditor-dev/issues/595

    Wecoc
    Wecoc
    Forumember


    Male Posts : 144
    Reputation : 111
    Language : Catalan, Spanish, English

    [Tutorial] CKEditor Empty Re: [Tutorial] CKEditor

    Post by Wecoc April 29th 2018, 11:05 pm

    I just tried to add every preset I could like the madman I am. Many of these are not compatible with the forumotion's default behavior (for example the emoticon option) at least the way they work now, but just for testing purposes here they are.

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

    [Tutorial] CKEditor Ckedit10

    Forget what I said before about those bugs, looks like all was needed to do was changing standard to standard-all in the url you were using.

    And there's much more you could do, CKEditor has many options so this can truly be improved... I will keep an eye on this Wink
    Daemon
    Daemon
    Forumember


    Posts : 104
    Reputation : 91
    Language : Português

    [Tutorial] CKEditor Empty Re: [Tutorial] CKEditor

    Post by Daemon April 30th 2018, 6:35 am

    SLGray wrote:Thanks.  Are you going to add the host an image button?
    Done:
    [Tutorial] CKEditor Kmko10
    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);


    Last edited by Daemon on May 2nd 2018, 6:24 pm; edited 6 times in total
    skouliki
    skouliki
    Manager
    Manager


    Female Posts : 15190
    Reputation : 1696
    Language : English,Greek
    Location : Greece

    [Tutorial] CKEditor Empty Re: [Tutorial] CKEditor

    Post by skouliki April 30th 2018, 8:43 am

    @Wecoc nice
    for me the preview on image properties Luffy said above did not change to English

    @thanks @Daemon did you know any solution for the copy/paste issue i posted above?

    Daemon
    Daemon
    Forumember


    Posts : 104
    Reputation : 91
    Language : Português

    [Tutorial] CKEditor Empty Re: [Tutorial] CKEditor

    Post by Daemon April 30th 2018, 5:24 pm

    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.
    I read your message again and I believe you want to translate the text into the preview image. If this is the case, please read the post above: https://help.forumotion.com/t155678-tutorial-ckeditor#1071427

    SLGray wrote:Thanks.  Are you going to add the host an image button?
    https://help.forumotion.com/t155678-tutorial-ckeditor#1071520
    Daemon
    Daemon
    Forumember


    Posts : 104
    Reputation : 91
    Language : Português

    [Tutorial] CKEditor Empty Re: [Tutorial] CKEditor

    Post by Daemon April 30th 2018, 7:31 pm

    @skouliki
    I made an edit in the code for image upload: https://help.forumotion.com/t155678-tutorial-ckeditor#1071520

    As for the copy/paste problem I will find a solution!
    SLGray
    SLGray
    Administrator
    Administrator


    Male Posts : 51515
    Reputation : 3519
    Language : English
    Location : United States

    [Tutorial] CKEditor Empty Re: [Tutorial] CKEditor

    Post by SLGray April 30th 2018, 7:38 pm

    Thanks for adding the host an image button.



    [Tutorial] CKEditor Slgray10

    When your topic has been solved, ensure you mark the topic solved.
    Never post your email in public.
    skouliki
    skouliki
    Manager
    Manager


    Female Posts : 15190
    Reputation : 1696
    Language : English,Greek
    Location : Greece

    [Tutorial] CKEditor Empty Re: [Tutorial] CKEditor

    Post by skouliki April 30th 2018, 8:05 pm

    thank you !!

    YoshiGM
    YoshiGM
    Active Poster


    Male Posts : 1502
    Reputation : 144
    Language : Spanish & English
    Location : Mexico

    [Tutorial] CKEditor Empty Re: [Tutorial] CKEditor

    Post by YoshiGM May 1st 2018, 8:35 pm

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

    Why ?
    Daemon
    Daemon
    Forumember


    Posts : 104
    Reputation : 91
    Language : Português

    [Tutorial] CKEditor Empty Re: [Tutorial] CKEditor

    Post by Daemon May 2nd 2018, 12:03 am

    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?
    Ape
    Ape
    Administrator
    Administrator


    Male Posts : 19168
    Reputation : 1995
    Language : fluent in dork / mumbojumbo & English haha

    [Tutorial] CKEditor Empty Re: [Tutorial] CKEditor

    Post by Ape May 2nd 2018, 1:00 am

    The color picker is also missing on the forum editor Wink



    [Tutorial] CKEditor Left1212[Tutorial] CKEditor Center11[Tutorial] CKEditor Right112
    [Tutorial] CKEditor Ape_b110
    [Tutorial] CKEditor Ape1010
    SLGray
    SLGray
    Administrator
    Administrator


    Male Posts : 51515
    Reputation : 3519
    Language : English
    Location : United States

    [Tutorial] CKEditor Empty Re: [Tutorial] CKEditor

    Post by SLGray May 2nd 2018, 2:19 am

    APE wrote:The color picker is also missing on the forum editor Wink
    https://help.forumotion.com/t155678-tutorial-ckeditor#1071499



    [Tutorial] CKEditor Slgray10

    When your topic has been solved, ensure you mark the topic solved.
    Never post your email in public.
    skouliki
    skouliki
    Manager
    Manager


    Female Posts : 15190
    Reputation : 1696
    Language : English,Greek
    Location : Greece

    [Tutorial] CKEditor Empty Re: [Tutorial] CKEditor

    Post by skouliki May 2nd 2018, 8:46 am

    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

    [Tutorial] CKEditor Scree393

    Daemon
    Daemon
    Forumember


    Posts : 104
    Reputation : 91
    Language : Português

    [Tutorial] CKEditor Empty Re: [Tutorial] CKEditor

    Post by Daemon May 2nd 2018, 6:25 pm

    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

    [Tutorial] CKEditor Scree393
    Read and change: https://help.forumotion.com/t155678-tutorial-ckeditor#1071520
    skouliki
    skouliki
    Manager
    Manager


    Female Posts : 15190
    Reputation : 1696
    Language : English,Greek
    Location : Greece

    [Tutorial] CKEditor Empty Re: [Tutorial] CKEditor

    Post by skouliki May 2nd 2018, 6:33 pm

    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?

    YoshiGM
    YoshiGM
    Active Poster


    Male Posts : 1502
    Reputation : 144
    Language : Spanish & English
    Location : Mexico

    [Tutorial] CKEditor Empty Re: [Tutorial] CKEditor

    Post by YoshiGM May 2nd 2018, 6:53 pm

    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?

    Of course, here's the problem:
    Spoiler: