在前端开发项目中。不可避免地，有必要在页面上集成一个富文本编辑器。前段时间，该公司的Vue.js项目需要使用UEditor的富文本编辑器。在百度上搜索了一圈，没有找到详细的解释，于是决定自己试试，忙了一天终于定下来了。

1.总的想法

1.1模块化

vue的一大优势是模块化。我们可以通过模块化重用页面和逻辑。因此，可以将Ueditor重新打包为的模板文件。vue。其他组件通过引入这个模板来实现代码重用。

1.2数据传输

首先，父组件需要设置编辑器的长度、宽度和初始文本，这些数据可以通过道具传递。编辑器中的文本更改可以通过vue自定义事件传输到父组件。

2.具体实施步骤

2.1介绍关键的JS和CSS文件

将以下所有文件复制到项目中

2.2配置Ueditor.config.js

首先，配置URL参数。我们需要将这个路径指向刚刚复制的文件的目录。请注意，这里最好使用相对路径。

var URL=窗口。UEDITOR _ HOME _ URL | | '/static/UEDITOR/'；然后是默认宽度和高度的设置

，initial frame width : null//null表示宽度是自动的，initialFrameHeight:320其他功能的配置可以在官方文档中查看。

2.3创建编辑器模板

我们需要在编辑器模板中导入UEditor的核心JS库，并添加contentChange回调函数。

之所以用导入语法来介绍核心JS库，是因为它更符合ES6模块化的规范。看到网上有人建议在main.js中引入js，但是过早引入JS可能会导致第一次页面加载变慢。

template div ref=' editor '/div/template script/* eslint-disable */import './././assets/js/ueditor/ueditor . config '；“进口”./././assets/js/ueditor/ueditor . all '；“进口”./././assets/js/ueditor/lang/zh-cn/zh-cn '；从“”导入{ generateRandonInteger }./././vuex/utils '；导出默认{ data() {返回{ id : generateRandonInteger(100000)' ueditorId '，}；}，prop : { value : { type : String，default: null，}，config: { type: Object，default : }，}，watch : { value : function value(val，old val){ this . editor=UE . geteditor(this . id，this . config)；如果(瓦尔！==null){ this . editor . setcontent(val)；}}，}，mounted () {this。$ next tick(function f1(){//确保这一点。$el已被插入到文档中。$ refs . editor . id=this . id；this . editor=UE . geteditor(this . id，this . config)；this.editor.ready(函数F2(){ this . editor . setcontent(this . value)；this . editor . addlistener(' content change '，function(){ const wordCount=this . editor . getcontent length(true)；const content=this . editor . GetContent()；const plain txt=this . editor . getplain txt()；这个。$emit('input '，{ wordCount: wordCount，content: content，plain txt : plain txt })；}.绑定(这个))；这个。$emit('ready '，this . editor)；}.绑定(这个))；});}, };/script style body { background-color : # ff 0000；}/style3。编辑器的使用

当使用编辑器模板时，我需要通过道具传入配置和初始文本值。

模板xmlns :v-on=' http://www . w3 . org/1999/XHTML ' div class=' edit-area ' ueditor v-bind : value=defaultMsg v-bind : config=config v-: input=' input ' v-: ready=' ready '/ueditor/div/template script import ueditor from '。/ueditor . vue '；导出默认值{components : {u editor，}，data () {return {default msg : '初始文本'，config 3360 { initial frame width 3360 null，initialframeheight 3360 320，}，}；}, };/script如果需要让Ueditor上传图片，还需要在后台配置一个界面。我没时间研究这部分，过几天再补

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。