如何在所见即所得编辑器中设置块引用的样式

Question

我是Java的新手，并且一直在做一些小项目，以使自己熟悉该语言。 我已经完成了诸如可拖动框，计算器之类的工作，现在我正在研究一个小的WYSIWYG编辑器，以进行练习，甚至可能用于将来的站点。

在此项目中，我使用以下代码段将iframe用作文本框：

<!-- images as buttons -->
<iframe id='reply'></iframe>

<script>
var doc;

doc = document.getElementById('reply');
doc = doc.contentDocument || document.frames.reply.document;
doc.designMode = 'on';
</script>

访问iframe的文档。 访问文档后，我使用各种调用doc.execCommand('someCommand', false, null); 创建编辑界面。 我有几个按钮可以使用（粗体，斜体，下划线，删除线，下标和上标等），但是在块引号方面遇到了麻烦。 这是一个理论上的留言板，编辑器需要能够识别长报价，就像Stack Overflow上的blockquote按钮的操作方式一样。

为此，到目前为止，我已经使用doc.execCommand('formatblock', false, '<blockquote>'); 。 此方法可以正确缩进文本，但是我的CSS不会起作用。 我认为这是因为该文档上的CSS不适用于iframe。 。 。 但我不知道如何在其中设置样式。 有没有办法在iframe中插入样式表？ 我要解决所有这些错误吗？ 我是否应该在iframe上尝试文本区域？ 谢谢您的帮助！

Answer 1

您最好将结果输出到div，因为它构成了您正在查看的页面的dom的一部分。 iframe用于加载独立的网址和页面，因此您需要在iframe中设置页面样式或链接到与包含iframe的页面相同的样式表。

这样的div怎么样，您可以将css中的oveflow属性设置为溢出： 并在将所有元素保留在同一页面中的同时获得与iframe相似的效果？

<div id='reply'></div>

div的CSS

#reply {
  width: 200px;
  height: 150px;
  overflow: scroll;
  /* additional properties */
}

我希望这有帮助...