一、富文本编辑器选择
在编辑器选择上就不做过多解释了，本人所在公司在之前是使用的ueditor，由于bug多，且ui与现代脱节，所以放弃了，那么具体的比较可以去花裤衩大佬文章。这里附上链接： 常见富文本对比。本文使用： Tinymce。
二、初体验
话不多说咱直接开干。(本文使用vue3+vite项目做演示)
- 安装依赖
npm install --save "@tinymce/tinymce-vue@^4"
// 推荐使用4版本，相对稳定
- 初始化
<template>
<div id="app">
{{content}}
<editor
api-key="6wahax33qilk99nssxocu5usp2mca5blqxepoglvq7yxnu0i"
v-model="content"
:init="{
height: 500,
language: 'zh_CN',
menubar: false,
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table paste code help wordcount'
],
toolbar: [
'undo redo | bold italic backcolor | alignleft aligncenter alignright alignjustify \
bullist numlist outdent indent | removeformat',
'styleselect \
cut copy paste | fontsizeselect | link unlink openlink image preview'
],
}"
/>
</div>
</template>
<script setup>
import { ref } from 'vue';
import Editor from '@tinymce/tinymce-vue'
const content = ref('')
</script>
三、属性
- api-key是你注册Tinymce后，获取到的一个key免费注册即可获得。
- language: 'zh_CN'为中文语言配置，默认为英文。
- toolbar为菜单栏选项，具体配置可见：toolbar 配置项
- toolbar支持多个写法，具体可见：toolbar写法
- 官方文档：Tinymce
