HUA

回到最初的问题，利用富文本编辑器，编写邮件模板，或者说，提供一个编辑器，用来编写邮件。如果说编写邮件而已，大可以在 word 或者其他编辑器里写好内容，但这里的一个特点就是 占位符 。所以说，这是要保持邮件编辑器的功能，然后还能使用占位符。

前面也是利用了 vue-quill-editor实现了 占位符 ，且具有不可编辑的特点。另外也具有了编辑器的基础功能，如文字大小、颜色、背景、居中、缩进等等。在开发中，只关注于编辑器本身，即这个编辑器能编辑就可以了，忽略了 邮件 这个功能。

后面也是在实际应用中发现了这个问题，样式丢失，所以总结起来有以下几点问题。

1. 系统内的样式

通过观察 element 发现，vue-quill-editor使用的是类样式，比如居中，就是ql-align-center。当在新增页面居中文字时，没有样式问题。在编辑页面，数据回显后页面问题。但是当在详情页，不使用vue-quill-editor，而是使用v-html渲染时，就发现完全没有样式。窥其原因，就是项目内没有ql-align-center这个样式。解决办法当然也很简单，按照vue-quill-editor的内置样式，自己写一份放在项目中。

2. 系统外的样式

在系统内，因为自己配置了对应的样式，因此没有样式问题。但是当我们应用了这个邮件模板，将邮件发送出去后，在另一端，居中等样式是失效的，让用户配置对应的样式是不合理也是不可能的。所以为保证样式问题，编辑器的样式不能使用class，而必须使用 内联样式。通过查阅祥资料，vue-quill-editor支持 class 和 内联style ，但是默认了 class 。

1.配置字体大小

引入 .scss文件，设置编辑器的样式。

 1import './quill-editor.scss';
 2const fontSizeStyle = Quill.import('attributors/style/size'); 
 3fontSizeStyle.whitelist = ['14px', '16px', '18px', '20px', '22px', '24px', '26px', '28px', '30px', '32px', '34px', '36px'];
 4Quill.register(fontSizeStyle, true);

注册该配置后，设置字体大小时，fontSize 就是写在了 style 上。

2.配置对齐方式
 1const Align = Quill.import('attributors/style/align');
 2Align.whitelist = ['right', 'center', 'justify'];
 3Quill.register(Align, true);

同样，配置该配置后，text-align 就写在了 style 上。

3.缩进问题思考

这个问题应该是 以上第二点解决的，但却放在这里，因为有点特殊————无法设置。

按照我们的理解，缩进应该是 text-indent , 但在 vue-quill-editor 里，缩进却是用了 padding-left,而且是 clsss 样式。在vue-quill-editor里并没有像居中一样，提供 style 的方案。所以在缩进这块，我的想法是使用野路子，根据 class ,设置相应的映射关系，给标签加上 text-intent 的 style。

此种设想，我经过多次尝试，思路是这样的，如果标签有缩进 ql-indent-1 这种类名，再加上text-indent 。

1. 查找标签

正则匹配含有 class="ql-indent-*"的标签，但是标签会存在单一标签，多层嵌套标签，因此使用正则很难能匹配到正确的标签。经过多次测试，发现缩进都是加在 p标签 上，那就简单一点，匹配 p标签头。

2. 添加 style

这里有两个注意点，得先判断一下原来有没有 style 。如果已存在 style ,则是向 style 里添加 text-indent; 如果没有 style 则是设 style="text-indent:3em" 之类的。在实操过程中，如果原先没有 style ，那添加 style 是非常顺利的。如果原先就存在 style ，比如说，原先就有 style="text-align:center"，这时添加 text-indent:3em ，这里也没问题。

但是忽略了一点，在我设置缩进之后，再进行对齐，就有问题了。缩进之后是 style="text-indent:3em"，这是设置居中，毕竟不是方法处理的，打印编辑器内容就会发现，这个标签里面有两个 style 。 如

 1      <p class="ql-indent-1" style="text-indent:3em" style="text-align: center;">你好</p>

这就难搞了，意味着要在某个节点对这个编辑器内容进行处理，比如说提交表单的时候，把字符串处理好，添加style，只留有一个 style 等，再存入数据库。不过在实操过程中，确实是处理好了，保证只有一个 style ,缩进的样式也写入了 style ,并存入了数据库，但在数据回显的时候，出了问题。

  • 样式格式化

    在数据向 vue-quill-editor 回显的时候，编辑器做了处理，可以理解成不是这个编辑设置的 style ,它都通过去掉。前面是已经设置了 text-indent ,但是数据在渲染到富文本后，通过调试 element 发现，这个样式并不存在。

  • 占位符失效

    之前的占位符经过了处理，就是设置了颜色，添加了类名和不可编辑的属性。如

 1   <span class="non-editable" style="color: blue;" contenteditable="false"></span>

但是在数据回显的时候，这个 span 被处理了，变成了一个普通的 span ，这个不可编辑的功能没了，这是不能被接受的。另外为什么会变成这样，也是不得而知。

4.其它问题思考

经过这些操作，好像只完成了对齐方式的处理。用方法处理缩进带来的缺陷太大了。另外回到 邮件的基本功能 ，发现目前的编辑器，并没有实现原格式粘贴，就算是完成缩进，那也只是完成一小点。

对于原格式粘贴，boss 的原话是：人家为了方便，从 word 粘贴过去应该要支持。 我思考了一下，先不说 word 的问题，单单从数据来源出发，比如在别的编辑器写好，复制粘贴。如果别的编辑器没有带 style 样式，那如何粘贴其样式，就是所谓的保留原格式？ 对于原格式，我查了一下哪个编辑器支持，有说是 Tinymce ，正好 vue-element-admin 框架自带了，我试了一下，并没有完全成功。同样也有另一种声音，说配合 Microsoft 的一个插件，可以粘贴 word 的原格式，不过需要付费，这也试不了啊。

总之，人家需要实现一个可以粘贴原格式的编辑器，如 foxmail 这些，但目前来说，有这种开源的富文本编辑器吗？

个人笔记记录 2021 ~ 2025