vue中使用富文本编辑器(vue2、vue3皆可)

在vue中使用富文本编辑器，暂不包含图片上传

1.下载 富文本对应组件

        下载地址

2.把Tinymce文件复制到components目录下

3.安装富文本组件所需sass模块

npm i sass@1.26.2 -D
npm i sass-loader@8.0.2 -D

4.在需要的组件中使用（vue3语法糖）：

<template>
    <div>
         <tinymce ref="tiny" v-model="state.content" @input="tinyInput"  :height="300" />
    <button @click="fn">提交测试</button>
    </div>
</template>
<script setup>
import { reactive, ref } from 'vue'
import Tinymce from '@/components/Tinymce'
const tiny = ref(null)
let state = reactive({
    content: '6666'
})
const tinyInput = (val)  => {
    state.content = val
}

const fn = () => {
    console.log(state.content);
    tiny.value.setContent('测试')
}
</script>

5.运行结果

注意：如果提示：https://cdn.jsdelivr.net/npm/tinymce-all-in-one@4.9.3/tinymce.min.js   无法加载，则把Tinymce文件夹中的index.vue中的

const tinymceCDN = 'https://cdn.jsdelivr.net/npm/tinymce-all-in-one@4.9.3/tinymce.min.js'
替换成
const tinymceCDN = 'https://unpkg.com/tinymce-all-in-one@4.9.3/tinymce.min.js'