所见即所得视图绑定到 Ace 编辑器

WYSIWYG view bound to Ace Editor

本文关键字：Ace 编辑器 绑定 视图 所见即所得      更新时间：2023-09-26

我正在使用 Ace Editor 为客户创建一个简单的所见即所得编辑器。

我见过divshot.com 有一个也使用 Ace 的所见即所得编辑器，但我无法弄清楚他们如何在页面上选择元素。他们还能够在代码视图中正确选择元素，并在页面视图中正确选择项。

在 Ace 编辑器中设置内容是非常基本的

editor.setValue('some text content');

那么如何使所见即所得视图中的元素绑定到 Ace 编辑器呢？

顺便说一句，我也在使用Angular，我的所见即所得的内容视图是一个iframe。

> 这非常非常困难（我是Divshot的联合创始人）。

我们编写了一个专有的组件识别引擎，该引擎允许在 ACE 编辑器实例和呈现的 HTML 画布之间进行双向同步。它涉及大量的 DOM 遍历、选择器识别、源清理和 ACE 黑客攻击。

您可以查看编辑器的会话并以这种方式抓取当前文本。

rte.editor.getSession().on('change', function(e) {
   var text = rte.editor.getSession().getValue();
   $('#output').html(text);
});
相关文章：