Question

我想为HTML编写WYSIWYG编辑器。我正在寻找一种高级方法，我最终将用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）。 / p>

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

Answer 1

如果您可以这样做，更简单的方法是在您的应用中嵌入网络浏览器，并在contentEditable="true"上设置<body>。如果你在Windows上，你可以使用内置的，或者你可以嵌入像Gecko或WebKit这样的引擎。

Answer 2

你可以看一下颜色选择。

基本上你将所有东西都渲染两次。一旦显示给用户。

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

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

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

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

如何编写WYSIWYG编辑器？

2 个答案: