如何在所見即所得編輯器中設置塊引用的樣式

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 */
}

我希望這有幫助...