vue 中 引入 ckeditor4 文件
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<script src="winTender.js"></script>
<script src="ckeditor/ckeditor.js"></script>
</body>
</html>
vue 使用
<template>
<div>
<textarea ref="refCkeditorEx" :id="id" :disabled="disabledInfo"></textarea>
</div>
</template>
private toolbar_Full = [
//{ name: 'document', items: [ 'Save', 'NewPage', 'Preview' ] },
{
name: "clipboard",
items: [
//"Source",
//"Cut",
//"Copy",
//"Paste",
//"PasteText",
//"PasteFromWord",
//"-",
"Undo",
"Redo"
]
},
{ name: "styles", items: ["Format", "Font", "FontSize"] },
//{ name: "editing", items: ["Find", "Replace"]},
//{ name: 'forms', items: [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },
//"/",
{ name: "colors", items: ["TextColor", "BGColor"] },
{
name: "basicstyles",
items: [
"Bold",
"Italic",
"Underline",
//"Strike",
// "Subscript",
// "Superscript",
"-",
"CopyFormatting",
//"RemoveFormat"
]
},
{
name: "paragraph",
items: [
// "NumberedList",
// "BulletedList",
//"-",
// "Outdent",
// "Indent",
//"Blockquote",
// "-",
"JustifyLeft",
"JustifyCenter",
"JustifyRight",
"JustifyBlock"
]
},
//{ name: "links", items: ["Link", "Unlink", "Anchor"] },
// "/",
{
name: "insert",
items: [
"Table",
//"HorizontalRule",
"SpecialChar",
"PageBreak",
"Smiley",
"SimpleUpload"
]
}
];
private stylesSet = [
/* Inline Styles */
{ name: "Marker", element: "span", attributes: { class: "marker" } },
{ name: "Cited Work", element: "cite" },
{ name: "Inline Quotation", element: "q" },
/* Object Styles */
{
name: "Special Container",
element: "div",
styles: {
padding: "5px 10px",
background: "#eee",
border: "1px solid #ccc"
}
},
{
name: "Compact table",
element: "table",
attributes: {
cellpadding: "5",
cellspacing: "0",
border: "1",
bordercolor: "#ccc"
},
styles: {
"border-collapse": "collapse",
"table-layout":"fixed"
}
},
{
name: "Borderless Table",
element: "table",
styles: { "border-style": "hidden", "background-color": "#E6E6FA","table-layout":"fixed" }
},
{
name: "Square Bulleted List",
element: "ul",
styles: { "list-style-type": "square" }
}
];
private ckeditor: any = null;
//private tht: any = {};
private win: any = {};
private editorData = "";
private mounted() {
let that: any = this;
this.win = window;
//const self = this;
// 渲染编辑器
let config = that.toolbar_Full;
// this.win.CKEDITOR.editorConfig({ language: "zh-cn", height: 700 });
that.ckeditor = this.win.CKEDITOR.replace(that.id, {
toolbarCanCollapse: false,
toolbarStartupExpanded: false,
toolbar: config,
language: "zh-cn",
height: that.height,
removePlugins: "elementspath",
//contentsCss: ['http://localhost:8080/ckeditor/contents.css?t=J8Q8mystyles.css'],
bodyClass: "document-editor",
// format_tags: 'p;h1;h2;h3;pre',
stylesSet: that.stylesSet,
sharedSpaces:{top:'toolbarLocation'}
});
if (!this.win.winTender.isEdit) {
this.disabledInfo = true;
}
// 设置初始内容
that.ckeditor.setData(that.value);
// 监听内容变更事件
that.ckeditor.on("change", function() {
let content = that.ckeditor.getData();
//let reg = new RegExp('font-family:宋体', "g");
content = content
.replace(/font-family:黑体/g, "font-family:宋体")
.replace(/font-family:SimHei/g, "font-family:SimSun");
//content=content.replace(/font-family:SimHei/g, 'font-family:SimSun');
that.$emit("changeValue", content);
});