Как мне написать редактор WYSIWYG? - PullRequest
Новая
       16

Как мне написать редактор WYSIWYG?

2 голосов
/ 14 декабря 2011

Я хотел бы запрограммировать WYSIWYG-редактор для HTML. Я ищу подход высокого уровня, который в конечном итоге я буду реализовывать в C ++.

Мой первоначальный подход заключается в создании иерархии классов, которые расширяют общий базовый класс (узел). Таким образом, объект "тело" будет содержать объект "р", который будет содержать объект "б", который будет содержать некоторый текст. 

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".

Абстрактно, кажется, это может сработать, самое близкое, что я могу найти к тому, что я ищу, это Сигил , который на первый взгляд кажется довольно пугающим для изучения (main.cpp - 70 КБ) .

Прежде чем я пошел по этому пути, мне было интересно, есть ли у кого-то более простой подход, или он может увидеть какие-либо подводные камни с помощью этого метода.

Ответы [ 2 ]

2 голосов
/ 15 декабря 2011

Более простой подход, если вы можете сделать это, - встроить веб-браузер в ваше приложение и установить contentEditable="true" на <body>. Если вы работаете в Windows, вы можете использовать встроенный или встроить движок, такой как Gecko или WebKit.

1 голос
/ 14 декабря 2011

Вы можете посмотреть на выбор цвета.

По сути, вы визуализируете все дважды.Один - это то, что отображается пользователю.

Другой - это набор ограничивающих рамок, выполненных в уникальных случайных цветах, которые вы можете превратить в указатели с помощью поиска по хеш-таблице или чего-либо еще.Это позволяет быстро найти то, что находится под курсором мыши, без необходимости рекурсивно искать каждый объект.Возможно, вы захотите пропустить выбранный в данный момент объект из цветовой палитры, чтобы дважды щелкнуть объект, чтобы получить объект ниже текущего (если вы хотите продолжать снижаться, вам нужно как-то возиться с глубиной зашкаливания.• визуализировать что-либо в области ограниченного прямоугольника выделенных элементов, которая находится над zorder выбранного в данный момент объекта).

Наконец, после выбора конкретного элемента вы можете войти в режим дополнительного редактирования.Например, превращение блока текста в редактируемое текстовое поле с мигающим курсором, рисование границ / ручек вокруг вашего элемента, чтобы вы могли изменить его размер или манипулирование им, и отображение списка свойств.

Реально, если вы смотрите насоздание редактора HTML WYSIWYG, для которого также потребуется механизм рендеринга HTML.Если вы не планируете создать свой собственный с нуля (что само по себе является массовым мероприятием) или только планируете реализовать очень ограниченное подмножество HTML (которое все равно будет довольно трудоемким).Большинство механизмов рендеринга HTML включают в себя некоторую поддержку для таких вещей, как выбор объектов.Возможно, стоит взять webkit и посмотреть, что он поддерживает.Может быть, посмотрите на исходный код Chromium (Chrome включает встроенный инспектор веб-страниц, который не слишком далек от того, чтобы быть редактором (он позволяет выбирать объекты и редактировать свойства во время выполнения, но редактирование не является полностью WYSIWYG, так как оно выполняется во внешнем окне,но этого может быть достаточно для того, что вы хотите.

Вы могли бы даже лучше взглянуть на написание своего редактора (или его частей) как на некое расширение JavaScript / Grease Monkey, которое вы можете загрузить поверх страницыВы можете написать весь редактор в HTML или просто добавить скрипт-скрипт для дескриптора поддержки, который связывается с вашей родной программой.

...