vue中wangEditor5编辑器的基本使用

Vue中wangEditor5编辑器的基本使用攻略

安装wangEditor5

1. 通过npm进行安装

npm install wangeditor --save

1. 引入wangEditor

在Vue项目的入口文件main.js中引入wangEditor，并且将它挂载到Vue实例上去。

```
import Vue from 'vue'
import WangEditor from 'wangeditor'

Vue.prototype.$wangEditor = WangEditor
```

使用wangEditor5

1. 创建一个wangEditor实例

在需要使用wangEditor的组件中，可以通过以下代码创建一个wangEditor实例。

mounted() {
const editor = new this.$wangEditor(this.$refs.editor);
editor.create();
}

在这里，我们调用了new this.$wangEditor()方法创建一个编辑器实例，然后通过create()方法将编辑器渲染到页面上。

1. 获取或设置编辑器内容

2. 获取编辑器内容：editor.txt.html()

3. 设置编辑器内容：editor.txt.html('<p>这是一个段落</p>')

示例：

```
// 获取内容
const content = editor.txt.html();

// 设置内容
editor.txt.html('

这是新的内容

');
```

1. wangEditor插入自定义组件

wangEditor在第五个版本中新增了插入自定义组件的功能，我们可以将自定义组件渲染出来，并插入到编辑器中。

首先我们需要定义自定义组件，然后注册到WangEditor对象中。

``
const registerCustomComponent = () => {
const CustomComponent = this.$wangEditor.createCustom({
tag: 'div',
html:`,
width: '100%',
height: '200px'
});
this.$wangEditor.register(CustomComponent);
}

registerCustomComponent();
```

在这个示例中，我们创建了一个自定义组件CustomComponent，它是一个div标签，内部包含了一个图片，然后设置了组件的宽高等属性，并且最后通过this.$wangEditor.register()将组件注册到了WangEditor对象中。

接着我们就可以在wangEditor的编辑器中插入自定义组件了。

```
editor.customConfig.menus = [
'bold',
'custom-component'
];

editor.customConfig.customConfig = {
customComponent: {
type: 'node',
html: '

wow

'
}
};
```

在这个示例中我们设置了编辑器中的菜单只有bold和custom-component两个选项，然后在customConfig中配置了custom-component的具体属性，包括组件的类型和html内容。

最后我们可以调用editor.create()方法将编辑器渲染到页面上。

总结

WangEditor5是一款功能强大的富文本编辑器，它支持很多常用的富文本编辑功能，也支持在编辑器中插入自定义组件。通过上述的攻略，我们可以很方便地在Vue项目中使用WangEditor5，并实现项目中相关的需求。