样图
先看效果图,符合需求请往下看实现方式。
侧边栏中可以实现,评注内容、大纲等任何自定义的功能
实现方式
1.tinymce官方文档有使用官方弹框,内部使用自定义html的方式,详情可前往官网查看。
2.像我上面一样,在引入tinymce的组件内自己编写元素,自己使用变量控制元素显隐等问题。
关键
其实就是怎么样将组件内的变量和函数在plugin.js内部调用。
只要在plugin.js中能够调用到页面上的变量和方法,就可以随意操控自己自定义的组件了。
最开始我的实现是绑在window全局变量上,在任何地方都可以调用到,但是后来发现更官方的方法是挂在editor上,这是编辑器挂在所有变量和函数专用的变量。
代码段
以下均在vue3的项目框架下,其他技术栈请自行更改写法
//编辑器组件的html部分
<template>
<div class="box">
<div class="editor">
<Editor id="docTinymce-g" v-model="myValue" :init="init" :disabled="readonly" />
</div>
<div class="sidebar" v-if="SidebarType">
<div>自定义侧边栏内容</div>
</div>
</div>
</template>
// 编辑器组件的js部分
<script setup lang="ts">
import { ref, onMounted, watch, reactive } from 'vue';
import tinymce from 'tinymce/tinymce';
import Editor from '@tinymce/tinymce-vue';
const init: any = reactive(
{
image_advtab: false,
placeholder: '在这里输入文字',
language_url: '/tinymce/langs/zh_Hans.js', // 汉化路径
language: 'zh_Hans',
skin_url: '/tinymce/skins/ui/oxide',
height: window.innerHeight - 2 - 50, // 编辑器高度,可以考虑获取窗口高度,以适配不同设备屏幕
// width: 1000,
save_enablewhendirty: false, //此时无论内容是否更改都可以点击保存按钮
images_upload_url: '/api/file/uploadFileAndGetUrl', //图片服务器地址
image_resize: false, // 禁用图片大小调整功能
plugins:
'accordion anchor autolink autosave charmap code codesample directionality emoticons fullscreen help image importcss insertdatetime link lists media nonbreaking pagebreak preview quickbars save searchreplace table visualblocks visualchars wordcount kityformula-editor formatpainter comment workItem secondarySidebar version g-action toc workitem-extension drawio mindmap',
toolbar: [
'save action undo redo formatpainter blocks bold italic geshi fontfamily fontsize removeformat workItem bullist numlist alignment comment table insertImg searchreplace secondarySidebar version help'
],
style_formats_autohide: true, // 控制 blocks 按钮的可用性
toolbar_mode: 'floating',
menubar: false, //菜单栏,true为显示,false可隐藏
quickbars_insert_toolbar: false, //禁用每行开头处自动弹出的工具栏
quickbars_selection_toolbar: false, // 禁用选中文本时的工具栏
promotion: false, //去除右上角的“Upgrade”的促销按钮
statusbar: false, //控制元素路径显示
branding: false,
contextmenu: 'workitem', // 右键菜单
font_family_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",
setup: (editor: any) => {
editor.SidebarType = SidebarType //---------绑定变量的地方
},
const SidebarType = ref(false)
</script>
以下是编辑器的插件代码,在plugin.js中,不了解如何自定义插件的,请看我另一篇文章介绍。
链接: tinymce自定义插件
// plugin.js
; (function () {
tinymce.PluginManager.add('openSidebar', function (editor) {
// 添加插件按钮到工具栏
editor.ui.registry.addButton('openSidebar', {
icon: null,
text: '打开侧边栏',
tooltip: '打开侧边栏',
onAction: function () {
// 点击按钮时执行的操作
editor.SidebarType.value = true
}
})
})
})()
CSS部分我就不写了,推荐使用flex部分实现编辑器和侧边栏左右分开
拓展
弹框等其他所有自定义功能都可以这样操作,自己编写一个dialog或者饿了么的dialog然后控制显隐的函数和变量绑定到editor上,在插件中使用editor调用即可