VUE3集成tinymce插件

官方文档地址:

Vue integration | Docs | TinyMCEThe Official TinyMCE Vue.js componenthttps://www.tiny.cloud/docs/integrations/vue/开始集成:

$ npm install --save "@tinymce/tinymce-vue@^4"
 

HBD@DESKTOP-UEFV3JC MINGW64 /d/study/code/vuehtml/antd-demo-v3
$  npm install --save "@tinymce/tinymce-vue@^4"

added 2 packages, and audited 524 packages in 3s

24 packages are looking for funding
  run `npm fund` for details

11 vulnerabilities (3 moderate, 8 high)

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

引入到main.js

import Editor from '@tinymce/tinymce-vue'//引入组件
app.component("Editor",Editor);//注册到全局组件

import { createApp } from 'vue'
import App from './App.vue'


import router from './router'//引入router路由文件
import toast from './components/toast'; //引入自定义全局公共组件
import mixins from "./mixins"; //引入自定义公共方法和属性


import Antd from 'ant-design-vue';//引入antd
import 'ant-design-vue/dist/antd.css';//引入antd 样式
// import Icon from '@ant-design/icons-vue';//引入antd 样式


import 'viewerjs/dist/viewer.css'//viewer图片查看器样式
import VueViewer from 'v-viewer'//viewer图片查看器js

import '@surely-vue/table/dist/index.css' //导入surely-vue 大数据表格框架样式
import STable from '@surely-vue/table';//导入surely-vue 大数据表格框架js
import { setLicenseKey } from '@surely-vue/table';//购买后去除水印
setLicenseKey('fdafefdaffklfjajuiefhrdbfdnsafjkasyegwfpqfldfd45f48ew468fr5ds');




import Editor from '@tinymce/tinymce-vue'//$ npm install --save "@tinymce/tinymce-vue@^4"


const app = createApp(App);
/**
productionTip设置为 false ，可以阻止 vue 在启动时生成生产提示 ;
开发环境下，Vue 会提供很多警告来帮你对付常见的错误与陷阱。
而在生产环境下，这些警告语句却没有用，反而会增加应用的体积
此外，有些警告检查还有一些小的运行时开销，这在生产环境模式下是可以避免的
*/
app.config.productionTip = true;
app.use(Antd);//antd ui组件
// app.use(Icon);//引用antd图标库
app.use(router);//路由文件
app.use(mixins);//公共方法和属性
app.use(toast);//全局组件文件
app.use(STable);//使用STable大数据表格框架
app.use(VueViewer);//使用vviewer图片插件
app.mount('#app');
app.component("Editor",Editor);

 界面导入组件

<template>
  <div >
    <br>
    <Editor
      api-key="no-api-key"
      :init="{
         height: 500,
         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 | formatselect | bold italic backcolor | \
           alignleft aligncenter alignright alignjustify | \
           bullist numlist outdent indent | removeformat | help'
       }"
    />
  </div>
</template>


<script lang="ts">
    import {computed, defineComponent, reactive, toRefs, onMounted, watch, getCurrentInstance} from 'vue';

    export default {
        components: {},
        setup(props, context) {

            const state = reactive({
                wordPage: '测试文档',

            })
            return {
                ...toRefs(state),
            };
        }

    }
</script>

最终界面

注意:vue和tinymce版本是否对应