Vue 3中有很多
富文本编辑器的选择，其中一个常用的是
TinyMCE。要在Vue 3中使用
TinyMCE富文本编辑器，可以按照以下步骤进行：
1. 首先，使用npm或者yarn安装
TinyMCE编辑器依赖包：
```
npm install
tinymce
```
2. 在Vue组件中引入需要的
TinyMCE编辑器资源文件。有多种方式可以引入，这里以CDN引入为例：
```html
<script src="https://cdn.jsdelivr.net/npm/
tinymce@5"></script>
```
3. 创建一个Vue组件，并在其中添加一个textarea元素作为编辑器容器：
```html
<template>
<div>
<textarea id="my-editor"></textarea>
</div>
</template>
```
4. 在Vue组件的`mounted`钩子函数中初始化
TinyMCE编辑器，并指定其选项和回调函数：
```javascript
<script>
import { onMounted } from 'vue';
export default {
mounted() {
onMounted(() => {
tinymce.init({
selector: '#my-editor',
height: 500,
plugins: 'advlist autolink lists link image charmap print preview anchor',
toolbar: 'undo redo | formatselect | bold italic backcolor | \
alignleft aligncenter alignright alignjustify | \
bullist numlist outdent indent | removeformat | help',
setup: (editor) => {
editor.on('change', () => {
this.$emit('input', editor.getContent());
});
},
});
});
},
};
</script>
```
这里的选项和回调函数可以根据实际需要进行配置，你可以根据
TinyMCE的文档来设置更多的选项。
5. 最后，在使用该组件的父组件中，可以通过`v-model`来双向绑定
富文本编辑器的内容：
```html
<template>
<div>
<RichTextEditor v-model="content" />
<div>
<h3>输出的内容：</h3>
<div v-html="content"></div>
</div>
</div>
</template>
<script>
import RichTextEditor from './RichTextEditor.vue';
export default {
components: {
RichTextEditor,
},
data() {
return {
content: '',
};
},
};
</script>
```
这样，就可以在Vue 3中使用
TinyMCE富文本编辑器了。希望对你有所帮助！
扫一扫
1046
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
