1.在package.json加上并安装依赖
"devDependencies": {
"@jsdawn/vue3-tinymce": "^1.1.7",
}
2.在页面中引入
import Vue3Tinymce from "@jsdawn/vue3-tinymce";
3.使用
<vue3-tinymce
v-model="item.blockDataObj.text"
:setting="setting"
/>
4.配置
const setting = reactive({
height: 400,
toolbar:
"undo redo | fullscreen | formatselect alignleft aligncenter alignright alignjustify | link unlink | numlist bullist | image media table | fontsizeselect forecolor backcolor | bold italic underline strikethrough | indent outdent | superscript subscript | removeformat |",
toolbar_drawer: "sliding",
quickbars_selection_toolbar:
"removeformat | bold italic underline strikethrough | fontsizeselect forecolor backcolor",
plugins: "link image media table lists fullscreen quickbars",
fontsize_formats: "12px 14px 16px 18px",
default_link_target: "_blank",
link_title: false,
nonbreaking_force_tab: true,
// 以中文简体为例
language: "zh_CN",
language_url:
"https://unpkg.com/@jsdawn/vue3-tinymce@1.1.6/dist/tinymce/langs/zh_CN.js",
});
即可。