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

这个系列已经写了 3 篇了。这篇写如何使用 iframe 解决标题里面提到的问题。

前情提要

请看上一篇博文：

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

WEB 编程：富文本编辑器 Quill 配合 Pico.css 样式被影响的问题之Shadow DOM-优快云博客

缘由

缘由仍然是我想在网页里面放一个富文本编辑器 Quill Editor，然后又想用 Pico.css 给网页一个好看的格式。

然后，Quill Editor 的工具栏按钮的样式被 Pico.css 污染了。搞得很不好看。但是，页面里面还有其它的元素，需要使用 Pico.CSS 来给样式。

前面有篇文章，我提到用 iframe 的方式，把 Quill Editor 单独放在一个没有 Pico.css 的页面中，然后把这个页面，采用 iframe 的方式嵌入到有 Pico.css 的框架页面中。

当时的问题和解决方案

当时想到采用 iframe，测试确实屏蔽了框架页面的 CSS，但是，和 Editor 在一起的，还有其它的输入框。这些输入框，需要给 Pico.css 给以样式。否则这些输入框会很难看。

然后想到采用 Shadow DOM 的解决方案，而不是采用 iframe 的方式。没成想，测试下来，发现 Shadow DOM 的方式，让 Quill Editor 的原本的功能都无法正常操作了。

兜兜转转一大圈，回到 iframe 这个方案

使用 iframe 这个方案，同时要解决页面上其它的页面组件，比如文章标题的输入框，要受到 Pico.css 样式的影响，提交用的按钮，要受到 Pico.css 样式的影响，就必须把文章标题输入框，提交按钮，等，放到 iframe 外面，也就是放到框架页面上。

接下来的问题就是，如何在提交的时候，能同时提交标题输入框的内容，和 iframe 里面的富文本编辑器里面用户输入的内容。

当然，如果写很复杂的 JavaScript 代码，肯定是能搞定这个问题的。但我想要越简单越好，尽量少写代码。比如，我不会自己去创建一个 XMLHttpRequest 用来向服务器提交。我也不想要引入 jQuery 库或者其它的