CKEDITOR.disableAutoInline = true;
CKEDITOR.replace('Page_title', {
height: 100,
customConfig: 'ckeditor-wordcount-config.js',
wordcount: {
maxCharCount: 41,
showWordCount: false,
showParagraphs: false,
showCharCount: true,
countSpacesAsChars: true,
countLineBreaks: true,
}
});
上面是视图中的代码,下面是我用作plugin.js的插件
/**
* @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
*/
CKEDITOR.plugins.add('sourcedialog', {
// jscs:disable maximumLineLength
lang: 'af,ar,az,bg,bn,bs,ca,cs,cy,da,de,de-ch,el,en,en-au,en-ca,en-gb,eo,es,es-mx,et,eu,fa,fi,fo,fr,fr-ca,gl,gu,he,hi,hr,hu,id,is,it,ja,ka,km,ko,ku,lt,lv,mn,ms,nb,nl,no,oc,pl,pt,pt-br,ro,ru,si,sk,sl,sq,sr,sr-latn,sv,th,tr,tt,ug,uk,vi,zh,zh-cn', // %REMOVE_LINE_CORE%
// jscs:enable maximumLineLength
requires: 'dialog',
icons: 'sourcedialog,sourcedialog-rtl', // %REMOVE_LINE_CORE%
hidpi: true, // %REMOVE_LINE_CORE%
init: function (editor) {
// Register the "source" command, which simply opens the "source" dialog.
editor.addCommand('sourcedialog', new CKEDITOR.dialogCommand('sourcedialog'));
// Register the "source" dialog.
CKEDITOR.dialog.add('sourcedialog', this.path + 'dialogs/sourcedialog.js');
// If the toolbar is available, create the "Source" button.
if (editor.ui.addButton) {
editor.ui.addButton('Sourcedialog', {
label: editor.lang.sourcedialog.toolbar,
command: 'sourcedialog',
toolbar: 'mode,10'
});
}
}
});
还有
/**
* @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
*/
CKEDITOR.dialog.add('sourcedialog', function (editor) {
var size = CKEDITOR.document.getWindow().getViewPaneSize();
// Make it maximum 800px wide, but still fully visible in the viewport.
var width = Math.min(size.width - 70, 800);
// Make it use 2/3 of the viewport height.
var height = size.height / 1.5;
// Store old editor data to avoid unnecessary setData.
var oldData;
return {
title: editor.lang.sourcedialog.title,
minWidth: 100,
minHeight: 100,
onShow: function () {
this.setValueOf('main', 'data', oldData = editor.getData());
},
onOk: (function () {
function setData(dialog, newData) {
// [IE8] Focus editor before setting selection to avoid setting data on
// locked selection, because in case of inline editor, it won't be
// unlocked before editable's HTML is altered. (https://dev.ckeditor.com/ticket/11585)
editor.focus();
editor.setData(newData, function () {
dialog.hide();
// Ensure correct selection.
var range = editor.createRange();
range.moveToElementEditStart(editor.editable());
range.select();
});
}
return function () {
// Remove CR from input data for reliable comparison with editor data.
var newData = this.getValueOf('main', 'data').replace(/\r/g, ''),
that = this;
// Avoid unnecessary setData. Also preserve selection
// when user changed his mind and goes back to wysiwyg editing.
if (newData === oldData)
return true;
setTimeout(function () {
setData(that, newData);
});
// Don't let the dialog close before setData is over, to hide
// from user blinking caused by selection restoring and setting new data.
return false;
};
})(),
contents: [{
id: 'main',
label: editor.lang.sourcedialog.title,
elements: [{
type: 'textarea',
id: 'data',
dir: 'ltr',
inputStyle: 'cursor:auto;' +
'width:' + width + 'px;' +
'height:' + height + 'px;' +
'tab-size:4;' +
'text-align:left;',
'class': 'cke_source'
}]
}]
};
});
我正在使用的上述插件,但是在ckeditor中打开源对话框后,无法向段落或div添加任何背景色。