下載tinymce
官網(wǎng)例子：
https://www.tiny.cloud/docs/tinymce/6/vue-cloud/
下包
npm install --save "@tinymce/tinymce-vue"
開始使用
key的注冊地址：
https://www.tiny.cloud/my-account/dashboard/
如果不填有效key，會(huì)彈出提示，影響體驗(yàn)。
下面是我自個(gè)配置的基本功能。
更多功能參考官網(wǎng)即可。
<template>
? <Editor api-key="寫你的key" :init="init" />
</template>
<script setup>
import { reactive } from "vue";
import Editor from "@tinymce/tinymce-vue";
const init = reactive({
? plugins: "lists link image table code help wordcount",
? content_css: "tinymce-5", //主題tinymce-5-dark || tinymce-5 || default || writer || document || dark
? custom_undo_redo_levels: 50, //回退數(shù)量
? end_container_on_empty_block: true, //塊級(jí)文本是否換行
? keep_styles: true, //回車是否保存原有樣式，例如code塊回車是否截?cái)?/p>
? menubar: false,//是否開啟頂部菜單 > false 關(guān)閉菜單 |? 'edit insert view format table tools help' 菜單按照這里排序 | 參考:https://www.tiny.cloud/docs/tinymce/6/menus-configuration-options/
? toolbar_mode: 'wrap',//功能欄是否換行 > | wrap 換行? | scrolling 滾動(dòng) | sliding 省略
? toolbar_location: 'top',//菜單欄位置 > bottom 底部 | top 頂部
? style_formats_merge: true,//是否開啟默認(rèn)功能
? elementpath: false,//是否展示編輯層級(jí)? > p span
? resize: true,//調(diào)整寬高 > true 調(diào)整高 | false 不可調(diào)整寬高 | both 寬高可調(diào)
? language: 'zh_CN',//中文
? // 自定義快捷將
? text_patterns: [
? ? { start: "---", replacement: "<hr/>" },
? ? { start: "--", replacement: "—" },
? ? { start: "-", replacement: "—" },
? ? { start: "(c)", replacement: "?" },
? ? { start: "http://brb", replacement: "Be Right Back" },
? ? {
? ? ? start: "http://h",
? ? ? replacement:
? ? ? ? '<h1 style="color: blue">Heading here</h1> <h2>Author: Name here</h2> <p><em>Date: 01/01/2000</em></p> <hr />',
? ? },
? ],
? // 自定義指令
? text_patterns_lookup: (ctx) => {
? ? const parentTag = ctx.block.nodeName.toLowerCase();
? ? if (parentTag === "pre" || parentTag === "p") {
? ? ? return [{ start: "`", end: "`", format: "code" }];
? ? } else if (parentTag === "p") {
? ? ? return [{ start: "*", end: "*", format: "bold" }];
? ? } else if (parentTag === "span") {
? ? ? return [
? ? ? ? // ctx.text is the string from the start of the block to the cursor
? ? ? ? { start: "brb", replacement: ctx.text + ": Be Right Back" },
? ? ? ];
? ? } else {
? ? ? return [];
? ? }
? },
});
</script>
如下圖：
