Как изменить текст динамически с помощью raphael

Question

Хорошо, это в основном то, что я делаю прямо сейчас. Я создаю текстовый объект raphael. Я использую событие click, чтобы открыть диалоговое окно. Затем я вношу изменения в текст в диалоговом окне. Однако я не хочу это реализовать. Я хочу, чтобы моя реализация была несколько похожа на способ создания текста в MS Paint, где пользователь может щелкнуть по текстовому объекту и изменить текст при вводе текста. Кто-нибудь знает, как реализовать это, используя текстовый объект raphael?

Answer 1

Простым решением было бы создать <textarea>, когда пользователь начнет редактировать текст. Заполните его текущим текстом и поместите его поверх текстового объекта. Затем, когда он теряет фокус (onblur), удалите текстовую область и скопируйте текст обратно в текстовый объект.

Если вы действительно хотите отредактировать текст «на месте» в текстовом объекте, вы можете позволить пользователю ввести скрытое текстовое поле. Но в этом случае вам придется реализовать всю логику курсора и выбора самостоятельно. См. this fiddle (который позволяет использовать стрелки вправо и влево для перемещения курсора, со сдвигом для выбора текста, чтобы вы могли копировать и вставлять).

В качестве альтернативы, я не знаю, работает ли contenteditable для содержимого SVG, но это было бы очень простое решение, если бы оно работало.