CKEdite4富文本编辑器安装和使用

最新推荐文章于 2025-03-26 12:53:30 发布

爱打瞌睡808

最新推荐文章于 2025-03-26 12:53:30 发布

阅读量2.1k

点赞数 1

文章标签： javascript vue.js html

本文链接：https://blog.csdn.net/han_0111/article/details/120351114

版权

CKEdite4富文本编辑器安装和使用

CKEditor4富文本编辑器安装和使用

使用CKEditor4富文本编辑器和其他的第三方组件库不一样，不可以使用npm install 进行下载。
而是必须进入官网进行下载压缩包。（CKEditor官方网址—可以点击直接过去）
在这里插入图片描述
进去后会发现分为：基本套餐、标准套餐、全包、定制四种使用方式，每个都对应着不同的样式和功能。
1、这时就可以选择你需要的进行下载，解压时切记一定要选择 解压到当前文件夹。
2、解压后需要将文件夹复制到项目根目录下 public/static 下。
3、完成后需要在index.html进行引入。
在这里插入图片描述

<script type="text/javascript" src="/static/ckeditor/ckeditor.js"></script>

在这里插入图片描述
4、这时就需要配置一下webpack文件，注意的是旧版本会有 webpack.base.conf.js 这个文件夹，新版本这个文件被去除了，改为了 vue.config.js。
webpack.base.conf.js中可以直接在导出项中写入下面这行代码。

           externals: {
               "CKEDITOR": "window.CKEDITOR"
            },

vue.config.js则需要找到 configureWebpack 这个函数，将上面的代码复制进去。
在这里插入图片描述
5、接下来就需要在你需要使用到富文本编辑器的页面进行引入。

import CKEDITOR from "CKEDITOR"

6、使用时在 template 中写入下面的代码。

<template>
  <div id="video">
     <textarea id="editor" rows="10" cols="80"></textarea>
     <button @click="send">确定</button>
  </div>
</template>

7、在 mounted 这个生命周期中写入下面这行代码。

    mounted() {
       CKEDITOR.replace("editor", {height: "300px", width: "100%", toolbar: "Full"});
    },

这时你在打开你的页面就可以看见他出来啦！
在这里插入图片描述
功能还是很强大的，同时告诉大家可以通过 CKEDITOR.instances.editor.getData() 这个函数获取到编辑器的值。