Question

感觉我应该已经能够跟踪这个了。我需要为CKEditor创建一个自定义插件（我使用4.3.1）。要开始使用，请使用此处的指南（http://docs.ckeditor.com/#!/guide/plugin_sdk_sample_1）。我下载了代码并将其放在我的ckeditor \ plugins文件夹中。所以，现在我有ckeditor \ plugins \ abbr。我不确定我在做什么，但按钮没有显示在工具栏中。代码如下。我的问题是，我应该在哪里定义＆＃34; abbr＆＃34;额外的插件？我是否在我定义stylesheetparser的_Edit.cshtml页面中执行此操作？或者把它放在config.js中？如果下面的设置不应该按钮显示在源按钮旁边？我是否需要将其包含在config.js中，或者插件代码是否需要处理？

做了一些游戏，如果我使用完整的工具栏，它会显示出来，但是当我自定义它时，它就会出现。

config.js

CKEDITOR.editorConfig = function (config) {
    config.toolbar = 'MyToolbar';
    config.forcePasteAsPlainText = true;
    //config.extraPlugins = 'abbr';
    config.ignoreEmptyParagraph = 'true'
  config.toolbar_MyToolbar =
    [
    { name: 'document', items: ['Preview', 'Print'] },
    { name: 'clipboard', items: ['Cut', 'Copy', 'PasteText', '-', 'Undo', 'Redo'] },
    { name: 'editing', items: ['Find', 'Replace', '-', 'SelectAll', '-', 'SpellChecker', 'Scayt'] },
    { name: 'basicstyles', items : [ 'Bold','Italic','Subscript','Superscript','-','RemoveFormat' ] },
        '/',
    { name: 'insert', items: ['Table', 'SpecialChar'] },
    { name: 'styles', items : [ 'Styles'] }

    , { name: 'source', items: ['Source', '-', 'abbr'] }
    ];
};

_Edit.cshtml

 @Html.TextAreaFor(e => e.Narrative, 10, 10, null)
 <script type="text/javascript">
     CKEDITOR.replace('Narrative', {
         extraPlugins: 'stylesheetparser,abbr',

         // Stylesheet for the contents.
         contentsCss: '@Href("~/content/"+@Model.CssFile)',
         stylesheetParser_skipSelectors: '',
         disableNativeSpellChecker: false,

         // Do not load the default Styles configuration.
         stylesSet: [],
         height: '600px',
         width: '100%'
         });
 </script>

plugin.js

CKEDITOR.plugins.add( 'abbr', {

// Register the icons.
icons: 'abbr',

// The plugin initialization logic goes inside this method.
init: function( editor ) {

    // Define an editor command that opens our dialog.
    editor.addCommand( 'abbr', new CKEDITOR.dialogCommand( 'abbrDialog' ) );

    // Create a toolbar button that executes the above command.
    editor.ui.addButton( 'Abbr', {

        // The text part of the button (if available) and tooptip.
        label: 'Insert Abbreviation',

        // The command to execute on click.
        command: 'abbr',
        // The button placement in the toolbar (toolbar group name).
        toolbar: 'source'
    });

    // Register our dialog file. this.path is the plugin folder path.
    CKEDITOR.dialog.add( 'abbrDialog', this.path + 'dialogs/abbr.js' );
}
});

自定义CKEditor插件按钮未显示

0 个答案: