问题 HTML WYSIWYG edtor:为什么可编辑内容在iFrame中移动


为什么可编辑的html会移动到iFrame中?我分析了不同的编辑器(TinyMce,CKEditor等),并将可编辑内容移动到一个单独的iFrame中,它们放在原始文本上。

这是什么技术原因。我试验过 contenteditable="true",这也是所有这些编辑的基础,并没有找到理由做到这一点。


7301
2018-06-26 07:25


起源

我想一个主要原因是造型。来自父文档的CSS规则将不可避免地影响WYSIWYG,通常会导致有问题的结果。 - Pekka 웃
但是,当你把文字放回原始网站时,不会有问题吗?像论坛一样,您输入文章的文本,然后将其发布在页面上。然后你就会看到原始文件的风格,看看他的样子...... - Stefan
在这种情况下,您会主动将页面的样式应用于iframe(所有大型WYSIWYG编辑器都有一个选项)。我同意在某些情况下,人们更愿意按照你描述的方式使用它。 - Pekka 웃
你可能碰巧知道应用页面样式的参数吗?我发现的是,将一个特定的css文件应用于tinymce,而不是如何应用整个页面样式 - Stefan
您将不得不使用样式表文件,没有合适的方式将样式从一个文档传输到另一个文档 - Pekka 웃


答案:


我是CKEditor核心开发人员。不是很长一段时间 - 只是在今年下半年,但我已经学到很多关于为什么我们使用iframed可编辑:)

  1. 样式 - iframed编辑器的内容不会继承页面的样式。这非常重要,因为我们无法重置样式(原文如此!CSS真的很糟糕)。更重要的是 - 在iframe中我们可以自由添加我们自己的风格,这也是有帮助的。

  2. 只有iframed可编辑,我们可以在整个页面上使用head,metas,body styles,title等。我们的一些用户需要这个。

  3. 浏览器有很多错误(和不完整)的满足感。例如。猜猜将列表粘贴到可编辑的内容时会发生什么 <h1> Firefox上的元素(你可以在这个编辑器中检查 - http://createjs.org/demo/hallo/)?它将从可编辑区域泄漏出来,成为不可编辑的元素。我们必须在编辑器中手动处理这些情况,这真的很难:)。

  4. 我不确定这一点,但我相信 designMode 它允许将整个文档切换到可编辑区域 contenteditable 来晚了。所以原因可能也是历史性的 - 很难从一种方法转向另一种方法。

  5. 可能我们使用iframed可编辑的原因还有很多。我将在学习它们时更新我的​​答案:)


11
2018-06-27 08:25



非常感谢,这真的很有帮助! - Stefan


来自tinymce froum

嗨Zappino!

像TinyMCE这样的编辑器使用IFrame是非常本质的   在框架中,您可以修改HTML文档的任何部分以适合您的   需要不破坏主页文档中的任何内容。   特别是如果你想编辑一个完整的HTML文档,包括   如果没有,你之间的部分将无法实现   iframe中。

如果您将TinyMCE的文件存储在a上,则会发生跨域抓取   与嵌入编辑器的页面不同(子)域。   向我们展示您正在使用的安装测试场景   麻烦,有人可能会帮助你!

来自德国的问候(回到德国)

菲利克斯里斯特勒。


5
2018-06-26 08:41



+1确切地说,就是这样。这就是为什么所有(据我所知)强大的WYSIWYG编辑器都使用iframe的原因。 - Thariama
感谢您的反馈 - Stefan