[Tutorial] CKEditor

Page 2 of 2 Previous  1, 2

Go down

[Tutorial] CKEditor

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

First topic message reminder :

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 : 81
Language : Português

Back to top Go down


Re: [Tutorial] CKEditor

Post by Daemon on 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!
avatar
Daemon
Forumember

Posts : 101
Reputation : 81
Language : Português

Back to top Go down

Re: [Tutorial] CKEditor

Post by Daemon on 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.
avatar
Daemon
Forumember

Posts : 101
Reputation : 81
Language : Português

Back to top Go down

Re: [Tutorial] CKEditor

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

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

Male Posts : 757
Reputation : 108
Language : Spanish & English
Location : Mexico

http://asistencia.foroactivo.com/u21373

Back to top Go down

Re: [Tutorial] CKEditor

Post by skouliki on 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
avatar
skouliki
Manager
Manager

Female Posts : 4682
Reputation : 774
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Re: [Tutorial] CKEditor

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

Insert video from YouTube:

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

Posts : 101
Reputation : 81
Language : Português

Back to top Go down

Page 2 of 2 Previous  1, 2

Back to top


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