Vue集成CKEditor5源代码

最新推荐文章于 2024-08-13 08:13:25 发布

lymmurrain

最新推荐文章于 2024-08-13 08:13:25 发布

阅读量917

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/lymmurrain/article/details/112726739

版权

本文详细介绍了如何在Vue项目中从源代码集成CKEditor5，包括安装依赖、配置vue.config.js、安装及使用功能插件，提供了一个在组件中使用CKEditor5的实例，帮助开发者充分利用CKEditor5的全部功能。

摘要由CSDN通过智能技术生成

概述

对于简单的富文本编辑器，使用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