vue3+vite+TinyMCE 踩坑记录。。

xiong阳阳
1,166 阅读5分钟

WHY TinyMCE？

老板说想要加入富文本编辑的功能，主要是用于隐私协议编辑这方面，所以这个富文本就得有丰富的编辑功能～，对市面上的富文本编辑进行了对比，主要比对了wangEditor、Quill和TinyMCE，最终选择了TinyMCE。

总结： 先得出一个结论

  1. wangEditor

    • 富文本的内容在div中，里面的样式会受到全局样式的影响，需要单独处理
    • 富文本表格支持不好，合并单元格都没有，颜色色值也只有限个，这两个问题可以通过修改富文本对应的html源码来实现，但是有第三个问题
    • 源码不是能够任意修改的，一些标签和样式会被过滤掉，这就就很受限制，因为编辑器本身不能完全符合业务场景，例如长表格横滑，需要自己加个div，添加overflow：scroll，在tinymce中就可以这样操作

  2. tinymce

    • tinymce的内容是放置在iframe中的，这样的好处就是样式隔离，并且html源码修改都能被渲染出来，方便手动修改适配各种场景。
    • 缺点是iframe在移动端安卓的时候，用a标签打开新页面会被禁止，经过尝试后发现iframe配置sandbox="allow-same-origin allow-scripts allow-popups allow-top-navigation allow-top-navigation-by-user-activation"，安卓就可以打开新页面了。但是在鸿蒙真机中，打开新页面，返回旧页面的时候会重新加载

wangEditor：

wangEditor是国人开发的，官网很好看也易懂，线上演示功能也很全，所以一开始是很中意这款编辑器的，但是使用线上演示后发现，有两个问题不能接受😭

  1. 文字颜色和文字背景只能是固定色值，不支持色盘，后面看了使用教程，发现，色值是一个数组，里面每一项是一个颜色，💔这么多颜色，色盘是至关重要的，翻了一下github issue，有好几条issue都是建议加入色盘，但是该功能一直没有实现

  2. 第二个就是表格的边框会有一条虚线边框，如下图所示，编辑器本身是不支持去掉的，真的用的话，重写样式应该能去掉，但是因为第一条就不能接受，所以直接放弃该编辑器了

补充：这两个问题其实都好解决，直接修改编辑器生成的html即可

image.png

Quill：

这个网上评价很好，github上star也很高，but，这个官网不咋容易看，官方的demo例子工具栏东西太少了，而且对vue3的支持好像也没有很好～。。。当然也有可能是自己没有深度探索。。总之这个就待定了

后面找到了tinymce，这个编辑器评分很好，一度以为是最好的编辑器，但是要收费，后面一查才知道，是靠插件赚钱的，开源的也够用了，所以就果断他了，这个编辑器的色值支持色盘的！！！

TinyMCE 使用教程

具体的搭建就不说了，按照这个流程走的 blog.csdn.net/mrjimin/art…

需要注意的就是@tinymce/tinymce-vue的版本问题，在这篇博客里，安装的是4.X.X,但是本人安装的时候，已经到5.X.X了，所以直接安装的5，结果呢，按照他的字段修改init，😭，我定义的font类型和字号都不生效，我去。后面版本降到4，按照该博客的init参数，就都生效了

SO？是不是以为到此皆大欢喜了？NO NO NO

当我使用4.X.X版本的时候，一切皆好，突然发现使用有序列表的时候，我的文字字号变了，但是我的列表的排序字号不会变。。。我哭。。。，这怎么能行，这完全不能忍，打印他的content发现，有序列表的文字改变font-size，他的font-size只会加载文案的span标签上，但是在5.X.X中，改变font-size，font-size会被加载ul上！！！，所以5.X.X中，就不存在这个问题。。。

所以最终还是得安装5.X.X😭

那之前存在的问题，怎么解决。。。，这时候就回归到我们的万能手册了，官方文档，hhhhhh，终于发现，为什么我定义的font_formats和fontsize_formats等等，，都不生效了。。。原来是因为在5.X.X中，这些字段改名称了😄😄😄

这里附上官方手册 www.tiny.cloud/docs/tinymc… 顺便附上手册大全（注意仅供参考，有些字段5.X.X中已经更改）

  1. tinymce.ax-z.cn/configure/c…
  2. blog.51cto.com/u_13424814/…
  3. blog.csdn.net/weixin_4508…

最终，终于大功告成了～

image.png

一些小插曲

我最终的目的，是希望把编辑器的文案，在另一个iframe中进行展示。如何展示？，编辑器的最终成果是这种形式，里面有各种标签和设定的样式

 <p>我<span style="color: rgb(53, 152, 219);">太辛</span>苦了，，😭这<strong>个编辑器</strong></p>

直接使用v-html绑定该值进行展示是否可以？可以展示，但是样式无法完全和编辑器中的对齐，因为这个样式不是完整的样式，还有许多tinymce内置的样式，最后发现，预览的时候，展示的是一个iframe，且其src是srcdoc，🐸，长知识了，之前只见过src链接的iframe。总而言之，言而总之，直接把预览的iframe搬过来进行展示就行了，每次更新他的文字内容即可

<template>
    <div>
        <iframe
            :srcdoc="srcDOC"
            sandbox="allow-scripts allow-same-origin"
            data-alloy-tabstop="true"
            class="tox-dialog__iframe tox-dialog__iframe--opaque rich-text-format__iframe"
        ></iframe>
    </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue';

const srcDOC = computed(
    () => `<!DOCTYPE html>
<html>

<head>
    <base href="xxxx--请参考自己预览后的iframe">
</head>

<body id="tinymce" class="mce-content-body" style="overflow:hidden">
    <style type="text/css">
    ul,ol{padding-left:16px},
    </style>
    ${props.config.text}
</body>
</html>`
);

</script>

oops 加载慢

本地部署确实最有效blog.csdn.net/m0_37138425… 提前加载试了，感觉也没有快很多。。。

汉化：

汉化包地址：www.tiny.cloud/get-tiny/la… image.png

image.png

avatar
文章
阅读
粉丝