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 2 of 2 Previous  1, 2

Go down

PunBB - [Tutorial] CKEditor - Page 2 Empty [Tutorial] CKEditor

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

First topic message reminder :

Destroy SCEditor and Build CKEditor

PunBB - [Tutorial] CKEditor - Page 2 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


PunBB - [Tutorial] CKEditor - Page 2 Empty Re: [Tutorial] CKEditor

Post by Daemon May 2nd 2018, 5:56 pm

skouliki wrote: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?
If you want to know if the codes for SCEditor can be adapted for CKEditor, the answer is yes!
Daemon
Daemon
Forumember

Posts : 104
Reputation : 90
Language : Português

Back to top Go down

PunBB - [Tutorial] CKEditor - Page 2 Empty Re: [Tutorial] CKEditor

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

YoshiGM wrote:Of course, here's the problem:
Spoiler:
Probably the error may be in another code.
It may be that you have some code that works over the default SCEditor, and because CKEditor replaces it, the other code has no effect on anything, which may be causing the possible error.
Daemon
Daemon
Forumember

Posts : 104
Reputation : 90
Language : Português

Back to top Go down

PunBB - [Tutorial] CKEditor - Page 2 Empty Re: [Tutorial] CKEditor

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

Yep, i've deleted some codes and the new editor has already appeared Wink
YoshiGM
YoshiGM
Active Poster

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

http://asistencia.foroactivo.com/u21373

Back to top Go down

PunBB - [Tutorial] CKEditor - Page 2 Empty Re: [Tutorial] CKEditor

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

Daemon wrote:
skouliki wrote: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?
If you want to know if the codes for SCEditor can be adapted for CKEditor, the answer is yes!

ok thats good in the future to know
skouliki
skouliki
Manager
Manager

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

http://iconskouliki.forumgreek.com

Back to top Go down

PunBB - [Tutorial] CKEditor - Page 2 Empty Re: [Tutorial] CKEditor

Post by Daemon May 3rd 2018, 5:31 pm

Insert video from YouTube:
PunBB - [Tutorial] CKEditor - Page 2 MgdMCiS
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: 'youtube',
                allowedContent: true
            });
            CKEDITOR.dialog.add('youtube', function(editor) {
                return {
                    title: 'Insert YouTube video',
                    minWidth: 390,
                    minHeight: 230,
                    contents: [{
                        id: 'urlTab',
                        label: 'Video URL',
                        title: 'Video URL',
                        elements: [{
                            id: 'url',
                            type: 'text',
                            label: 'Paste YouTube Video URL'
                        }, {
                            id: 'width',
                            type: 'text',
                            label: 'Width',
                            width: '40'
                        }, {
                            id: 'height',
                            type: 'text',
                            label: 'Height',
                            width: '40'
                        }]
                    }, {
                        id: 'embedTab',
                        label: 'Embed Code',
                        title: 'Embed Code',
                        elements: [{
                            id: 'embed',
                            type: 'textarea',
                            label: 'Paste the code generated by YouTube (embed)'
                        }]
                    }],
                    onOk: function() {
                        var editor = this.getParentEditor();
                        var contentUrl = this.getValueOf('urlTab', 'url');
                        var contentEmbed = this.getValueOf('embedTab','embed');
                        var width = this.getValueOf('urlTab', 'width');
                        var height = this.getValueOf('urlTab', 'height');
                        width = width ? width : 450;
                        height = height ? height : 366;
                        if (contentUrl.length > 0) {
                            contentUrl = contentUrl.replace(/^[^v]+v.(.{11}).*/, "$1");
                            editor.insertHtml('<iframe width="' + width + '" height="' + height + '" src="https://www.youtube.com/embed/' + contentUrl + '" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>');
                        } else if (contentEmbed.length > 0) {
                            editor.insertHtml(contentEmbed);
                        }
                    },
                    buttons: [CKEDITOR.dialog.okButton, CKEDITOR.dialog.cancelButton]
                };
            });
            CKEDITOR.plugins.add('youtube', {
                init: function(editor) {
                    var command = editor.addCommand('youtube', new CKEDITOR.dialogCommand('youtube'));
                    command.modes = {wysiwyg: 1,source: 1};
                    command.canUndo = false;
                    editor.ui.addButton('YouTube', {
                        label: 'Insert YouTube video',
                        command: 'youtube',
                        toolbar: 'insert',
                        icon: 'https://i62.servimg.com/u/f62/17/31/71/58/18-you10.png'
                    });
                    CKEDITOR.dialog.add('youtube', 'youtube');
                }
            });
        },
        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();
    });
});
Daemon
Daemon
Forumember

