javascript - 如何在 WYSIWYG 编辑器中设置 block 引号的样式

Question

我是 Javascript 的新手，一直在做一些小元素来熟悉这门语言。我做过可拖动框、计算器等东西，现在我正在开发一个小型所见即所得的编辑器，用于练习和可能用于 future 的网站。

在这个元素中，我使用了 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);创建编辑界面。我有几个按钮可以工作(粗体、斜体、下划线、删除线、下标和上标等)，但我在使用 block 引号时遇到了问题。这是一个理论留言板，编辑需要能够识别长引文，就像 Stack Overflow 上的 blockquote 按钮的操作方式一样。

为了完成这项工作，到目前为止我使用了 doc.execCommand('formatblock', false, '<blockquote>'); .此方法将正确缩进文本，但我的 CSS 不会影响它。我认为这是因为该文档上的 CSS 不适用于 iframe 内部。 . .但我不知道如何设计里面的东西。有没有办法在 iframe 中插入样式表？我这样做是不是错了？我是否应该尝试在 iframe 上使用 textarea？谢谢您的帮助!

Answer 1

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

像这样的div怎么样你可以在css中设置oveflow属性溢出:scroll;并获得与 iframe 类似的效果，同时将所有元素保持在同一页面中？

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

div 的 CSS

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

我希望这有助于...