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>

如有纰漏，欢迎斧正

参考文献

https://ckeditor.com/docs/ckeditor5/latest/index.html