下载tinymce
官网例子：
https://www.tiny.cloud/docs/tinymce/6/vue-cloud/
下包
npm install --save "@tinymce/tinymce-vue"
开始使用
key的注册地址：
https://www.tiny.cloud/my-account/dashboard/
如果不填有效key，会弹出提示，影响体验。
下面是我自个配置的基本功能。
更多功能参考官网即可。
<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, //回退数量
? end_container_on_empty_block: true, //块级文本是否换行
? keep_styles: true, //回车是否保存原有样式，例如code块回车是否截断
? menubar: false,//是否开启顶部菜单 > false 关闭菜单 |? 'edit insert view format table tools help' 菜单按照这里排序 | 参考:https://www.tiny.cloud/docs/tinymce/6/menus-configuration-options/
? toolbar_mode: 'wrap',//功能栏是否换行 > | wrap 换行? | scrolling 滚动 | sliding 省略
? toolbar_location: 'top',//菜单栏位置 > bottom 底部 | top 顶部
? style_formats_merge: true,//是否开启默认功能
? elementpath: false,//是否展示编辑层级? > p span
? resize: true,//调整宽高 > true 调整高 | false 不可调整宽高 | both 宽高可调
? language: 'zh_CN',//中文
? // 自定义快捷将
? text_patterns: [
? ? { start: "---", replacement: "<hr/>" },
? ? { start: "--", replacement: "—" },
? ? { start: "-", replacement: "—" },
? ? { start: "(c)", replacement: "?" },
? ? { start: "//brb", replacement: "Be Right Back" },
? ? {
? ? ? start: "//h",
? ? ? replacement:
? ? ? ? '<h1>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>
如下图：
