如何在WYSIWYG编辑器中设置块引号的样式

I'm kind of new to Javascript and have been doing small projects to get myself acquainted with the language. I've done things like draggable boxes, a calculator, etc., and now I'm working on a small WYSIWYG editor for practice and possibly a future site.

我是Javascript的新手，并且一直在做小项目以熟悉这门语言。我做过像可拖动的盒子，计算器等等，现在我正在研究一个小的WYSIWYG编辑器，用于练习，可能还有未来的网站。

In this project I'm using an iframe as the text box using this snippet of code:

在这个项目中，我使用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>

to access the document of the iframe. After accessing the document I use various calls to doc.execCommand('someCommand', false, null); to create the editing interface. I've gotten several buttons to work (bold, italic, underline, strikethrough, sub and superscript, etc.) but I'm having trouble with block quotes. This is for a theoretical message board and the editor needs to be able to make long quotations recognizable, much like how the blockquote button on Stack Overflow operates.

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

To make this work, so far I've used doc.execCommand('formatblock', false, '<blockquote>');. This method will indent the text properly, but my CSS doesn't effect it. I assume this is because the CSS on that document doesn't apply inside the iframe . . . but I don't know how to style the stuff inside of it. Is there a way to insert a stylesheet inside the iframe? Am I going about this all wrong? Should I perhaps try a textarea over an iframe? Thanks for the help!

为了使这项工作，到目前为止我使用了doc.execCommand（'formatblock'，false，'

'）;.此方法将正确缩进文本，但我的CSS不会影响它。我假设这是因为该文档上的CSS不适用于iframe。。。但我不知道如何设计内部的东西。有没有办法在iframe中插入样式表？我错了吗？我是否应该尝试在iframe上使用textarea？谢谢您的帮助！

1 个解决方案

#1

You would be better off outputting the results to a div as it forms part of the dom for the page you're viewing. Iframes are for loading independant urls and pages therefore you'd need to style the page within the iframe or link to the same stylesheet as the page containing the iframe.

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

How about a div like this you can set the oveflow property in the css to overflow: scroll; and get a similar effect to the iframe whilst keeping all your elements in the same page?

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

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

Css for the div

Css为div

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

I hope this helps...

我希望这有帮助...

#1