vue2中如何使用 tinymce 富文本编辑器
时间: 2023-06-27 14:06:55 浏览: 133
在 Vue2 中使用 tinymce 富文本编辑器的步骤如下:
1. 安装 tinymce:
```shell
npm install tinymce --save
```
2. 在 Vue 组件中引入 tinymce:
```html
<template>
<div>
<textarea ref="editor"></textarea>
</div>
</template>
<script>
import tinymce from 'tinymce';
export default {
mounted() {
tinymce.init({
selector: this.$refs.editor,
plugins: 'autoresize',
toolbar: 'undo redo | bold italic underline',
});
},
};
</script>
```
3. 在组件销毁时销毁 tinymce:
```html
<script>
import tinymce from 'tinymce';
export default {
mounted() {
this.editor = tinymce.init({
selector: this.$refs.editor,
plugins: 'autoresize',
toolbar: 'undo redo | bold italic underline',
});
},
beforeDestroy() {
tinymce.remove(this.editor);
},
};
</script>
```
这样,就可以在 Vue2 中使用 tinymce 富文本编辑器了。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)