概述
对于简单的富文本编辑器,使用ckeditor的即用型编辑器构建(名字中带有build的,如ckeditor5-build-classic)是个很好的选择,简单易用。但只能包含一些基础的功能。很多实用的功能如自动保存,自定义图片上传是无法使用的。
使用源代码集成CKEditor使您可以使用CKEditor全部功能。
本文使用Vue CLI 4.0
从源使用CKEditor
安装必要的依赖项及配置vue.config.js
要使用您的应用程序构建CKEditor,必须对默认项目配置进行某些更改。
首先,安装必要的依赖项:
npm install --save \
@ckeditor/ckeditor5-vue \
@ckeditor/ckeditor5-dev-webpack-plugin \
@ckeditor/ckeditor5-dev-utils \
postcss-loader@3 \
raw-loader@0.5.1
编辑vue.config.js
文件并使用以下配置。如果文件不存在,请在应用程序的根目录(即旁边package.json
)中创建它:
//官网中有注释写得很清楚,如果想要深入了解可进官网
const path = require( 'path' );
const CKEditorWebpackPlugin = require( '@ckeditor/ckeditor5-dev-webpack-plugin' );
const {
styles } = require( '@ckeditor/ckeditor5-dev-utils' );
module.exports = {
transpileDependencies: [
/ckeditor5-[^/\\]+[/\\]src[/\\].+\.js$/,
],
configureWebpack: {
plugins: [
new CKEditorWebpackPlugin( {
language: 'en',
translationsOutputFile: /app/
} )
]
},
chainWebpack: config => {
const svgRule = config