Vue集成CKEditor5源代码
概述
对于简单的富文本编辑器,使用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.module.rule( 'svg' );
svgRule.exclude.add( path.join( __dirname, 'node_modules', '@ckeditor' ) );
config.module
.rule( 'cke-svg' )
.test( /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/ )
.use( 'raw-loader' )
.loader( 'raw-loader' );
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
} );
} );
}
};
安装及使用各种功能插件
ckeditor各种功能可以在官网https://ckeditor.com/docs/ckeditor5/latest/features/中查看。
组件中使用ckeditor
单独组件使用ckeditor如下。当然也可以用use()
全局安装CKEditor组件。
<template>
<div id="app">
<ckeditor :editor="editor" ... ></ckeditor>
</div>
</template>
<script>
import CKEditor from '@ckeditor/ckeditor5-vue';
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
export default {
name: 'app',
components: {
// Use the <ckeditor> component in this view.
ckeditor: CKEditor.component
},
data() {
return {
editor: ClassicEditor,
};
}
}
</script>
安装软件包
找到你想要的功能软件包,npm安装,如下实例
npm install --save \
@ckeditor/ckeditor5-editor-classic \
@ckeditor/ckeditor5-essentials \
@ckeditor/ckeditor5-basic-styles \
@ckeditor/ckeditor5-link \
@ckeditor/ckeditor5-paragraph \
@ckeditor/ckeditor5-theme-lark
在ckeditor组件中使用功能插件
之前已经将功能软件包npm安装了,接下来就是import,加入然后参照官方https://ckeditor.com/docs/ckeditor5/latest/features/的用例使用即可。
下面是使用了前面安装了的插件实例
现在需要做的就是在data属性中指定编辑器选项(包括plugins)的列表editorConfig
:
<template>
<div id="app">
<ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
</div>
</template>
<script>
// We don't use @ckeditor/ckeditor5-build-classic any more!不是使用ckeditor5-build-classic哦!是用的源码。
// Since we're building CKEditor from source, we use the source version of ClassicEditor.
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import EssentialsPlugin from '@ckeditor/ckeditor5-essentials/src/essentials';
import BoldPlugin from '@ckeditor/ckeditor5-basic-styles/src/bold';
import ItalicPlugin from '@ckeditor/ckeditor5-basic-styles/src/italic';
import LinkPlugin from '@ckeditor/ckeditor5-link/src/link';
import ParagraphPlugin from '@ckeditor/ckeditor5-paragraph/src/paragraph';
export default {
name: 'app',
data() {
return {
editor: ClassicEditor,
editorData: '<p>Content of the editor.</p>',
editorConfig: {
plugins: [
EssentialsPlugin,
BoldPlugin,
ItalicPlugin,
LinkPlugin,
ParagraphPlugin
],
toolbar: {
items: [
'bold',
'italic',
'link',
'undo',
'redo'
]
}
}
};
}
};
</script>
如有纰漏,欢迎斧正