背景

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

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

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

方案

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

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

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

效果

PC模式
移动模式

问题

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

插件说明:

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

avatar
  Subscribe  
提醒