在項(xiàng)目中應(yīng)用tinymce富文本框的使用榛了，首先安裝tinymce沪伙、tinymce-vue這兩個(gè)插件，
npm install tinymce -S
npm install @tinymce/tinymce-vue -S
安裝完成之后在node_modules中找到tinymce文件夾中找到skins疟羹、jquery.tinymce.js主守、jquery.tinymce.min.js，之后安裝中文語(yǔ)言包https://www.tiny.cloud/get-tiny/language-packages/榄融；把這些文件放進(jìn)public文件夾內(nèi)参淫，在components中新建Tinymce組件；在頁(yè)面中引用跟正常組件一樣引入注冊(cè)使用就可以了愧杯。
<template>
? <div class="tinymce-editor">
? ? <editor
? ? ? v-model="myValue"
? ? ? :init="init"
? ? ? :api-key="apiKey"
? ? ? :disabled="disabled"
? ? />
? </div>
</template>
<script>
// import { fileUpload } from '@/api/cms'
import tinymce from "tinymce/tinymce";
import Editor from "@tinymce/tinymce-vue";
// import 'tinymce/themes/modern/theme'
import "tinymce/themes/silver/theme";
import "tinymce/icons/default/icons";
import "tinymce/plugins/image"; // 插入上傳圖片插件
import "tinymce/plugins/media"; // 插入視頻插件
import "tinymce/plugins/table"; // 插入表格插件
import "tinymce/plugins/link"; // 超鏈接插件
import "tinymce/plugins/code"; // 代碼塊插件
import "tinymce/plugins/lists"; // 列表插件
import "tinymce/plugins/contextmenu"; // 右鍵菜單插件
import "tinymce/plugins/wordcount"; // 字?jǐn)?shù)統(tǒng)計(jì)插件
import "tinymce/plugins/colorpicker"; // 選擇顏色插件
import "tinymce/plugins/textcolor"; // 文本顏色插件
import "tinymce/plugins/fullscreen"; // 全屏
import "tinymce/plugins/help"; // 幫助
import "tinymce/plugins/charmap";
import "tinymce/plugins/paste";
import "tinymce/plugins/print"; // 打印
import "tinymce/plugins/preview"; // 預(yù)覽
import "tinymce/plugins/hr"; // 水平線
import "tinymce/plugins/anchor";
import "tinymce/plugins/pagebreak";
import "tinymce/plugins/spellchecker";
import "tinymce/plugins/searchreplace";
import "tinymce/plugins/visualblocks";
import "tinymce/plugins/visualchars";
import "tinymce/plugins/insertdatetime";
import "tinymce/plugins/nonbreaking";
import "tinymce/plugins/autosave";
import "tinymce/plugins/fullpage";
import "tinymce/plugins/toc";
import "tinymce/plugins/advlist";
import "tinymce/plugins/autolink";
import "tinymce/plugins/codesample";
import "tinymce/plugins/directionality";
import "tinymce/plugins/imagetools";
import "tinymce/plugins/noneditable";
import "tinymce/plugins/save";
import "tinymce/plugins/tabfocus";
import "tinymce/plugins/textpattern";
import "tinymce/plugins/template";
export default {
? components: {
? ? Editor,
? },
? props: {
? ? // 傳入一個(gè)value涎才，使組件支持v-model綁定
? ? value: {
? ? ? type: String,
? ? ? default: "",
? ? },
? ? disabled: {
? ? ? type: Boolean,
? ? ? default: false,
? ? },
? ? plugins: {
? ? ? type: [String, Array],
? ? ? default:
? ? ? ? "lists image media table textcolor wordcount contextmenu preview",
? ? },
? ? toolbar: {
? ? ? type: [String, Array],
? ? ? default:
? ? ? ? "undo redo | ?formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat table| fontsizeselect | fontselect'",
? ? },
? },
? data() {
? ? return {
? ? ? apiKey: "jzlds2e6urz6akm9wxp4f70mnwg83d8fovsialqazxowyity",
? ? ? // 配置文件服務(wù)器的靜態(tài)訪問(wèn)路徑前綴
? ? ? // static_web_preurl: 'http://localhost/files/hxzy_img/',
? ? ? // 初始化配置
? ? ? init: {
? ? ? ? placeholder: "請(qǐng)輸入內(nèi)容",
? ? ? ? // language_url: require("../assets/langs/zh-Hans.js"), // 這個(gè)文件會(huì)放在下面
? ? ? ? language_url: require("../../../public/tinymce/langs/zh_CN"),
? ? ? ? language: "zh_CN",
? ? ? ? skin_url: "/tinymce/skins/ui/oxide",
? ? ? ? height: 300,
? ? ? ? end_container_on_empty_block: true,
? ? ? ? powerpaste_word_import: "clean",
? ? ? ? advlist_bullet_styles: "square",
? ? ? ? advlist_number_styles: "default",
? ? ? ? imagetools_cors_hosts: ["www.tinymce.com", "codepen.io"],
? ? ? ? default_link_target: "_blank",
? ? ? ? link_title: false,
? ? ? ? media_live_embeds: true,
? ? ? ? content_style: "img {max-width:100%;}", // 直接自定義可編輯區(qū)域的css樣式
? ? ? ? nonbreaking_force_tab: true, // inserting nonbreaking space need Nonbreaking Space Plugin
? ? ? ? // plugins: this.plugins,
? ? ? ? // toolbar: this.toolbar,
? ? ? ? // @ts-nocheckplugins: 'link lists image code table colorpicker textcolor wordcount contextmenu',
? ? ? ? plugins:
? ? ? ? ? "advlist anchor autolink autosave code codesample colorpicker ?contextmenu directionality ?fullscreen hr image imagetools insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount",
? ? ? ? // toolbar:'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat | table',
? ? ? ? toolbar: [
? ? ? ? ? "searchreplace bold italic underline strikethrough fontselect fontsizeselect ?alignleft aligncenter alignright outdent indent ?blockquote undo redo removeformat subscript superscript code codesample",
? ? ? ? ? "hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen",
? ? ? ? ],
? ? ? ? fontsize_formats: "8pt 10pt 12pt 14pt 18pt 24pt 36pt", // 第二步
? ? ? ? font_formats:
? ? ? ? ? "微軟雅黑='微軟雅黑';宋體='宋體';黑體='黑體';仿宋='仿宋';楷體='楷體';隸書(shū)='隸書(shū)';幼圓='幼圓';Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings",
? ? ? ? branding: false,
? ? ? ? menubar: true,
? ? ? ? elementpath: false,
? ? ? ? file_picker_types: "media",
? ? ? ? // 此處為圖片上傳處理函數(shù)，這個(gè)直接用了base64的圖片形式上傳圖片力九，
? ? ? ? // 如需ajax上傳可參考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
? ? ? ? /* images_upload_handler: async(blobInfo, success, failure) => {
? ? ? ? ? // ?let formdata = new FormData()
? ? ? ? ? // formdata.set('file', blobInfo.blob())
? ? ? ? ? const { url, name } = await this.uploadFile(blobInfo.blob(), 'image')
? ? ? ? ? success(url, { title: name })
? ? ? ? ? // this.handleImgUpload(blobInfo, success, failure)
? ? ? ? }*/
? ? ? ? // file_picker_callback: (cb, value, meta) => {
? ? ? ? // ? // 當(dāng)點(diǎn)擊meidia圖標(biāo)上傳時(shí),判斷meta.filetype == 'media'有必要耍铜，因?yàn)閒ile_picker_callback是media(媒體)、image(圖片)畏邢、file(文件)的共同入口
? ? ? ? // ? if (meta.filetype == 'media') {
? ? ? ? // ? ? // 創(chuàng)建一個(gè)隱藏的type=file的文件選擇input
? ? ? ? // ? ? const input = document.createElement('input')
? ? ? ? // ? ? input.setAttribute('type', 'file')
? ? ? ? // ? ? input.setAttribute('accept', 'video/*')
? ? ? ? // ? ? input.onchange = async(e) => {
? ? ? ? // ? ? ? const file = e.path[0].files[0]// 只選取第一個(gè)文件业扒。如果要選取全部，后面注意做修改
? ? ? ? // ? ? ? if (this.validateVideo(file)) {
? ? ? ? // ? ? ? ? const { url, name } = await this.uploadFile(file, 'video')
? ? ? ? // ? ? ? ? cb(url, { title: name })
? ? ? ? // ? ? ? }
? ? ? ? // ? ? }
? ? ? ? // ? ? // 觸發(fā)點(diǎn)擊
? ? ? ? // ? ? input.click()
? ? ? ? // ? }
? ? ? ? // }
? ? ? },
? ? ? myValue: this.value,
? ? };
? },
? watch: {
? ? value(newValue) {
? ? ? this.myValue = newValue;
? ? },
? ? myValue(newValue) {
? ? ? this.$emit("input", newValue);
? ? },
? },
? mounted() {
? ? tinymce.init({});
? },
? methods: {
? ? // 校驗(yàn)視頻
? ? /* async validateVideo(file) {
? ? ? const isMP4 = file.type === 'video/mp4'
? ? ? const isLt3M = file.size / 1024 / 1024 < 3
? ? ? if (!isMP4) {
? ? ? ? this.$message.error('上傳視頻必須為 MP4 格式舒萎！')
? ? ? ? return false
? ? ? }
? ? ? if (!isLt3M) {
? ? ? ? this.$message.error('上傳視頻大小限制 3M 以內(nèi)程储！')
? ? ? ? return false
? ? ? }
? ? ? // const duration = await this.getVideoDuration(file)
? ? ? // if (duration > 60) {
? ? ? // ? this.$message.error('上傳視頻時(shí)長(zhǎng)不能超過(guò) 60 秒蹭沛！')
? ? ? // ? return false
? ? ? // }
? ? ? return true
? ? },*/
? ? /**
? ? ?* @description 獲取視頻時(shí)長(zhǎng)
? ? ?* @param {File} file - 要上傳的文件
? ? ?* @returns {Promise<number>}
? ? ?*/
? ? /* ?getVideoDuration(file) {
? ? ? return new Promise(resolve => {
? ? ? ? const videoElement = document.createElement('video')
? ? ? ? videoElement.src = URL.createObjectURL(file)
? ? ? ? videoElement.addEventListener('loadedmetadata', () => {
? ? ? ? ? resolve(videoElement.duration)
? ? ? ? })
? ? ? })
? ? }*/
? ? /**
? ? ?* @description 上傳文件
? ? ?* @param {File} file - 要上傳的文件
? ? ?* @param {string} type - 文件類型
? ? ?* @returns {Object}
? ? ?*/
? ? /* ? ? async uploadFile(file, type = 'images') {
? ? ? const loading = this.$loading({
? ? ? ? lock: true,
? ? ? ? text: 'Loading',
? ? ? ? spinner: 'el-icon-loading',
? ? ? ? background: 'rgba(0, 0, 0, 0.7)'
? ? ? })
? ? ? const formData = new FormData()
? ? ? formData.append('file', file)
? ? ? // // 注：此為調(diào)用后端上傳接口，需根據(jù)實(shí)際情況進(jìn)行調(diào)整
? ? ? // const res = await fileUpload(formData)
? ? ? // loading.close()
? ? ? // if (res.code !== 1) return this.$message.error(res.$message)
? ? ? // return {
? ? ? // ? url: `${ROOT}/${res.data}`,
? ? ? // ? name: file.name
? ? ? // }
? ? },*/
? ? // 添加相關(guān)的事件章鲤，可用的事件參照文檔=> https://github.com/tinymce/tinymce-vue => All available events
? ? // 需要什么事件可以自己增加
? ? onClick(e) {
? ? ? this.$emit("onClick", e, tinymce);
? ? },
? ? // 可以添加一些自己的自定義事件摊灭，如清空內(nèi)容
? ? clear() {
? ? ? this.myValue = "";
? ? },
? },
};
</script>
<style scoped>
.tinymce-editor {
? width: 100%;
? height: 100%;
}
</style>
