tinymce富文本框在vue項目中的應(yīng)用

在項目中應(yīng)用tinymce富文本框的使用，首先安裝tinymce、tinymce-vue這兩個插件，

npm install tinymce -S

npm install @tinymce/tinymce-vue -S

安裝完成之后在node_modules中找到tinymce文件夾中找到skins、jquery.tinymce.js、jquery.tinymce.min.js，之后安裝中文語言包https://www.tiny.cloud/get-tiny/language-packages/；把這些文件放進public文件夾內(nèi)，在components中新建Tinymce組件；在頁面中引用跟正常組件一樣引入注冊使用就可以了。

<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"; // 字數(shù)統(tǒng)計插件

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: {

? ? // 傳入一個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)訪問路徑前綴

? ? ? // static_web_preurl: 'http://localhost/files/hxzy_img/',

? ? ? // 初始化配置

? ? ? init: {

? ? ? ? placeholder: "請輸入內(nèi)容",

? ? ? ? // language_url: require("../assets/langs/zh-Hans.js"), // 這個文件會放在下面

? ? ? ? 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 &nbsp; 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:

? ? ? ? ? "微軟雅黑='微軟雅黑';宋體='宋體';黑體='黑體';仿宋='仿宋';楷體='楷體';隸書='隸書';幼圓='幼圓';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ù)，這個直接用了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) => {

? ? ? ? // ? // 當點擊meidia圖標上傳時,判斷meta.filetype == 'media'有必要，因為file_picker_callback是media(媒體)、image(圖片)、file(文件)的共同入口

? ? ? ? // ? if (meta.filetype == 'media') {

? ? ? ? // ? ? // 創(chuàng)建一個隱藏的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]// 只選取第一個文件。如果要選取全部，后面注意做修改

? ? ? ? // ? ? ? if (this.validateVideo(file)) {

? ? ? ? // ? ? ? ? const { url, name } = await this.uploadFile(file, 'video')

? ? ? ? // ? ? ? ? cb(url, { title: name })

? ? ? ? // ? ? ? }

? ? ? ? // ? ? }

? ? ? ? // ? ? // 觸發(fā)點擊

? ? ? ? // ? ? input.click()

? ? ? ? // ? }

? ? ? ? // }

? ? ? },

? ? ? myValue: this.value,

? ? };

? },

? watch: {

? ? value(newValue) {

? ? ? this.myValue = newValue;

? ? },

? ? myValue(newValue) {

? ? ? this.$emit("input", newValue);

? ? },

? },

? mounted() {

? ? tinymce.init({});

? },

? methods: {

? ? // 校驗視頻

? ? /* 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('上傳視頻時長不能超過 60 秒！')

? ? ? // ? return false

? ? ? // }

? ? ? return true

? ? },*/

? ? /**

? ? ?* @description 獲取視頻時長

? ? ?* @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ù)實際情況進行調(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>

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容