如何编写所见即所得的编辑器？答案

【问题标题】：How do I write a WYSIWYG editor?如何编写所见即所得的编辑器？
【发布时间】：2011-12-13 21:18:49
【问题描述】：

我想为 HTML 编写一个所见即所得的编辑器。我正在寻找一种高级方法，我最终将在 C++ 中实现它。

我最初的方法是创建一个扩展公共基类（节点）的类层次结构。因此对象“body”将包含对象“p”，该对象将包含对象“b”，该对象将包含一些文本。

class node {
    node *parent;
    vector<node> children;

    string name;
    map<string,string> attributes;
    string text;

    virtual void render(const rect &rect, const point &offset) = 0;
    virtual void onEvent(const event &e);
}

主引擎会调用类似 body.render(screen, point(0, 0)) 的东西，它会递归地渲染它的子引擎。

光标由指向对象层次结构的指针表示，每个节点都有自己的内部光标状态，当它是被选中的节点时会响应键盘事件。

例如，如果用户点击左箭头，并且选择了“p”节点，则“p”节点对按键的反应可能是将当前节点更改为“p”的父节点。

抽象地说，这似乎可行，我能找到的最接近我正在寻找的东西是Sigil，乍一看似乎很难学习（main.cpp 是 70k）。

在我走这条路之前，我想知道是否有人有更简单的方法，或者可以看到这种方法的任何缺陷。

【问题讨论】：

如果可以的话，一个更简单的方法是在您的应用程序中嵌入一个网络浏览器并将contentEditable="true" 设置为<body>。如果您使用的是 Windows，则可以使用内置引擎，也可以嵌入 Gecko 或 WebKit 等引擎。
@minitech: contentEditable="true" 不是编辑。如何在 24pt 处插入表格或使内容变为粗体和斜体？
@n.m. <table> 标签、样式表或<b> 标签。通过 C++ 完成这一切并不难。
@minitech，请重新提交您的评论作为答案，我会接受它，事实证明 contentEditable 足以满足我的需求。

标签： c++ editor wysiwyg

【解决方案1】：

如果可以的话，一种更简单的方法是在您的应用程序中嵌入 Web 浏览器，并将 contentEditable="true" 设置为 <body>。如果您使用的是 Windows，则可以使用内置引擎，也可以嵌入 Gecko 或 WebKit 等引擎。

【讨论】：

【解决方案2】：

你可以看看做颜色挑选。

基本上，您将所有内容渲染两次。一次是向用户显示的内容。

另一个是一堆以独特的随机颜色完成的边界框，您可以通过哈希表查找或其他方式将其转回指针。这使您可以快速定位鼠标光标下的内容，而无需递归查找每个对象。您可能想从颜色选择中错过当前选择的对象，这样您可以单击两次以获取当前对象下方的对象（如果您想继续降低，则需要以某种方式弄乱 zorder 深度。也许不要t 渲染所选元素边界框区域中当前所选对象 zorder 上方的任何内容）。

最后，一旦您选择了特定元素，您就可以进入子编辑模式。例如，将文本块变成带有闪烁光标的可编辑文本框，在元素周围绘制边框/句柄以允许您调整大小/操作它并显示属性列表。

实际上，如果您正在考虑制作一个 HTML WYSIWYG 编辑器，那还需要一个 HTML 渲染引擎。除非您打算从头开始自己制作（这本身就是一项艰巨的任务），或者只计划实现非常有限的 HTML 子集（这仍然相当耗时）。大多数 HTML 渲染器引擎将包括某种对挖掘对象拾取等内容的支持。也许值得抓住 webkit 并看看它支持什么。也许看看 Chromium 源代码（Chrome 包括一个内置的网页检查器，它与编辑器相差不远（它允许对象拾取和运行时编辑属性，但编辑不是完全所见即所得，因为它是在外部窗口中完成的，但这可能足以满足您的需求。

您最好将编辑器（或其中的一部分）编写为某种 JavaScript/Grease Monkey 扩展，您可以将其加载到正在编辑的页面上。你可以用 HTML 编写整个编辑器，或者只是添加一些支持句柄包装脚本来与你的本地程序通信。

【讨论】：