一個簡單，豐富的JavaScript文本編輯器，可生成一致的標簽？

Question

我正在嘗試開發一個Web應用程序，允許用戶在自己身上存儲一個小的“關於我”部分。 為簡單起見，我想使用基於JS的編輯器和典型的格式化功能，即。 粗體，斜體，下划線，不同的字體大小和顏色等。

我嘗試自己滾動，但我發現contentEditable有一個討厭的習慣，就是在不同的瀏覽器中生成不同的標簽（例如，有些插入的標簽比其他標簽更多，有些將不同的段落分成p標簽......）出於安全原因，存儲原始HTML是不可能的，我發現編寫一個可以解釋所有這些差異並以標准格式正確存儲輸出的解析器非常困難（即用\\ n取代每個換行符存儲比一個替換操作更困難）。

那么，是否有任何文本編輯器可以在大多數/所有現代瀏覽器中使用，更重要的是，在每個瀏覽器中生成相同的標簽，以便我可以以相同的方式解析它們？

提前致謝！ ^^

Answer 1

我想如果你想要一個WYSIWYG編輯器那么就沒有辦法滿足於此。 然而，由於問題是HTML的語義結構，我找到了一個庫，它將確保html是語義，簡單和干凈的：

https://jakiestfu.github.io/Medium.js/

替代方案是他們在stackexchange中使用的。 一個inputfield，您可以在其中放置不同的標記以進行格式化。 phpBB使用simlar方法和BBCode。 您需要一個解析器服務器端，如果找不到，可能需要編寫。 更多信息：

https://code.google.com/p/pagedown/

https://code.google.com/p/markdownsharp/(C＃）

http://www.bbcode.org/

http://webcheatsheet.com/javascript/bbcode_editor.php(PHP ）

Answer 2

它非常簡單，不會產生任何腳本沖突：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="robots" content="noindex, nofollow">
    <title>Classic editor with default styles</title>
    <script src="http://cdn.ckeditor.com/4.6.2/standard-all/ckeditor.js"></script>
</head>

<body>

    <textarea cols="80" id="editor1" name="editor1" rows="10" >&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;
    </textarea>

    <script>
        CKEDITOR.replace( 'editor1', {
            height: 260,
            width: 700,
        } );
    </script>
</body>

</html>

Answer 3

您可以使用基於JavaScript選擇范圍API本機創建的豐富編輯器，而不是基於document.execCommand ，它在瀏覽器中表現不同。

https://github.com/tovic/rich-text-editor

此富文本編輯器旨在用於公共HTML表單，因此適合您。

我發現編寫一個可以解釋所有這些差異並以標准格式正確存儲輸出的解析器是非常困難的（即，用一個替換每個換行符用於存儲比一個替換操作更困難）。

編輯器只將兩個換行符視為新的<p>部分，將單個換行符視為一個<br> 。 你可以輕松地玩它們。

Answer 4

Shield UI的WYSIWYG編輯器也是一個非常好的編輯器。

一個簡單，豐富的JavaScript文本編輯器，可生成一致的標簽？

問題描述

4 個解決方案

解決方案1
4 2014-07-09 07:32:51

解決方案2
3 2017-05-24 09:42:19

解決方案3
2 2017-05-21 14:52:13

解決方案4
1 2016-08-08 11:15:25

一個簡單，豐富的JavaScript文本編輯器，可生成一致的標簽？

問題描述

4 個解決方案

解決方案1 4 2014-07-09 07:32:51

解決方案2 3 2017-05-24 09:42:19

解決方案3 2 2017-05-21 14:52:13

解決方案4 1 2016-08-08 11:15:25

解決方案1
4 2014-07-09 07:32:51

解決方案2
3 2017-05-24 09:42:19

解決方案3
2 2017-05-21 14:52:13

解決方案4
1 2016-08-08 11:15:25