我无法将源按钮添加到CKEditor 4的工具栏。我今天刚刚下载了新的CKEditor。我无法将源按钮添加到CKEditor 4的工具栏
我使用一个名为oConfig配置对象：
oConfig.toolbar = 'Custom';
oConfig.toolbar_Custom = [
['Bold', 'Source', 'Italic']
];
工具栏显示了仅粗体和斜体按钮。来自CKEditor的文档的This example告诉我它应该工作。
有两个原因，它可能会发生：
您已经下载了基本套餐，其中不包括sourcearea插件。
您正在使用CKEditor inline模式。源模式尚未在内联模式下提供。
这里是我做了一个插件：
首先，内部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--------------------
请注意，有一个叫图标，你必须设置的插件按钮图像的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']
];
};
我知道这是工作，所以如果你有一些麻烦，请告诉我。
对我来说，它有助于使用：
config.extraPlugins = 'htmlSource';
我以前的答案是为超卫生的原因被删除;虽然我可以帮助任何人..
此外，您需要在您的插件目录中有这个htmlSource插件... – Bellash
对于CKEditor 4.1.1，上述两个答案的组合对我来说很合适，但我不得不做一些小的调整。 “---这里启动插件---”的部分我能够照原样复制。对于配置选项，我不得不使用
CKEDITOR.config.extraPlugins = 'htmlSource'; // Notice: "extraPlugins".
CKEDITOR.config.toolbar = 'Full';
CKEDITOR.config.toolbar_Full = ...;
，而不是
CKEDITOR.editorConfig = function (config) { ...
最后，这是所有串联模式完成了一个普通的香草安装，即我没有下载任何额外的插件做这个工作。
我使用Julio的插件有4个版本，并根据需要进行调整，以避免这种JS错误：
TypeError: $(...).html is not a function
我换这条线：
$(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个月。不过，如果我们看到社区确实需要它，我们有可能会更快地添加它。这张票：https：//dev.ckeditor.com/ticket/9713 – Reinmar
4.1RC已经发布，你需要Sourcedialog插件 – jnoreiga