如何在tinymce中实现一些自定义弹框和侧边栏

样图

先看效果图，符合需求请往下看实现方式。

侧边栏中可以实现，评注内容、大纲等任何自定义的功能

实现方式

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调用即可