vue3項目中使用tinymce的方法
tinymce是一個功能齊全的富文本編輯器插件,但在vue中引入tinymce並不像別的Vue富文本插件一樣那麼順利,tinymce本身並不適配Vue,還需要引入@tinymce/tinymce-vue,並且它是國外的富文本插件,沒有通過中文版本,需要在其官網下載翻譯包(可能需要翻墻)。下面給大傢介紹下vue3項目中使用tinymce的方法。
1、安裝相關依賴
npm install tinymce -S npm install @tinymce/tinymce-vue -S
2、下載中文包
地址 https://www.tiny.cloud/get-tiny/language-packages/
3. 引入皮膚和漢化包
在項目public文件夾下新建tinymce文件夾,
將下載的漢化包解壓到此文件夾
然後在node_modules/tinymce中找到skins文件夾,也復制到public/tinymce裡
4. 封裝組件:在src/components下新建TEditor.vue,並寫入以下代碼
<template> <editor v-model="myValue" :init="init" :disabled="disabled" :id="tinymceId"></editor> </template> <script setup lang="ts"> //JS部分 //在js中引入所需的主題和組件 import tinymce from 'tinymce/tinymce' import 'tinymce/skins/content/default/content.css' import Editor from '@tinymce/tinymce-vue' import 'tinymce/themes/silver' import 'tinymce/themes/silver/theme' import 'tinymce/icons/default'; //引入編輯器圖標icon,不引入則不顯示對應圖標 import 'tinymce/models/dom' // 這裡是個坑 一定要引入 //在TinyMce.vue中接著引入相關插件 import "tinymce/icons/default/icons" // import "tinymce/plugins/image" // 插入上傳圖片插件 // import "tinymce/plugins/media" // 插入視頻插件 import "tinymce/plugins/table" // 插入表格插件 import "tinymce/plugins/lists" // 列表插件 import "tinymce/plugins/wordcount" // 字數統計插件 import "tinymce/plugins/code" // 源碼 // import "tinymce/plugins/fullscreen" //全屏 //接下來定義編輯器所需要的插件數據 import { reactive, ref } from "vue" import { onMounted, defineEmits, watch } from "@vue/runtime-core" import axios from 'axios' // import { updateImg } from '@/api/order/order' const emits = defineEmits(["getContent"]) //這裡我選擇將數據定義在props裡面,方便在不同的頁面也可以配置出不同的編輯器,當然也可以直接在組件中直接定義 const props = defineProps({ value: { type: String, default: () => { return "" }, }, baseUrl: { type: String, default: "", }, disabled: { type: Boolean, default: false, }, plugins: { type: [String, Array], default: "lists table", },//必填 toolbar: { type: [String, Array], default: "codesample bold italic underline alignleft aligncenter alignright alignjustify | undo redo | formatselect | fontselect | fontsizeselect | forecolor backcolor | bullist numlist outdent indent | lists link table code | removeformat ", },//必填 }) //用於接收外部傳遞進來的富文本 const myValue = ref(props.value) const tinymceId = ref("vue-tinymce-" + +new Date() + ((Math.random() * 1000).toFixed(0) + "")) //定義一個對象 init初始化 const init = reactive({ selector: '#' + tinymceId.value, //富文本編輯器的id, language_url: "/tinymce/langs/zh_CN.js", // 語言包的路徑,具體路徑看自己的項目,文檔後面附上中文js文件 language: "zh_CN", //語言 skin_url: "/tinymce/skins/ui/oxide", // skin路徑,具體路徑看自己的項目 height: 400, //編輯器高度 branding: false, //是否禁用“Powered by TinyMCE” menubar: true, //頂部菜單欄顯示 image_dimensions: false, //去除寬高屬性 plugins: props.plugins, //這裡的數據是在props裡面就定義好瞭的 toolbar: props.toolbar, //這裡的數據是在props裡面就定義好瞭的 font_formats: 'Arial=arial,helvetica,sans-serif; 宋體=SimSun; 微軟雅黑=Microsoft Yahei; Impact=impact,chicago;', //字體 fontsize_formats: '11px 12px 14px 16px 18px 24px 36px 48px 64px 72px', //文字大小 // paste_convert_word_fake_lists: false, // 插入word文檔需要該屬性 paste_webkit_styles: "all", paste_merge_formats: true, nonbreaking_force_tab: false, paste_auto_cleanup_on_paste: false, file_picker_types: 'file', content_css: '/tinymce/skins/content/default/content.css', //以css文件方式自定義可編輯區域的css樣式,css文件需自己創建並引入 //圖片上傳 images_upload_handler: (blobInfo, progress) => new Promise((resolve, reject) => { if (blobInfo.blob().size / 1024 / 1024 > 2) { reject({ message: '上傳失敗,圖片大小請控制在 2M 以內', remove: true }) return } else { const ph = import.meta.env.VITE_BASE_PATH + ":" + import.meta.env.VITE_SERVER_PORT + "/" let params = new FormData() params.append('file', blobInfo.blob()) let config = { headers: { "Content-Type": "multipart/form-data", } } axios.post('xxxx', params, config).then(res => { if (res.data.code == 200) { resolve(ph + res.data.msg) //上傳成功,在成功函數裡填入圖片路徑 } else { reject('HTTP Error: 上傳失敗' + res.data.code); return } }).catch(() => { reject('上傳出錯,服務器開小差瞭呢') return }) } }), // 文件上傳 file_picker_callback: (callback, value, meta) => { // Provide file and text for the link dialog if (meta.filetype == 'file') { callback('mypage.html', { text: 'My text' }); } // Provide image and alt text for the image dialog if (meta.filetype == 'image') { callback('myimage.jpg', { alt: 'My alt text' }); } // Provide alternative source and posted for the media dialog if (meta.filetype == 'media') { callback('movie.mp4', { source2: 'alt.ogg', poster: 'image.jpg' }); } } }) //監聽外部傳遞進來的的數據變化 watch( () => props.value, () => { myValue.value = props.value emits("getContent", myValue.value) } ) //監聽富文本中的數據變化 watch( () => myValue.value, () => { emits("getContent", myValue.value) } ) //在onMounted中初始化編輯器 onMounted(() => { tinymce.init({}) }) </script>
5. 註冊及使用組件
// 使用 <TEditor ref="editor" v-model="formState.content" :disabled='disabled' @getContent="getContent"/> <script setup lang="ts"> import { reactive } from "vue"; // 引入 import TEditor from '@/components/TEditor.vue'; const formState = reactive({contents :''}) const getContent = (v: string) => { formState.contents = v } </script>
Tinymce 版本
"@tinymce/tinymce-vue": "^5.0.0"
"tinymce": "^6.0.3"
參考文章
https://blog.csdn.net/weixin_47180815/article/details/121748486
到此這篇關於vue3使用tinymce的文章就介紹到這瞭,更多相關vue3使用tinymce內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!