Posts : 104
Reputation : 90
Language : Português

Back to top Go down

PunBB - [Tutorial] CKEditor - Page 2 Empty Re: [Tutorial] CKEditor

Post by tikky October 12th 2019, 10:21 am

Create CKEditor in #awesomebb version
Code:
/*
 *  Application: CKEditor
 *  Version: Only AwesomeBB
 *  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 (_board.tpl_version !== 'awesomebb') return;
 
    $.ajax({
        type: 'GET',
        url: 'https://cdn.ckeditor.com/4.13.0/standard-all/ckeditor.js',
        dataType: 'script',
        success: function() {
            CKEDITOR.replace('quick-reply-textarea', {
                extraPlugins: 'bbcode'
            });
        },
        error: function(jqXHR, textStatus, errorThrown) {
            if(jqXHR.status == 500) {
                console.log('Internal error: ' + jqXHR.responseText);
            } else {
                console.log('Unexpected error.');
            }
        }
    });
    $(function() {
        $('#quick-reply-textarea').sceditor('instance').destroy();
    });
});
tikky
tikky
Forumember

Posts : 894
Reputation : 157
Language : 🇵🇹

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

skouliki and TonnyKamper like this post

Back to top Go down

PunBB - [Tutorial] CKEditor - Page 2 Empty Re: [Tutorial] CKEditor

Post by Abdalah tupe2 October 28th 2020, 12:22 pm

pedxz wrote:Create CKEditor in #awesomebb version
Code:
/*
 *  Application: CKEditor
 *  Version: Only AwesomeBB
 *  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 (_board.tpl_version !== 'awesomebb') return;
 
    $.ajax({
        type: 'GET',
        url: 'https://cdn.ckeditor.com/4.13.0/standard-all/ckeditor.js',
        dataType: 'script',
        success: function() {
            CKEDITOR.replace('quick-reply-textarea', {
                extraPlugins: 'bbcode'
            });
        },
        error: function(jqXHR, textStatus, errorThrown) {
            if(jqXHR.status == 500) {
                console.log('Internal error: ' + jqXHR.responseText);
            } else {
                console.log('Unexpected error.');
            }
        }
    });
    $(function() {
        $('#quick-reply-textarea').sceditor('instance').destroy();
    });
});

Is there way to add host image option ? and Is it able to make ( translation with change side of typing from right-to-left as defualt ) ?

regards
avatar
Abdalah tupe2
Forumember

Posts : 32
Reputation : 2
Language : arabic,english,turkish,france

http://www.pubarab.com/

Back to top Go down

PunBB - [Tutorial] CKEditor - Page 2 Empty Re: [Tutorial] CKEditor

Post by tikky October 28th 2020, 3:24 pm

Is there way to add host image option ?
You have here (click in the camera icon):

PunBB - [Tutorial] CKEditor - Page 2 ON6joEd

Abdalah tupe2 wrote:and Is it able to make ( translation with change side of typing from right-to-left as defualt ) ?
Change your code to:
Code:
/*
 *  Application: CKEditor
 *  Version: Only AwesomeBB
 *  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($) {

    $(function() {

        if (_board.tpl_version !== 'awesomebb') return;
        if (!$('form[action="/post"]').length) return;
     
        $.ajax({
            type: 'GET',
            url: 'https://cdn.ckeditor.com/4.15.0/standard-all/ckeditor.js',
            dataType: 'script',
            success: function() {
              CKEDITOR.replace(($.sceditor ? 'text_editor_textarea' : 'quick-reply-textarea'), {
                    height: 280,
                    extraPlugins: 'bbcode,smiley,font,colorbutton,justify',
                    contentsLangDirection: 'rtl',
                    language: _userdata.user_lang,
                    removePlugins: 'filebrowser,smiley,format,horizontalrule,pastetext,pastefromword,scayt,showborders,stylescombo,table,tabletools,tableselection,wsc',
                    removeButtons: 'Anchor,BGColor,Font,Strike,Subscript,Superscript,JustifyBlock',
                    disableObjectResizing: true,
                    fontSize_sizes: "10/10px;13/13px;16/16px;18/18px;24/24px"
                });
            },
            error: function(jqXHR, textStatus, errorThrown) {
                if (jqXHR.status == 500) {
                    console.log('Internal error: ' + jqXHR.responseText);
                } else {
                    console.log('Unexpected error.');
                }
            }
        });
     
      if(!$.sceditor) return;
       
        $('#quick-reply-textarea').sceditor('instance').destroy();

    });
})(jQuery);
tikky
tikky
Forumember

Posts : 894
Reputation : 157
Language : 🇵🇹

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

TonnyKamper and Abdalah tupe2 like this post

Back to top Go down

PunBB - [Tutorial] CKEditor - Page 2 Empty Re: [Tutorial] CKEditor

Post by F D B April 9th 2021, 6:25 pm

@pedxz @Daemon
Hello guys!

I'm having this issue. Missing icons when using the script:
PunBB - [Tutorial] CKEditor - Page 2 HVQACCo


Without the new editor:
PunBB - [Tutorial] CKEditor - Page 2 J9FO1Iw


This is the code I'm using:

Code:

(function($) {
 
    $(function() {
 
        if (_board.tpl_version !== 'awesomebb') return;
        if (!$('form[action="/post"]').length) return;
   
        $.ajax({
            type: 'GET',
            url: 'https://cdn.ckeditor.com/4.15.0/standard-all/ckeditor.js',
            dataType: 'script',
            success: function() {
              CKEDITOR.replace(($.sceditor ? 'text_editor_textarea' : 'quick-reply-textarea'), {
                    height: 200,
                width: 1000,
                    extraPlugins: 'bbcode,smiley,font,colorbutton,justify,horizontalrule',
                    language: _userdata.user_lang,
                    removePlugins: 'filebrowser,format,pastetext,pastefromword,scayt,showborders,stylescombo,table,tabletools,tableselection,wsc',
                    removeButtons: 'Anchor,BGColor,Font,Strike,Subscript,Superscript,JustifyBlock',
                    disableObjectResizing: true,
                    fontSize_sizes: "16/16px;18/18px;24/24px;30/30px"
                });
            },
            error: function(jqXHR, textStatus, errorThrown) {
                if (jqXHR.status == 500) {
                    console.log('Internal error: ' + jqXHR.responseText);
                } else {
                    console.log('Unexpected error.');
                }
            }
        });
   
      if(!$.sceditor) return;
     
        $('#quick-reply-textarea').sceditor('instance').destroy();
 
    });
})(jQuery);


Any ideas?.
Thank you!
F D B
F D B
Forumember

Posts : 42
Reputation : 1
Language : English

http://seanpaul-lovers.easyforumpro.com/

Back to top Go down

PunBB - [Tutorial] CKEditor - Page 2 Empty Re: [Tutorial] CKEditor

Post by jucarese April 9th 2021, 9:40 pm

You can have conflicts if you have more JS in your forum, deactivate them and leave only that and you are trying
jucarese
jucarese
Hyperactive

Male Posts : 2431
Reputation : 114
Language : spanish
Location : SSF Admin

http://asistencia.foroactivo.com/u23082

Back to top Go down

PunBB - [Tutorial] CKEditor - Page 2 Empty Re: [Tutorial] CKEditor

Post by F D B April 9th 2021, 10:43 pm

jucarese wrote:You can have conflicts if you have more JS in your forum, deactivate them and leave only that and you are trying

Hmmm no.
Actually I tried removing the other 2 scripts I had but that didn't fix this problem.
F D B
F D B
Forumember

Posts : 42
Reputation : 1
Language : English

http://seanpaul-lovers.easyforumpro.com/

Back to top Go down

PunBB - [Tutorial] CKEditor - Page 2 Empty Re: [Tutorial] CKEditor

Post by F D B April 11th 2021, 8:06 am

Any ideas?
F D B
F D B
Forumember

Posts : 42
Reputation : 1
Language : English

http://seanpaul-lovers.easyforumpro.com/

Back to top Go down

Page 2 of 2 Previous  1, 2

Back to top

- Similar topics

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