快捷導(dǎo)航

Vue 富文本編輯器tinymce的安裝配置使用教程

更新時(shí)間：2023年09月04日 11:11:45 作者：~black-

TinyMCE是一個(gè)輕量級(jí)的基于瀏覽器的所見(jiàn)即所得編輯器,由JavaScript寫(xiě)成,TinyMCE是一個(gè)根據(jù)LGPL license發(fā)布的自由軟件,你可以把它用于商業(yè)應(yīng)用,這篇文章主要介紹了Vue 富文本編輯器tinymce的安裝教程,需要的朋友可以參考下

一、Tinymce編輯器簡(jiǎn)介

TinyMCE是一個(gè)輕量級(jí)的基于瀏覽器的所見(jiàn)即所得編輯器，由JavaScript寫(xiě)成。它對(duì)IE6+和Firefox1.5+都有著非常良好的支持。功能方面雖然不能稱(chēng)得上是最強(qiáng)，但絕對(duì)能夠滿足大部分網(wǎng)站的需求，并且功能配置靈活簡(jiǎn)單。另一特點(diǎn)是加載速度非常快，如果你的服務(wù)器采用的腳本語(yǔ)言是PHP，那還可以進(jìn)一步優(yōu)化。最重要的是，TinyMCE是一個(gè)根據(jù)LGPL license發(fā)布的自由軟件，你可以把它用于商業(yè)應(yīng)用。

1、該插件僅支持使用FastAdmin開(kāi)發(fā)的后臺(tái)管理中使用，不支持前臺(tái)頁(yè)面、問(wèn)答、小程序、APP、VUE、Uniapp中使用

2、cms插件的前臺(tái)頁(yè)面樣式文件common.less中的.article-text img {}樣式會(huì)影響此編輯器的圖片格式(使其自動(dòng)居中)建議手動(dòng)修改.article-text img {}中的樣式，若為自定義前臺(tái)頁(yè)面則沒(méi)有樣式?jīng)_突。

二、安裝以及配置tinymce

2.1.安裝tinymce編輯器

npm i tinymce
npm i @tinymce/tinymce-vue

安裝完成

2.2.從node_modules/tinymce復(fù)制樣式到public目錄下，復(fù)制完畢的public下的目錄結(jié)構(gòu)如下

(1)現(xiàn)在public目錄下新建文件夾 ticymce

(2).將node_modules/tinymce/tinymce.min.js 復(fù)制到上面創(chuàng)建的文件夾目錄下面

(3).在public/tinymce目錄下創(chuàng)建文件夾 skins 和 langs

(4).將node_modules/tinymce/skins 文件夾直接復(fù)制到 public/tinymce目錄下

(5).配置中文語(yǔ)言中文語(yǔ)言包 zh-Hans.js下載地址

Language Packages | Trusted Rich Text Editor | TinyMCE

下拉選擇 Chinese Simplified 然后點(diǎn)擊下載

下載完成后，解壓

解壓完成后，將解壓后 zh-Hans.js 復(fù)制到 public/tinymce/langs 文件夾下

當(dāng)前public目錄下的文件結(jié)構(gòu)如下:完全一致

三、在Vue里面使用

3.1.在components 目錄下新建 Editor.vue 將下面代碼復(fù)制進(jìn)去

<template>
    <editor v-model="content" tag-name="div" :init="init" />
</template>
<script setup>
import tinymce from "tinymce/tinymce";
import Editor from "@tinymce/tinymce-vue";
import { ref, watch } from "vue"
import "tinymce/themes/silver/theme"; // 引用主題文件
import "tinymce/icons/default"; // 引用圖標(biāo)文件
import 'tinymce/models/dom'
// tinymce插件可按自己的需要進(jìn)行導(dǎo)入
// 更多插件參考：https://www.tiny.cloud/docs/plugins/
import "tinymce/plugins/advlist"
import "tinymce/plugins/anchor"
import "tinymce/plugins/autolink"
import "tinymce/plugins/autoresize"
import "tinymce/plugins/autosave"
import "tinymce/plugins/charmap" // 特殊字符
import "tinymce/plugins/code" // 查看源碼
import "tinymce/plugins/codesample" // 插入代碼
import "tinymce/plugins/directionality"
import "tinymce/plugins/emoticons"
import "tinymce/plugins/fullscreen" //全屏
import "tinymce/plugins/help"
import "tinymce/plugins/image" // 插入上傳圖片插件
import "tinymce/plugins/importcss" //圖片工具
import "tinymce/plugins/insertdatetime" //時(shí)間插入
import "tinymce/plugins/link"
import "tinymce/plugins/lists" // 列表插件
import "tinymce/plugins/media" // 插入視頻插件
import "tinymce/plugins/nonbreaking"
import "tinymce/plugins/pagebreak" //分頁(yè)
import "tinymce/plugins/preview" // 預(yù)覽
import "tinymce/plugins/quickbars"
import "tinymce/plugins/save" // 保存
import "tinymce/plugins/searchreplace" //查詢(xún)替換
import "tinymce/plugins/table" // 插入表格插件
import "tinymce/plugins/template" //插入模板
import "tinymce/plugins/visualblocks"
import "tinymce/plugins/visualchars"
import "tinymce/plugins/wordcount" // 字?jǐn)?shù)統(tǒng)計(jì)插件
// v-model
const props = defineProps({
    modelValue: String,
})
const emit = defineEmits(["update:modelValue"])
// 配置
const init = {
    language_url: '/tinymce/langs/zh-Hans.js', // 中文語(yǔ)言包路徑
    language: "zh-Hans",
    skin_url: '/tinymce/skins/ui/oxide', // 編輯器皮膚樣式
    content_css: "/tinymce/skins/content/default/content.min.css",
    menubar: false, // 隱藏菜單欄
    autoresize_bottom_margin: 50,
    max_height: 500,
    min_height: 450,
    // height: 320,
    toolbar_mode: "none",
    plugins:
        'wordcount visualchars visualblocks template searchreplace save quickbars preview pagebreak nonbreaking media insertdatetime importcss image help fullscreen directionality codesample code charmap link code table lists advlist anchor autolink autoresize autosave',
    toolbar:
        "formats undo redo fontsizeselect fontselect ltr rtl searchreplace media | outdent indent aligncenter alignleft alignright alignjustify lineheight underline quicklink h2 h3 blockquote numlist bullist table removeformat forecolor backcolor bold italic strikethrough hr link preview fullscreen help ",
    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;蘋(píng)果蘋(píng)方= 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, // 隱藏底部狀態(tài)欄
}
tinymce.init; // 初始化
const content = ref(props.modelValue)
watch(props, (newVal) => content.value = newVal.modelValue)
watch(content, (newVal) => emit("update:modelValue", newVal))
</script>
<style>
.tox-tinymce-aux {
    z-index: 9999 !important;
}
</style>

3.2 app.vue中代碼，引入組件 Editor.vue

<template>
    <Editor v-model="content" />
</template>
<script setup>
import { ref } from "vue"
import Editor from "/src/components/Editor.vue"
const form = ref({
    content: ''
})
</script>

引入成功，顯示富文本編輯器，可以正常編輯