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.

[Tutorial] CKEditor

+7
YoshiGM
tikky
SLGray
Wecoc
TheCrow
skouliki
Daemon
11 posters

Page 1 of 2 1, 2  Next

Go down

[Tutorial] CKEditor Empty [Tutorial] CKEditor

Post by Daemon April 28th 2018, 4: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, 4:05 am; edited 6 times in total
Daemon
Daemon
Forumember

Posts : 104
Reputation : 90
Language : Português

Back to top Go down

[Tutorial] CKEditor Empty Re: [Tutorial] CKEditor

Post by skouliki 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 : 15061
Reputation : 1690
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

[Tutorial] CKEditor Empty Re: [Tutorial] CKEditor

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

Male Posts : 6898
Reputation : 794
Language : Greek, English

https://forumote.forumotion.com

Back to top Go down

[Tutorial] CKEditor Empty Re: [Tutorial] CKEditor

Post by Wecoc 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 : 144
Reputation : 111
Language : Catalan, Spanish, English

Back to top Go down

[Tutorial] CKEditor Empty Re: [Tutorial] CKEditor

Post by SLGray 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.


[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 : 51463
Reputation : 3519
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

[Tutorial] CKEditor Empty Re: [Tutorial] CKEditor

Post by Daemon 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 : 104
Reputation : 90
Language : Português

Back to top Go down

[Tutorial] CKEditor Empty Re: [Tutorial] CKEditor

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

Male Posts : 6898
Reputation : 794
Language : Greek, English

https://forumote.forumotion.com

Back to top Go down

[Tutorial] CKEditor Empty Re: [Tutorial] CKEditor

Post by Daemon 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 : 104
Reputation : 90
Language : Português

Back to top Go down

[Tutorial] CKEditor Empty Re: [Tutorial] CKEditor

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

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

Male Posts : 6898
Reputation : 794
Language : Greek, English

https://forumote.forumotion.com

Back to top Go down

[Tutorial] CKEditor Empty Re: [Tutorial] CKEditor

Post by SLGray 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.


[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 : 51463
Reputation : 3519
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

[Tutorial] CKEditor Empty Re: [Tutorial] CKEditor

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

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

Posts : 894
Reputation : 157
Language : 🇵🇹

https://www.forumotion.com/create-forum/modernbb

Back to top Go down

[Tutorial] CKEditor Empty Re: [Tutorial] CKEditor

Post by Daemon 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 : 104
Reputation : 90
Language : Português

Back to top Go down

[Tutorial] CKEditor Empty Re: [Tutorial] CKEditor

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

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.
SLGray
SLGray
Administrator
Administrator

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

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

[Tutorial] CKEditor Empty Re: [Tutorial] CKEditor

Post by Daemon 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 : 104
Reputation : 90
Language : Português

Back to top Go down

[Tutorial] CKEditor Empty Re: [Tutorial] CKEditor

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

i get this message for copy/paste buttons all browsers

[Tutorial] CKEditor Scree379


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

Female Posts : 15061
Reputation : 1690
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

[Tutorial] CKEditor Empty Re: [Tutorial] CKEditor

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

[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 : 144
Reputation : 111
Language : Catalan, Spanish, English

Back to top Go down

[Tutorial] CKEditor Empty Re: [Tutorial] CKEditor

Post by Daemon April 30th 2018, 5: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, 5:24 pm; edited 6 times in total
Daemon
Daemon
Forumember

Posts : 104
Reputation : 90
Language : Português

Back to top Go down

[Tutorial] CKEditor Empty Re: [Tutorial] CKEditor

Post by skouliki 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 : 15061
Reputation : 1690
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

[Tutorial] CKEditor Empty Re: [Tutorial] CKEditor

Post by Daemon 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 : 104
Reputation : 90
Language : Português

Back to top Go down

[Tutorial] CKEditor Empty Re: [Tutorial] CKEditor

Post by Daemon 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 : 104
Reputation : 90
Language : Português

Back to top Go down

[Tutorial] CKEditor Empty Re: [Tutorial] CKEditor

Post by SLGray April 30th 2018, 6: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.
SLGray
SLGray
Administrator
Administrator

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

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

[Tutorial] CKEditor Empty Re: [Tutorial] CKEditor

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

thank you !!
skouliki
skouliki
Manager
Manager

Female Posts : 15061
Reputation : 1690
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

[Tutorial] CKEditor Empty Re: [Tutorial] CKEditor

Post by YoshiGM 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
Active Poster

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

http://asistencia.foroactivo.com/u21373

Back to top Go down

[Tutorial] CKEditor Empty Re: [Tutorial] CKEditor

Post by Daemon 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 : 104
Reputation : 90
Language : Português

Back to top Go down

[Tutorial] CKEditor Empty Re: [Tutorial] CKEditor

Post by Ape May 2nd 2018, 12: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
Ape
Ape
Administrator
Administrator

Male Posts : 19084
Reputation : 1988
Language : fluent in dork / mumbojumbo & English haha

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

Back to top Go down

[Tutorial] CKEditor Empty Re: [Tutorial] CKEditor

Post by SLGray 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


[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 : 51463
Reputation : 3519
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

[Tutorial] CKEditor Empty Re: [Tutorial] CKEditor

Post by skouliki 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

[Tutorial] CKEditor Scree393
skouliki
skouliki
Manager
Manager

Female Posts : 15061
Reputation : 1690
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

[Tutorial] CKEditor Empty Re: [Tutorial] CKEditor

Post by Daemon 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

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

Posts : 104
Reputation : 90
Language : Português

Back to top Go down

[Tutorial] CKEditor Empty Re: [Tutorial] CKEditor

Post by skouliki 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 : 15061
Reputation : 1690
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

[Tutorial] CKEditor Empty Re: [Tutorial] CKEditor

Post by YoshiGM 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:

YoshiGM
YoshiGM
Active Poster

Male Posts : 1492
Reputation : 144
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

- Similar topics

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