Question

我正在开发一个Django应用程序，该应用程序将我定向到ckeditor文本编辑器的问题我看不到代码片段

我在setting.py中有此配置

 CKEDITOR_CONFIGS = {

'default': {
    'skin': 'moono',
    # 'skin': 'office2013',
    'toolbar_Basic': [
        ['Source', '-', 'Bold', 'Italic']
    ],
    'toolbar_YourCustomToolbarConfig': [

        {'name': 'document', 'items': ['Source', '-', 'Save', 'NewPage', 'Preview', 'Print', '-', 'Templates']},

        {'name': 'clipboard', 'items': ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo']},
        {'name': 'editing', 'items': ['Find', 'Replace', '-', 'SelectAll']},
        {'name': 'forms',
         'items': ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton',
                   'HiddenField']},
        '/',
        {'name': 'basicstyles',
         'items': ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat']},
        {'name': 'paragraph',
         'items': ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-',
                   'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl',
                   'Language']},
        {'name': 'links', 'items': ['Link', 'Unlink', 'Anchor']},
        {'name': 'insert',
         'items': ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe', 'CodeSnippet']},
        '/',
        {'name': 'styles', 'items': ['Styles', 'Format', 'Font', 'FontSize']},
        {'name': 'colors', 'items': ['TextColor', 'BGColor']},
        {'name': 'tools', 'items': ['Maximize', 'ShowBlocks']},
        {'name': 'about', 'items': ['About']},

        '/',  # put this to force next toolbar on new line
        {'name': 'yourcustomtools', 'items': [
            # put the name of your editor.ui.addButton here
            'Preview',
            'Maximize',

        ]},

    ],


    'toolbar': 'YourCustomToolbarConfig',  # put selected toolbar config here
    # 'toolbarGroups': [{ 'name': 'document', 'groups': [ 'mode', 'document', 'doctools' ] }],

    # 'height': 291,
    # 'width': '100%',
    # 'filebrowserWindowHeight': 725,
    # 'filebrowserWindowWidth': 940,
    # 'toolbarCanCollapse': True,
    # 'mathJaxLib': '//cdn.mathjax.org/mathjax/2.2-latest/MathJax.js?config=TeX-AMS_HTML',
    'tabSpaces': 4,
    'extraPlugins': ','.join([
        'uploadimage', # the upload image feature
        # your extra plugins here
        'div',
        'autolink',
        'autoembed',
        'embedsemantic',
        'autogrow',
        # 'devtools',
        'widget',
        'lineutils',
        'clipboard',
        'dialog',
        'dialogui',
        'elementspath'
    ]),


},
# my costum tool bar i created 
'special':  {
    'toolbar': 'Special',
    'toolbar_special': [
           ['codeSnippet', 'Youtube'],
    ],
    'extraPlugins': ','.join(['codeSnippet', 'youtube']),

}
}

config.js

/**

 CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';

 CKEDITOR.on('instanceReady', function (ev) {
 ev.editor.dataProcessor.htmlFilter.addRules( {
    elements : {
        img: function( el ) {
            // Add bootstrap "img-responsive" class to each inserted  image
            el.addClass('img-fluid');

            // Remove inline "height" and "width" styles and
            // replace them with their attribute counterparts.
            // This ensures that the 'img-responsive' class works
            var style = el.attributes.style;

            if (style) {
                // Get the width from the style.
                var match = /(?:^|\s)width\s*:\s*(\d+)px/i.exec(style),
                    width = match && match[1];

                // Get the height from the style.
                match = /(?:^|\s)height\s*:\s*(\d+)px/i.exec(style);
                var height = match && match[1];

                // Replace the width
                if (width) {
                    el.attributes.style =  el.attributes.style.replace(/(?:^|\s)width\s*:\s*(\d+)px;?/i, '');
                    el.attributes.width = width;
                }

                // Replace the height
                if (height) {
                    el.attributes.style = el.attributes.style.replace(/(?:^|\s)height\s*:\s*(\d+)px;?/i, '');
                    el.attributes.height = height;
                }
            }

            // Remove the style tag if it is empty
            if (!el.attributes.style)
                delete el.attributes.style;
        }
    }
 });
 });



CKEDITOR.editorConfig = function (config) {
...
// Default language direction
 config.contentsLangDirection = 'rtl';
...
 };
 };

Answer 1

您需要将额外的插件添加到toolbar_YourCustomToolbarConfig块中，以便显示出来，即尝试在下面添加

About
    {
                'name': 'extra',
                'items': [
                          'CodeSnippet', ],
    },

Answer 2

正如uber指出的那样，您需要添加额外的插件，但是我对格式感到困惑。格式如下：

BeforeElse

我在ckeditor（django app）中看不到代码片段

2 个答案: