Vue中如何引入CKeditor 文本编辑器

本文介绍如何在项目中集成CKEditor富文本编辑器,包括下载安装、配置Webpack及在页面中使用的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、下载编辑器包:https://www.npmjs.com/package/ckeditor

2、放到静态资源目录中


 在index.html中引入文件ckeditor.js

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


3、配置webpack文件配置  build/webpack.base.conf.js

module.exports = {

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

}

4、使用

<textarea id="editor" rows="10" cols="80"></textarea>

js中需要引入,生命周期中mounted需要引入如下代码

import CKEDITOR from 'CKEDITOR';

mounted() {
  CKEDITOR.replace('editor', {height: '400px', width: '100%', toolbar: 'toolbar_Full'});
  this.editor = CKEDITOR.instances.editor;
}






  
  
  


### 如何在 Vue 2 中引入和配置富文本编辑器 #### 安装依赖包 为了能够在 Vue 2 项目中使用 WangEditor 富文本编辑器,需先通过 npm 来安装所需的软件包。这可以通过执行如下命令来完成: ```bash npm install wangeditor/editor npm install wangeditor/editor-for-vue ``` 此过程会下载并安装 WangEditor 编辑器以及专门为 Vue.js 设计的组件[^1]。 #### 引入文本编辑器模板 接着,在项目的适当位置(通常是页面或组件内的 `<script>` 部分),需要导入刚刚安装好的编辑器模块,并将其注册为局部或全局组件以便后续使用。例如可以这样操作: ```javascript import { Editor } from 'wangeditor/editor-for-vue' export default { components: { Editor, }, } ``` 上述代码片段展示了如何将 `Editor` 组件添加到当前 Vue 实例中的 `components` 属性里,从而允许在其对应的 HTML 模板内调用该组件。 #### 创建富文本编辑器实例 最后一步是在 `.vue` 文件里的 `<template>` 标签下定义好用于显示编辑区域的结构化标签,并设置必要的属性如绑定的数据模型 (`v-model`) 和事件监听函数(`@change`)等。具体做法可参照以下例子: ```html <template> <div> <editor class="CKEditor" ref="Editor" v-model="content" @on-change="callbackChangeEditor"> </editor> </div> </template> <script> // ...省略前面已经提到过的部分... data() { return { content: '', }; }, methods: { callbackChangeEditor(value) { this.content = value; }, } </script> <style lang="less" scoped></style> ``` 这里创建了一个名为 `Editor` 的自定义元素,它绑定了一个叫做 `content` 的变量作为数据源,并且每当编辑区内容发生变化时都会触发一次回调方法 `callbackChangeEditor()` 更新这个变量的内容[^2]。 对于希望尝试其他类型的富文本编辑器比如 TinyMCE,则可以根据官方文档指引进行相应的调整和适配工作[^3]。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值