[Tutorial] CKEditor

Page 1 of 2 1, 2  Next

Go down

[Tutorial] CKEditor

Post by Daemon on April 28th 2018, 4:29 pm

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 May 8th 2018, 4:05 am; edited 6 times in total
avatar
Daemon
Forumember

Posts : 101
Reputation : 80
Language : Português

Back to top Go down

Re: [Tutorial] CKEditor

Post by skouliki on April 28th 2018, 4: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
avatar
skouliki
Manager
Manager

Female Posts : 4328
Reputation : 707
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Re: [Tutorial] CKEditor

Post by Luffy on April 28th 2018, 9: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.
avatar
Luffy
Manager
Manager

Male Posts : 5636
Reputation : 628
Language : Greek, English
Location : Cyprus, Greece

https://help.forumotion.com

Back to top Go down

Re: [Tutorial] CKEditor

Post by Wecoc on April 28th 2018, 9: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
avatar
Wecoc
Forumember

Male Posts : 134
Reputation : 95
Language : Catalan, Spanish, English

http://www.mundo-maker.com/

Back to top Go down

Re: [Tutorial] CKEditor

Post by SLGray on April 28th 2018, 9: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.


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

avatar
SLGray
Administrator
Administrator

Male Posts : 43912
Reputation : 3124
Language : English
Location : United States

http://fmthemesdesignteam.forumotion.com/

Back to top Go down

Re: [Tutorial] CKEditor

Post by Daemon on April 28th 2018, 9: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, 6:28 pm; edited 1 time in total
avatar
Daemon
Forumember

Posts : 101
Reputation : 80
Language : Português

Back to top Go down

Re: [Tutorial] CKEditor

Post by Luffy on April 28th 2018, 9: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
avatar
Luffy
Manager
Manager

Male Posts : 5636
Reputation : 628
Language : Greek, English
Location : Cyprus, Greece

https://help.forumotion.com

Back to top Go down

Re: [Tutorial] CKEditor

Post by Daemon on April 28th 2018, 9: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.
avatar
Daemon
Forumember

Posts : 101
Reputation : 80
Language : Português

Back to top Go down

Re: [Tutorial] CKEditor

Post by Luffy on April 28th 2018, 10:02 pm

Oh okay.. Then it's fine!! Smile
avatar
Luffy
Manager
Manager

Male Posts : 5636
Reputation : 628
Language : Greek, English
Location : Cyprus, Greece

https://help.forumotion.com

Back to top Go down

Re: [Tutorial] CKEditor

Post by SLGray on April 28th 2018, 10:30 pm

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


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

avatar
SLGray
Administrator
Administrator

Male Posts : 43912
Reputation : 3124
Language : English
Location : United States

http://fmthemesdesignteam.forumotion.com/

Back to top Go down

Re: [Tutorial] CKEditor

Post by pedxz on April 28th 2018, 10:34 pm

Testing in my forum (Power Pixel) i'm using #punbb, congratulations
avatar
pedxz
Forumember

Male Posts : 134
Reputation : 27
Language : speaker daemonium & português
Location : Portugal

http://ajuda.forumeiros.com/u62843

Back to top Go down

Re: [Tutorial] CKEditor

Post by Daemon on April 28th 2018, 10: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
avatar
Daemon
Forumember

Posts : 101
Reputation : 80
Language : Português

Back to top Go down

Re: [Tutorial] CKEditor

Post by SLGray on April 28th 2018, 11:08 pm

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


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

avatar
SLGray
Administrator
Administrator

Male Posts : 43912
Reputation : 3124
Language : English
Location : United States

http://fmthemesdesignteam.forumotion.com/

Back to top Go down

Re: [Tutorial] CKEditor

Post by Daemon on April 29th 2018, 5: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!
avatar
Daemon
Forumember

Posts : 101
Reputation : 80
Language : Português

Back to top Go down

Re: [Tutorial] CKEditor

