WEB 编程：富文本编辑器 Quill 配合 Pico.css 样式被影响的问题

缘起

前端页面的美化，我采用 Pico.css，可以非常简单就把页面做得很漂亮。

富文本编辑器选用 Quill 也是非常简单就有了一个功能强大的富文本编辑器，尤其是完全不用考虑图文混排时的图片上传问题。

问题

但这两个玩意放到一个页面里面，Quill editor 的 Toolbar 上面的一部分按钮的样式，被 Pico.css 影响了，因为只是一部分样式被影响，而不是全部样式，因此整个画面变得很不协调。

解决方案

花了好多小时，和 Chat GPT 讨论了几轮，网络搜索各种和 CSS 有关的技术文章，发现最终都很难解决问题。

CSS 的问题

Quill editor 的页面元素，一个元素有多个 class 名称，也有 role="button" 这样的属性名称。导致它的样式受到 Quill editor 的 CSS 的影响的同时，一部分样式受到 Pico.css 的影响。

CSS 的语法，优先级，等等问题，很难处理这样的部分受影响。如果我在页面里面对 Editor 加上一个包装<div class="MyEditor"> Editor </div>  然后针对这个 MyEditor 单独定义一个样式，倒是可以因为这个定义的优先级，压制到 Pico.css 在这里的影响。但是在这里，我就得把 Quill editor 的 CSS 文件里面的内容都抄过来 -- 没有引用那个文件的方法。作为习惯了任何资源都可以用指针引用过来的程序员，发现CSS 这个语言是很傻逼的语言，连代码重用都做不到。代码的封装，代码的作用域这些，它完全处理不了。

使用 iframe 来解决封装的问题

最终，我决定把 Quill editor 放到一个单独的页面里面，这个页面不使用 Pico.css，把这个页面作为使用 Pico.css 的框架页面里面的一个  iframe 来加载。这样算是封装了，确实也不受 Pico.css 的影响了。

跳出 iframe 的问题

当用户在 Editor 里面编辑文章，提交后，如果服务器