我无法将 Source 按钮添加到 CKEditor 4 的工具栏答案

【问题标题】：I can't add the Source button to CKEditor 4's toolbar我无法将 Source 按钮添加到 CKEditor 4 的工具栏
【发布时间】：2012-11-29 00:59:54
【问题描述】：

我在将 Source 按钮添加到 CKEditor 4 的工具栏时遇到问题。我今天刚下载了新的 CKEditor。

我正在使用一个名为 oConfig 的配置对象：

oConfig.toolbar = 'Custom';
oConfig.toolbar_Custom = [
  ['Bold', 'Source', 'Italic']
];

工具栏仅显示粗体和斜体按钮。 CKEditor 文档中的This example 告诉我它应该可以工作。

【问题讨论】：

标签： javascript ckeditor

【解决方案1】：

发生这种情况的原因有两个：

您已下载基本包，其中不包含sourcearea 插件。
您正在内联模式下使用 CKEditor。源代码模式在内联模式中尚不可用。

【讨论】：

我使用的是内联模式，就是这样。知道什么时候可以使用吗？
很可能在下一个主要版本（4.1）中，所以大约 3 个月。但是，如果我们看到社区真的需要它，我们可能会更快地添加它。这是票：dev.ckeditor.com/ticket/9713
4.1RC已经发布，需要Sourcedialog插件
下面的答案对我来说完美无缺，应该是公认的答案。

【解决方案2】：

未来的谷歌人，CKEditor v4.2 现在有一个插件可以在内联编辑模式下查看源代码。

http://ckeditor.com/addon/sourcedialog

【讨论】：

【解决方案3】：

这是我制作的一个插件：

首先，在ckeditor/plugins/ 中创建一个名为“htmlSource”的新文件夹，在其中创建一个名为“plugin.js”的文件，并在该文件中粘贴以下代码：

//-----------------------------Start Plugin Code-------------------------



plugInName = 'htmlSource';

CKEDITOR.plugins.add(plugInName,
{  
  init: function (editor) {

    editor.addCommand('htmlDialog', new CKEDITOR.dialogCommand('htmlDialog'));
    editor.ui.addButton(plugInName, {
        label: 'Html Source',
        icon: 'http://www.example.com/images/btn_html.png',
        command: 'htmlDialog'
    });

    CKEDITOR.dialog.add('htmlDialog', function (editor) {
        return {
            title: 'Fuente Html',
            minWidth: 600,
            minHeight: 400,
            contents: [
                        {
                            id: 'general',
                            label: 'Settings',
                            elements:
                            [
                            // UI elements of the Settings tab.
                                {
                                type: 'textarea',
                                id: 'contents',
                                rows: 25,
                                onShow: function () {
                                    this.setValue(editor.container.$.innerHTML);

                                },
                                commit: function (data) {              //--I get only the body part in case I paste a complete html
                                    data.contents = this.getValue().replace(/^[\S\s]*<body[^>]*?>/i, "").replace(/<\/body[\S\s]*$/i, "");
                                }

                            }
                                ]
                        }
                    ],

            onOk: function () {
                var data = {};
                this.commitContent(data);
                $(editor.container.$).html(data.contents);
            },
            onCancel: function () {
                //  console.log('Cancel');
            }
        };
    });
}


});

//--------------------Plugin Code Ends Here--------------------

请注意有一个参数叫做icon，你必须设置插件按钮图片的url，我只是放了一个例子url（'http://www.example.com/images/btn_html.png'）你必须使用一个有效的才能看到插件按钮。

要在ckeditor工具栏中设置这个插件，必须在config.js文件里面进行配置，例如：

CKEDITOR.editorConfig = function (config) {
    config.plugins =
    'htmlSource,' +    //Here is the plugin
    'about,' +
    'a11yhelp,' +
    'basicstyles,' +
    'bidi,' +
    .....;
config.toolbar = 'Full';   //Add the plugin to the full toolbar

config.toolbar_Full =      //Note that our plugin will be the first button in the toolbar
        [
        ['htmlSource', '-', 'Save', 'NewPage', 'Preview', '-', 'Templates'],
        ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Print',    'SpellChecker', 'Scayt'],
        ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'],
        ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
        ['BidiLtr', 'BidiRtl'],
        '/',
        ['Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript'],
        ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote', 'CreateDiv'],
        ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
        ['Link', 'Unlink', 'Anchor'],
        ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak'],
        '/',
        ['Styles', 'Format', 'Font', 'FontSize'],
        ['TextColor', 'BGColor'],
        ['Maximize', 'ShowBlocks', '-', 'About']
   ]; 
};

我知道这是有效的，所以如果你有什么问题请告诉我。

【讨论】：

我建议不要对“ckeditor”文件夹进行更改，因为这使得用更高版本替换文件夹变得更加困难。但除此之外，好的答案：+1。
谢谢。我使用的是 4.0，但 SourceDialog 似乎没有工作 - 不过这似乎非常好。
从这里开始，我相信上面需要 jQuery - 所以我添加了一个答案来删除该依赖项。

【解决方案4】：

对我来说，它有助于使用：

config.extraPlugins = 'htmlSource';

【讨论】：

【解决方案5】：

对于 CKEditor 4.1.1，上述两个答案的组合对我有用，尽管我必须进行一些小的调整。上面写着“--- Start Plugin here ---”的部分我可以照原样复制。对于配置选项，我不得不使用

CKEDITOR.config.extraPlugins = 'htmlSource'; // Notice: "extraPlugins".
CKEDITOR.config.toolbar = 'Full';
CKEDITOR.config.toolbar_Full = ...;

而不是

CKEDITOR.editorConfig = function (config) { ...

最后，这一切都是在内联模式下使用普通安装完成的，也就是说，我不需要下载任何额外的插件来完成这项工作。

【讨论】：

【解决方案6】：

我正在使用版本 4 的 Julio 插件，需要进行调整以避免此 JS 错误：

TypeError: $(...).html 不是函数

我换了这行：

$(editor.container.$).html(data.contents);

用这个：

// See http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-setData
editor.setData(
    data.contents,
    function() {
        this.checkDirty();
    }
);

我的猜测是 Julio 的解决方案需要 jQuery，而我的方法是 CKEditor 方法（或者至少更接近它！）。

【讨论】：