vue2使用富文本tinymce
时间: 2023-10-28 14:04:56 浏览: 57
Vue.js 2.x 与 tinymce 富文本编辑器的集成相对简单。以下是一些步骤可以帮助你在 Vue.js 2.x 中使用 tinymce:
1. 安装 tinymce:你可以通过 npm 或 yarn 安装 tinymce,运行以下命令:
```bash
npm install tinymce
# 或
yarn add tinymce
```
2. 在组件中引入 tinymce 并初始化:
```vue
<template>
<div>
<textarea v-model="content" :id="editorId"></textarea>
</div>
</template>
<script>
import tinymce from 'tinymce/tinymce';
export default {
data() {
return {
content: '',
editorId: 'my-editor', // 指定一个唯一的 id
};
},
mounted() {
tinymce.init({
selector: `#${this.editorId}`,
plugins: 'advlist autolink lists link image charmap print preview hr anchor',
toolbar: 'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | image',
height: 500,
setup: (editor) => {
editor.on('change', () => {
this.content = editor.getContent();
});
},
});
},
beforeDestroy() {
tinymce.get(this.editorId).destroy();
},
};
</script>
```
在上述示例中,我们在 mounted 钩子中初始化了 tinymce 编辑器,并且使用 v-model 指令将编辑器的内容绑定到 Vue 实例上的 content 属性。在 beforeDestroy 钩子中,我们销毁了 tinymce 编辑器。
你可以根据需要调整 tinymce 的配置项以满足你的需求。可以在 tinymce 的官方文档中了解更多配置选项和插件的使用方法:[https://www.tiny.cloud/docs/](https://www.tiny.cloud/docs/)
希望这能帮到你!如果有任何问题,请随时提问。