[Tutorial] CKEditor

Page 1 of 2 1, 2  Next

Go down

punBB - [Tutorial] CKEditor Empty [Tutorial] CKEditor

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

Destroy SCEditor and Build CKEditor

punBB - [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, 4:05 am; edited 6 times in total
Daemon
Daemon
Forumember

Posts : 101
Reputation : 86
Language : Português

Back to top Go down

punBB - [Tutorial] CKEditor Empty 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
skouliki
skouliki
Manager
Manager

Female Posts : 6707
Reputation : 999
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

punBB - [Tutorial] CKEditor Empty Re: [Tutorial] CKEditor

Post by TheCrow 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.
TheCrow
TheCrow
Energetic

Male Posts : 6103
Reputation : 702
Language : Greek, English
Location : Cyprus, Greece

https://www.inforumgr.com

Back to top Go down

punBB - [Tutorial] CKEditor Empty 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
Wecoc
Wecoc
Forumember

Male Posts : 136
Reputation : 100
Language : Catalan, Spanish, English

Back to top Go down

punBB - [Tutorial] CKEditor Empty 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.


punBB - [Tutorial] CKEditor Slgray10

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

Male Posts : 46311
Reputation : 3257
Language : English
Location : United States

https://help.forumotion.com/

Back to top Go down

punBB - [Tutorial] CKEditor Empty 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
Daemon
Daemon
Forumember

Posts : 101
Reputation : 86
Language : Português

Back to top Go down

punBB - [Tutorial] CKEditor Empty Re: [Tutorial] CKEditor

Post by TheCrow 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
TheCrow
TheCrow
Energetic

Male Posts : 6103
Reputation : 702
Language : Greek, English
Location : Cyprus, Greece

https://www.inforumgr.com

Back to top Go down

punBB - [Tutorial] CKEditor Empty 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.
Daemon
Daemon
Forumember

Posts : 101
Reputation : 86
Language : Português

Back to top Go down

punBB - [Tutorial] CKEditor Empty Re: [Tutorial] CKEditor

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

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

Male Posts : 6103
Reputation : 702
Language : Greek, English
Location : Cyprus, Greece

https://www.inforumgr.com

Back to top Go down

punBB - [Tutorial] CKEditor Empty 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.


punBB - [Tutorial] CKEditor Slgray10

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

Male Posts : 46311
Reputation : 3257
Language : English
Location : United States

https://help.forumotion.com/

Back to top Go down

punBB - [Tutorial] CKEditor Empty Re: [Tutorial] CKEditor

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

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

Male Posts : 167
Reputation : 34
Language : speaker daemonium & português
Location : Portugal

https://ajuda.forumeiros.com/u62843

Back to top Go down

punBB - [Tutorial] CKEditor Empty 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
Daemon
Daemon
Forumember

Posts : 101
Reputation : 86
Language : Português

Back to top Go down

punBB - [Tutorial] CKEditor Empty Re: [Tutorial] CKEditor

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

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


punBB - [Tutorial] CKEditor Slgray10

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

Male Posts : 46311
Reputation : 3257
Language : English
Location : United States

https://help.forumotion.com/

Back to top Go down

punBB - [Tutorial] CKEditor Empty 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!
Daemon
Daemon
Forumember

Posts : 101
Reputation : 86
Language : Português

Back to top Go down

punBB - [Tutorial] CKEditor Empty Re: [Tutorial] CKEditor

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

i get this message for copy/paste buttons all browsers

punBB - [Tutorial] CKEditor Scree379


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

Female Posts : 6707
Reputation : 999
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

punBB - [Tutorial] CKEditor Empty 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();
    });
});

punBB - [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
Wecoc
Wecoc
Forumember

Male Posts : 136
Reputation : 100
Language : Catalan, Spanish, English

Back to top Go down

punBB - [Tutorial] CKEditor Empty 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:
punBB - [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, 5:24 pm; edited 6 times in total
Daemon
Daemon
Forumember

Posts : 101
Reputation : 86
Language : Português

Back to top Go down

punBB - [Tutorial] CKEditor Empty 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?
skouliki
skouliki
Manager
Manager

Female Posts : 6707
Reputation : 999
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

punBB - [Tutorial] CKEditor Empty 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
Daemon
Daemon
Forumember

Posts : 101
Reputation : 86
Language : Português

Back to top Go down

punBB - [Tutorial] CKEditor Empty 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!
Daemon
Daemon
Forumember

Posts : 101
Reputation : 86
Language : Português

Back to top Go down

punBB - [Tutorial] CKEditor Empty Re: [Tutorial] CKEditor

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

Thanks for adding the host an image button.


punBB - [Tutorial] CKEditor Slgray10

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

Male Posts : 46311
Reputation : 3257
Language : English
Location : United States

https://help.forumotion.com/

Back to top Go down

punBB - [Tutorial] CKEditor Empty Re: [Tutorial] CKEditor

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

thank you !!
skouliki
skouliki
Manager
Manager

Female Posts : 6707
Reputation : 999
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

punBB - [Tutorial] CKEditor Empty 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 ?
YoshiGM
YoshiGM
Forumember

Male Posts : 834
Reputation : 115
Language : Spanish & English
Location : Mexico

http://asistencia.foroactivo.com/u21373

Back to top Go down

punBB - [Tutorial] CKEditor Empty 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?
Daemon
Daemon
Forumember

Posts : 101
Reputation : 86
Language : Português

Back to top Go down

punBB - [Tutorial] CKEditor Empty Re: [Tutorial] CKEditor

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

The color picker is also missing on the forum editor Wink


punBB - [Tutorial] CKEditor Left1212punBB - [Tutorial] CKEditor Center11punBB - [Tutorial] CKEditor Right112
punBB - [Tutorial] CKEditor Ape_b110
punBB - [Tutorial] CKEditor Ape1010
APE
APE
Administrator
Administrator

Male Posts : 14673
Reputation : 1599
Language : fluent in dork / mumbojumbo & English haha

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

Back to top Go down

punBB - [Tutorial] CKEditor Empty 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


punBB - [Tutorial] CKEditor Slgray10

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

Male Posts : 46311
Reputation : 3257
Language : English
Location : United States

https://help.forumotion.com/

Back to top Go down

punBB - [Tutorial] CKEditor Empty 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

punBB - [Tutorial] CKEditor Scree393
skouliki
skouliki
Manager
Manager

Female Posts : 6707
Reputation : 999
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

punBB - [Tutorial] CKEditor Empty 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

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

Posts : 101
Reputation : 86
Language : Português

Back to top Go down

punBB - [Tutorial] CKEditor Empty 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?
skouliki
skouliki
Manager
Manager

Female Posts : 6707
Reputation : 999
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

punBB - [Tutorial] CKEditor Empty 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:
punBB - [Tutorial] CKEditor Consol10

YoshiGM
YoshiGM
Forumember

Male Posts : 834
Reputation : 115
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