1. 配置 vue.config.js
1.1 安装依赖项
npm install --save \
@ckeditor/ckeditor5-vue \
@ckeditor/ckeditor5-dev-webpack-plugin \
@ckeditor/ckeditor5-dev-utils \
postcss-loader@3 \
raw-loader@0.5.1
1.2 配置vue.config.js文件
const path = require( 'path' );
const CKEditorWebpackPlugin = require( '@ckeditor/ckeditor5-dev-webpack-plugin' );
const { styles } = require( '@ckeditor/ckeditor5-dev-utils' );
module.exports = {
// The source of CKEditor is encapsulated in ES6 modules. By default, the code
// from the node_modules directory is not transpiled, so you must explicitly tell
// the CLI tools to transpile JavaScript files in all ckeditor5-* modules.
transpileDependencies: [
/ckeditor5-[^/\\]+[/\\]src[/\\].+\.js$/,
],
configureWebpack: {
plugins: [
// CKEditor needs its own plugin to be built using webpack.
new CKEditorWebpackPlugin( {
// See https://ckeditor.com/docs/ckeditor5/latest/features/ui-language.html
language: 'zh-cn' // 中文语言包
} )
]
},
// Vue CLI would normally use its own loader to load .svg and .css files, however:
// 1. The icons used by CKEditor must be loaded using raw-loader,
// 2. The CSS used by CKEditor must be transpiled using PostCSS to load properly.
chainWebpack: config => {
// (1.) To handle editor icons, get the default rule for *.svg files first:
const svgRule = config.module.rule( 'svg' );
// Then you can either:
//
// * clear all loaders for existing 'svg' rule:
//
// svgRule.uses.clear();
//
// * or exclude ckeditor directory from node_modules:
svgRule.exclude.add( path.join( __dirname, 'node_modules', '@ckeditor' ) );
// Add an entry for *.svg files belonging to CKEditor. You can either:
//
// * modify the existing 'svg' rule:
//
// svgRule.use( 'raw-loader' ).loader( 'raw-loader' );
//
// * or add a new one:
config.module
.rule( 'cke-svg' )
.test( /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/ )
.use( 'raw-loader' )
.loader( 'raw-loader' );
// (2.) Transpile the .css files imported by the editor using PostCSS.
// Make sure only the CSS belonging to ckeditor5-* packages is processed this way.
config.module
.rule( 'cke-css' )
.test( /ckeditor5-[^/\\]+[/\\].+\.css$/ )
.use( 'postcss-loader' )
.loader( 'postcss-loader' )
.tap( () => {
return styles.getPostCssConfig( {
themeImporter: {
themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' ),
},
minify: true
} );
} );
}
2.1 安装依赖项
npm install --save \
@ckeditor/ckeditor5-editor-classic \
@ckeditor/ckeditor5-essentials \
@ckeditor/ckeditor5-basic-styles \
@ckeditor/ckeditor5-link \
@ckeditor/ckeditor5-paragraph \
@ckeditor/ckeditor5-theme-lark
2.2 在相关组件中引入CKEditor组件
<template>
<div id="myEditor">
<ckeditor id="article-editor" v-model="editorData" :editor="editor":config="editorConfig"/>
</div>
</template>
2.4 按需导入并个性化配置编辑器
<script>
import Vue from "vue";
import CKEditor from "@ckeditor/ckeditor5-vue";
Vue.use(CKEditor);
import ClassicEditor from "@ckeditor/ckeditor5-editor-classic/src/classiceditor";
import FileRpository from "@ckeditor/ckeditor5-upload/src/filerepository";
// 必须配置Essentials，否则编辑器无法输入
import Essentials from "@ckeditor/ckeditor5-essentials/src/essentials";
import UploadAdapter from "@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter";
import Alignment from "@ckeditor/ckeditor5-alignment/src/alignment";
import Autoformat from "@ckeditor/ckeditor5-autoformat/src/autoformat"
import Bold from "@ckeditor/ckeditor5-basic-styles/src/bold"
import Base64UploadAdapter from "@ckeditor/ckeditor5-upload/src/adapters/base64uploadadapter";
import Italic from "@ckeditor/ckeditor5-basic-styles/src/italic";
import Underline from "@ckeditor/ckeditor5-basic-styles/src/underline";
import Strikethrough from "@ckeditor/ckeditor5-basic-styles/src/strikethrough";
import CKFinder from "@ckeditor/ckeditor5-ckfinder/src/ckfinder";
import Code from "@ckeditor/ckeditor5-basic-styles/src/code";
import CodeBlock from "@ckeditor/ckeditor5-code-block/src/codeblock";
import Font from "@ckeditor/ckeditor5-font/src/font";
import Subscript from "@ckeditor/ckeditor5-basic-styles/src/subscript";
import Superscript from "@ckeditor/ckeditor5-basic-styles/src/superscript";
import Highlight from "@ckeditor/ckeditor5-highlight/src/highlight";
import Heading from "@ckeditor/ckeditor5-heading/src/heading";
import HorizontalLine from "@ckeditor/ckeditor5-horizontal-line/src/horizontalline";
import Image from "@ckeditor/ckeditor5-image/src/image";
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 ImageResize from "@ckeditor/ckeditor5-image/src/imageresize";
import EasyImage from "@ckeditor/ckeditor5-easy-image/src/easyimage";
import Indent from "@ckeditor/ckeditor5-indent/src/indent";
import Link from "@ckeditor/ckeditor5-link/src/link";
import IndentBlock from "@ckeditor/ckeditor5-indent/src/indentblock";
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 PageBreak from "@ckeditor/ckeditor5-page-break/src/pagebreak";
import PasteFromOffice from "@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice";
import { MyUploadAdapter } from "@/nzk/utils/MyUploadAdapterPlugin";
import Title from "@ckeditor/ckeditor5-heading/src/title";
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 TodoList from "@ckeditor/ckeditor5-list/src/todolist";
import BlockToolbar from "@ckeditor/ckeditor5-ui/src/toolbar/block/blocktoolbar";
import HeadingButtonsUI from "@ckeditor/ckeditor5-heading/src/headingbuttonsui";
import ParagraphButtonUI from "@ckeditor/ckeditor5-paragraph/src/paragraphbuttonui";
export default {
name: "MyEditor",
data() {
return {
editor: ClassicEditor,
editorData: "在这里输入或粘贴内容",
editorConfig: {
plugins: [
Alignment,
Highlight,
Essentials,
UploadAdapter,
Autoformat,
Bold,
Base64UploadAdapter,
Italic,
Underline,
Strikethrough,
Code,
CodeBlock,
Font,
Subscript,
Superscript,
CKFinder,
Heading,
HorizontalLine,
EasyImage,
Image,
ImageCaption,
ImageStyle,
ImageToolbar,
ImageUpload,
ImageResize,
Indent,
IndentBlock,
Link,
List,
MediaEmbed,
Paragraph,
PasteFromOffice,
FileRpository,
Table,
TableToolbar,
TextTransformation,
TodoList,
BlockToolbar,
ParagraphButtonUI,
HeadingButtonsUI,
PageBreak
],
toolbar: {
items: [
"alignment",
"Highlight",
"fontSize",
"fontFamily",
"fontColor",
"fontBackgroundColor",
"pageBreak",
"heading",
"|",
"bold",
"italic",
"underline",
"strikethrough",
"code",
"codeBlock",
"subscript",
"superscript",
"link",
"todoList",
"bulletedList",
"numberedList",
"horizontalLine",
"indent",
"outdent",
"|",
"ckfinder",
"imageUpload",
"insertTable",
"mediaEmbed",
"undo",
"redo"
]
},
image: {
toolbar: [
"imageStyle:full",
"imageStyle:side",
"|",
"imageTextAlternative"
]
},
table: {
contentToolbar: ["tableColumn", "tableRow", "mergeTableCells"]
},
blockToolbar: [
"paragraph",
"heading1",
"heading2",
"heading3",
"|",
"bulletedList",
"numberedList",
"|",
"imageUpload"
],
cloudServices: {},
ckfinder: {
uploadUrl: "",
options: {
resourceType: "Images"
}
},
mediaEmbed: {},
}
};
},
}
</script>
