官方文档地址:
$ 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版本是否对应