ckeditor.vue
<template>
<div>
<!-- 工具栏容器 -->
<div id="toolbar-container"></div>
<!-- 编辑器容器 -->
<div style="margin-left: 100px;" id="editor"></div>
</div>
</template>
<script>
import CKEditorb from "../../static/js/ckeditor5/classic/ckeditor.js";
export default {
props: {
value: { type: String, default: "" },
},
data() {
return {
editor: null, //编辑器实例
};
},
mounted() {
this.initCKEditor();
},
methods: {
async initCKEditor() {
let _this = this;
let editor = await CKEditorb.create(document.querySelector("#editor"), {
placeholder: _this.$t("addContent"),
//上传图片参数
simpleUpload: {
uploadUrl: axios.defaults.baseURL + "upload_rich_text_img?e=v2",
headers: { Authorization: localStorage.token },
},
heading: {
options: [
{
model: "paragraph",
title: "Paragraph",
class: "ck-heading_paragraph",
},
{
model: "heading2",
view: "h2",
title: "Heading 1",
class: "ck-heading_heading2",
},
{
model: "heading3",
view: "h3",
title: "Heading 2",
class: "ck-heading_heading3",
},
],
},
});
const toolbarContainer = document.querySelector("#toolbar-container");
toolbarContainer.appendChild(editor.ui.view.toolbar.element);
_this.editor = editor; //将编辑器保存起来，用来随时获取编辑器中的内容等，执行一些操作
editor.model.document.on("change:data", function () {
_this.$emit("change", editor.getData());
});
editor.setData(_this.value);
},
},
};
</script>
打包前的配置ckeditor.js
/**
* @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
*/
// The editor creator to use.
import ClassicEditorBase from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import UploadAdapter from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter';
import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote';
import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder';
import EasyImage from '@ckeditor/ckeditor5-easy-image/src/easyimage';
import Heading from '@ckeditor/ckeditor5-heading/src/heading';
import Image from '@ckeditor/ckeditor5-image/src/image';
// import ImageResizeEditing from '@ckeditor/ckeditor5-image/src/imageresize/imageresizeediting';
// import ImageResizeHandles from '@ckeditor/ckeditor5-image/src/imageresize/imageresizehandles';
import ImageResize from '@ckeditor/ckeditor5-image/src/imageresize';
// import LinkImage from '@ckeditor/ckeditor5-link/src/linkimage';
import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption';
import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle';
import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar';
import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload';
import SimpleUploadAdapter from '@ckeditor/ckeditor5-upload/src/adapters/simpleuploadadapter';
import Indent from '@ckeditor/ckeditor5-indent/src/indent';
import Link from '@ckeditor/ckeditor5-link/src/link';
import List from '@ckeditor/ckeditor5-list/src/list';
import MediaEmbed from '@ckeditor/ckeditor5-media-embed/src/mediaembed';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice';
import Table from '@ckeditor/ckeditor5-table/src/table';
import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar';
import TextTransformation from '@ckeditor/ckeditor5-typing/src/texttransformation';
import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment'; // <--- ADDED
import Font from '@ckeditor/ckeditor5-font/src/font';
import Highlight from '@ckeditor/ckeditor5-highlight/src/highlight';
// // 核心插件，提供管理特殊字符及其类别的API。
import SpecialCharacters from '@ckeditor/ckeditor5-special-characters/src/SpecialCharacters';
// //-所有的特殊字符插件。
import SpecialCharactersEssentials from '@ckeditor/ckeditor5-special-characters/src/specialcharactersessentials'
import HorizontalLine from '@ckeditor/ckeditor5-horizontal-line/src/horizontalline';
import RemoveFormat from '@ckeditor/ckeditor5-remove-format/src/removeformat';
import Underline from '@ckeditor/ckeditor5-basic-styles/src/underline';
// //-箭的特殊角色
// import SpecialCharactersArrows from '@ckeditor/ckeditor5-special-characters/src/SpecialCharactersArrows';
// //-货币特殊字符。
// import SpecialCharactersCurrency from '@ckeditor/ckeditor5-special-characters/src/SpecialCharactersCurrency';
// //-拉丁特殊字符。
// import SpecialCharactersLatin from '@ckeditor/ckeditor5-special-characters/src/SpecialCharactersLatin';
// //-数学特殊字符。
// import SpecialCharactersMathematical from '@ckeditor/ckeditor5-special-characters/src/SpecialCharactersMathematical';
// //-文本特殊字符。
// import SpecialCharactersText from '@ckeditor/ckeditor5-special-characters/src/SpecialCharactersText';
export default class ClassicEditor extends ClassicEditorBase {
}
// Plugins to include in the build.
ClassicEditor.builtinPlugins = [
Essentials,
UploadAdapter,
Autoformat,
Bold,
Italic,
BlockQuote,
CKFinder,
EasyImage,
Heading,
Image,
ImageToolbar,
ImageCaption,
ImageStyle,
ImageResize,
// ImageResizeEditing,
// ImageResizeHandles,
// LinkImage,
ImageUpload,
SimpleUploadAdapter,
Indent,
Link,
List,
MediaEmbed,
Paragraph,
PasteFromOffice,
Table,
TableToolbar,
TextTransformation,
Alignment,
Font,
SpecialCharacters,
SpecialCharactersEssentials,
Highlight,
HorizontalLine,
RemoveFormat,
Underline
];
// Editor configuration.
ClassicEditor.defaultConfig = {
toolbar: {
items: [
"heading", //段落
"|", //分隔
"bold", //加粗
"italic", //倾斜
"link", //超链接
"bulletedList", //项目列表
"numberedList", //编号列表
"blockQuote", //块引用
"undo", //撤销
"redo", //重做
"imageUpload", //插入图像
"insertTable", //表格
"MediaEmbed", //视频
"indent", //减少缩进
"Outdent", //增加缩进
"CKFinder", //插入文件
"alignment", //对齐
// "alignment:left",
// "alignment:right",
// "alignment:center",
// "alignment:justify",
"fontSize", //字体大小
"fontColor", //字体颜色
"fontBackgroundColor", //字体背景颜色
"fontFamily", //字体
"specialCharacters", //特殊字符
"highlight", //标记
"horizontalLine", //分割线
"removeFormat", //删除格式
"todoList",
"underline", //下划线
]
},
image: {
toolbar: [
'imageStyle:full',
'imageStyle:side',
'|',
'imageTextAlternative'
]
},
table: {
contentToolbar: [
'tableColumn',
'tableRow',
'mergeTableCells'
]
},
// This value must be kept in sync with the language defined in webpack.config.js.
language: 'en'
};
官方链接
https://ckeditor.com/docs/cke...
看不懂该怎么写，写在哪。