Post by skouliki on April 29th 2018, 8:32 am

i get this message for copy/paste buttons all browsers




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

Female Posts : 4328
Reputation : 707
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Re: [Tutorial] CKEditor

Post by Wecoc on April 29th 2018, 10: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();
    });
});



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
avatar
Wecoc
Forumember

Male Posts : 134
Reputation : 95
Language : Catalan, Spanish, English

http://www.mundo-maker.com/

Back to top Go down

Re: [Tutorial] CKEditor

Post by Daemon on April 30th 2018, 5:35 am

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

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, 5:24 pm; edited 6 times in total
avatar
Daemon
Forumember

Posts : 101
Reputation : 80
Language : Português

Back to top Go down

Re: [Tutorial] CKEditor

Post by skouliki on April 30th 2018, 7: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?
avatar
skouliki
Manager
Manager

Female Posts : 4328
Reputation : 707
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Re: [Tutorial] CKEditor

Post by Daemon on April 30th 2018, 4: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
avatar
Daemon
Forumember

Posts : 101
Reputation : 80
Language : Português

Back to top Go down

Re: [Tutorial] CKEditor

Post by Daemon on April 30th 2018, 6: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!
avatar
Daemon
Forumember

Posts : 101
Reputation : 80
Language : Português

Back to top Go down

Re: [Tutorial] CKEditor

Post by SLGray on April 30th 2018, 6:38 pm

Thanks for adding the host an image button.


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

avatar
SLGray
Administrator
Administrator

Male Posts : 43912
Reputation : 3124
Language : English
Location : United States

http://fmthemesdesignteam.forumotion.com/

Back to top Go down

Re: [Tutorial] CKEditor

Post by skouliki on April 30th 2018, 7:05 pm

thank you !!
avatar
skouliki
Manager
Manager

Female Posts : 4328
Reputation : 707
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Re: [Tutorial] CKEditor

Post by YoshiGM on May 1st 2018, 7:35 pm

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

Why ?
avatar
YoshiGM
Forumember

Male Posts : 746
Reputation : 106
Language : Spanish & English
Location : Mexico

http://asistencia.foroactivo.com/u21373

Back to top Go down

Re: [Tutorial] CKEditor

Post by Daemon on May 1st 2018, 11:03 pm

@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?
avatar
Daemon
Forumember

Posts : 101
Reputation : 80
Language : Português

Back to top Go down

Re: [Tutorial] CKEditor

Post by APE on May 2nd 2018, 12:00 am

The color picker is also missing on the forum editor Wink



avatar
APE
Administrator
Administrator

Male Posts : 12728
Reputation : 1344
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

Back to top Go down

Re: [Tutorial] CKEditor

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

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


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

avatar
SLGray
Administrator
Administrator

Male Posts : 43912
Reputation : 3124
Language : English
Location : United States

http://fmthemesdesignteam.forumotion.com/

Back to top Go down

Re: [Tutorial] CKEditor

Post by skouliki on May 2nd 2018, 7: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

avatar
skouliki
Manager
Manager

Female Posts : 4328
Reputation : 707
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Re: [Tutorial] CKEditor

Post by Daemon on May 2nd 2018, 5: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

Read and change: https://help.forumotion.com/t155678-tutorial-ckeditor#1071520
avatar
Daemon
Forumember

Posts : 101
Reputation : 80
Language : Português

Back to top Go down

Re: [Tutorial] CKEditor

Post by skouliki on May 2nd 2018, 5: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?
avatar
skouliki
Manager
Manager

Female Posts : 4328
Reputation : 707
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Re: [Tutorial] CKEditor

Post by YoshiGM on May 2nd 2018, 5: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:

avatar
YoshiGM
Forumember

Male Posts : 746
Reputation : 106
Language : Spanish & English
Location : Mexico

http://asistencia.foroactivo.com/u21373

Back to top Go down

Page 1 of 2 1, 2  Next

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum