Javascript 我能'；t将源按钮添加到CKEditor 4'；工具栏

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

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

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

---

工具栏仅显示粗体和斜体按钮。从CKEditor的文档中可以看出，它应该可以工作。

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

您已经下载了基本软件包，其中不包括插件

您正在内联模式下使用CKEditor。源模式在内联模式下尚不可用

---

下面是我制作的一个插件：

首先，在

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--------------------

---

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

对于我来说，使用以下工具很有帮助：

config.extraPlugins = 'htmlSource';

---

对于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) { ...

---

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

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

---

我正在使用Julio的插件版本4，需要进行调整以避免此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方法（或者至少更接近它！）。

我使用的是内联模式，就是这样。你知道它什么时候上市吗？很可能在下一个主要版本（4.1）中，所以大约3个月后。然而，如果我们看到社区真的需要它，我们就有可能更快地添加它。这是问题：4.1RC已经发布，你需要Sourcedialog插件下面的答案对我来说完美无瑕，应该是可以接受的答案。我建议不要更改“ckeditor”文件夹，因为这会使用更高版本替换该文件夹更加困难。但除此之外，好答案：+1。谢谢你。我使用的是4.0，而SourceDialog似乎不起作用——不过这似乎很好。接下来，我相信上面的内容需要jQuery——因此我添加了一个答案来删除该依赖关系。

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