vue3中使用富文字編輯器tinymce
阿新 • • 發佈:2021-07-12
目錄
下載安裝
npm i tinymce @tinymce/tinymce-vue -S
準備工作
在node_modules
中找到資料夾tinymce/skins
,將它複製到專案目錄中(新建一個存放該檔案的目錄static
);
然後去官網下載中文包zh_CN.js
,並儲存到目錄static/langs
中。
元件引用
在vue元件中引用tinymce
<template> <div> <editor v-model="content" :init="init"/> </div> </template> <script> import { ref, watch, onMouted } from 'vue' import tinymce from 'tinymce/tinymce' import Editor from '@tinymce/tinymce-vue' import 'tinymce/themes/silver/theme'; // 引用主題檔案 import 'tinymce/icons/default'; // 引用圖示檔案 import "tinymce/plugins/image"; import "tinymce/plugins/link"; import "tinymce/plugins/code"; import "tinymce/plugins/table"; import "tinymce/plugins/lists"; export default { components: { 'editor': Editor }, setup() { const content = ref(''); const init = { language_url: require("./static/langs/zh_CN.js"), // 中文語言包路徑 language: "zh_CN", skin_url: require("./static/skins/ui/oxide/skin.css"), // 編輯器面板樣式 menubar: false, // 隱藏選單欄 height: 320, toolbar_mode: "none", plugins: 'image link code table lists', // 外掛需要import進來 toolbar: 'fontselect fontsizeselect | link lineheight forecolor backcolor bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | image quicklink h2 h3 blockquote table numlist bullist preview fullscreen', content_style: "p {margin: 5px 0; font-size: 14px}", fontsize_formats: "12px 14px 16px 18px 24px 36px 48px 56px 72px", font_formats: "微軟雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;蘋果蘋方=PingFang SC,Microsoft YaHei,sans-serif;宋體=simsun,serif;仿宋體=FangSong,serif;黑體=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;", branding: false, elementpath: false, resize: false, // 禁止改變大小 statusbar: false, // 隱藏底部狀態列 }; // 監聽編輯器內容變化,自定義處理內容 watch(() => content.value, (value) => { // TODO }) onMounted(() => { tinymce.init(); // 初始化 }) return { content, init, } } } </script>