Ace Editor 删除我的 HTML 标签答案

【问题标题】：Ace Editor remove my HTML tagsAce Editor 删除我的 HTML 标签
【发布时间】：2015-12-16 02:44:56
【问题描述】：

这是我的html：

...<div class="myclass"><label>Default</label></div>

我的javascript：

ace.edit(el); // where el is the dom element div.myclass shown above

编辑器渲染正确！

编辑器只提供“默认”。没有可编辑的 html。

当我在 chrome 上以调试模式查看代码时，我看到编辑函数使用（第 18474 行）检索我的元素的值：

value = dom.getInnerText(el);

这又会导致：

return el.textContent;

然后使用 (18475) 将 el innerHTML 置空：

el.innerHTML = '';

这对我来说似乎很奇怪。 el.innerHTML 正确显示

"<label>Default</label>"

是我还是有什么问题？

如果这是正常行为，我如何使用 Ace 编辑器编辑 div 的 html 内容？我错过了什么？

谢谢

【问题讨论】：

标签： javascript html ace-editor

【解决方案1】：

在这里找到答案 https://github.com/ajaxorg/ace/issues/519

我会尝试一下，如果这不能解决问题，请告诉你们

你基本上需要

el = document.getElementById("editor"); text = el.innerHTML editor = ace.edit(el) editor.session.setValue(text)

【讨论】：

【解决方案2】：

Ace 使用 textContent 而不是 innerHTML，因为不可能使用 innerHTML 传递任意文本。例如，如果您有 '<div class="myclass">' innerHTML 将使其成为 '<div class="myclass"></div>' 和 <script>alert('haha')</script> 将显示警报对话框。您可以使用 textarea 或 xmp 标签，不让浏览器解析文本，但您需要再次转义 </textarea。所以最明智的方法是转义特殊的 html 字符，如

【讨论】：

【解决方案3】：

如果您的代码内容包含 HTML，请使用 textarea 作为调用 Ace Editor 的容器

注意
在 C# 和 Javascript 上使用 innerText 而不是 ~~innerHtml~~。

例子

HTML

<textarea id="aceeditorcontent" runat="server" clientidmode="Static"></textarea>

<script>
var aceeditor = ace.edit("aceeditorcontent", {
        theme: "ace/theme/chrome",
        mode: "ace/mode/html_ruby",
        maxLines: Infinity,
        showPrintMargin: false,
        wrap: true,
        autoScrollEditorIntoView: true,
        enableSnippets:true
    });
</script>

Csharp

aceeditorcontent.InnerText = "<html>......</html>";

javascript

document.getElementById("aceeditorcontent").innerText = "<html>......</html>";

【讨论】：