Vue3中使用富文本编辑器的方法详解

npm create vue@3
//然后按照提示一步步走就行了，环境问题不在此考虑，创建完成之后CD进目录

npm install @tinymce/tinymce-vue -S

<template>
  <Editor :disabled="disabled" :init="init" :api-key="apiKey" style="width: 100%" />
</template>
<script setup>
import tinymce from "tinymce/tinymce"; //tinymce核心文件
import Editor from "@tinymce/tinymce-vue";

import "tinymce/models/dom"; // 引入dom模块。从 Tinymce6，开始必须有此模块导入
import "tinymce/themes/silver"; //默认主题
import "tinymce/icons/default"; //引入编辑器图标icon

import 'tinymce/plugins/code'//引入需要的插件

const apiKey = "qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc";

const init = {
  height: 300,
  language_url: "./tinymce/langs/zh-Hans.js",
  language: "zh-Hans",
  skin_url: "./tinymce/skins/ui/oxide",
  content_css: "./tinymce/skins/content/default/content.css",
  branding: false,
  menubar: false,
  statusbar: true,
  plugins: "code",//插件列表，需要先引入插件对应的包
  toolbar:
    "undo redo |fontsize bold italic underline strikethrough forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent blockquote | lists image media table | codesample code removeformat save preview",
};//显示在工具栏中的菜单
</script>

<template>
  <div style="width: 80vw">
    <TinymceEditor v-model="data"></TinymceEditor>
  </div>
  <div>
    <button @click="getInput" >获取</button>
  </div>
</template>
<script setup>
import TinymceEditor from "./components/TinymceEditor.vue";
import { ref, onMounted, watch } from "vue";
const data = ref("");
const getInput = () => {
  alert(data.value);
};
</script>

<style scoped></style>