javascript 我无法将 Source 按钮添加到 CKEditor 4 的工具栏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13617111/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
I can't add the Source button to CKEditor 4's toolbar
提问by Sam Selikoff
I'm having trouble adding the Source button to CKEditor 4's toolbar. I just downloaded the new CKEditor today.
我无法将 Source 按钮添加到 CKEditor 4 的工具栏。我今天刚刚下载了新的 CKEditor。
I'm using a config object named oConfig:
我正在使用名为 oConfig 的配置对象：
oConfig.toolbar = 'Custom';
oConfig.toolbar_Custom = [
['Bold', 'Source', 'Italic']
];
The toolbar shows up with only the Bold and Italic buttons. This examplefrom CKEditor's docs tells me it should be working.
回答by Wiktor Walc
There are two reasons why it may be happening:
它可能发生的原因有两个：
You have downloaded the basic package, where the sourceareaplugin is not included.
You are using CKEditor in inline mode. Source mode isn't available in inline mode yet.
您已下载基本包，其中不包含sourcearea插件。
您正在内联模式下使用 CKEditor。内联模式尚不提供源模式。
回答by Ergec
Future googlers, for CKEditor v4.2 now there is a plugin to view source code in inline editing mode.
未来的 googlers，对于 CKEditor v4.2，现在有一个插件可以在内联编辑模式下查看源代码。
回答by Julio Pailler
Here is a plugin I've made:
这是我制作的一个插件：
First of all, inside ckeditor/plugins/create a new folder called "htmlSource", inside it create a file called "plugin.js" and inside this file paste the code below:
首先，在里面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--------------------
Please notice that there is a parameter called icon where you must set the url of the Plugin Button Image, I just put an example url ('http://www.example.com/images/btn_html.png') you must use a valid one to see the plugin button.
请注意，有一个参数叫做 icon ，你必须在其中设置插件按钮图像的 url，我只是放了一个示例 url (' http://www.example.com/images/btn_html.png') 你必须使用一个有效的一个看到插件按钮。
To set this plugin in the ckeditor toolbar, you must configure it inside the config.js file, for example:
要在 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']
];
};
I know this is working, so if you have some trouble please tell me.
我知道这是有效的，所以如果你有什么问题，请告诉我。
回答by Phil
For me, it helped to use:
对我来说，它有助于使用：
config.extraPlugins = 'htmlSource';
回答by VeeTheSecond
For CKEditor 4.1.1, a combination of the above two answers worked for me, although I had to make some minor tweaks. The portion that says "--- Start Plugin here ---" I was able to copy as-is. For the configuration options, I had to use
对于 CKEditor 4.1.1，上述两个答案的组合对我有用，尽管我不得不做一些小的调整。说“---在此处启动插件---”的部分我可以按原样复制。对于配置选项，我不得不使用
CKEDITOR.config.extraPlugins = 'htmlSource'; // Notice: "extraPlugins".
CKEDITOR.config.toolbar = 'Full';
CKEDITOR.config.toolbar_Full = ...;
instead of
代替
CKEDITOR.editorConfig = function (config) { ...
Finally, this was all done in inline mode with a plain vanilla installation, i.e. I did not have to download any extra plugins to make this work.
最后，这一切都是通过简单的 vanilla 安装在内联模式下完成的，即我不需要下载任何额外的插件来完成这项工作。
回答by halfer
I'm using Julio's plugin with version 4, and needed to make an adjustment to avoid this JS error:
我正在使用 Julio 的第 4 版插件，需要进行调整以避免此 JS 错误：
TypeError: $(...).html is not a function
类型错误：$(...).html 不是函数
I swapped this line:
我交换了这一行：
$(editor.container.$).html(data.contents);
with this:
有了这个：
// See http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-setData
editor.setData(
data.contents,
function() {
this.checkDirty();
}
);
My guess is Julio's solution requires jQuery, and my approach is the CKEditor approach (or at least closer to it!).
我的猜测是 Julio 的解决方案需要 jQuery，而我的方法是 CKEditor 方法（或者至少更接近它！）。
