Tinymce5移动端预览插件-编写插件

背景

tinymce本身是所见即所得的内容编辑器，也就是编辑的效果就是最终效果。事实上，还是有一点差异的。

这个差异主要是在不同浏览器，不同尺寸的设备，默认样式等导致的，以及项目自身引入的自定义展示样式引起的样式污染等。

在项目实际使用中，有这个场景，发布的富文本内容会在PC端大屏进行展示也需要在手机端展示，内容多为图文类型。所以需要在编辑时候查看手机端的表现效果。

方案

项目采用了Tinymce 5，丢掉了之前的很多历史包袱。Tinymce5的插件机制非常完善了。提供的基础交互组件（Dialog、WindowManager等）具有非常完备的叫接口。

所以采用plugin的方式，增加一个内容预览组件，提供PC版和移动端两种宽度下的预览效果。

组件基于自身的preview组件编写，在页面底部增加了宽度切换按钮（全宽->375宽度）。

效果

问题

在实现过程中发现tinymce5完全摒弃了窗口宽度(plugin_preview_width)自定义控制，而是通过size属性控制大小，且只有’normal’、’large’、’middle’三个宽度。所以不能直接控制宽度，最后反复尝试可以通过max-width样式控制窗口的宽度。

插件说明：

插件源代码(ES6语法、未支持多语言)