Как сделать простой редактор, который может писать слова, используя Raphaël - PullRequest
Новая
       3

Как сделать простой редактор, который может писать слова, используя Raphaël

0 голосов
/ 25 ноября 2010

Я хочу создать новый редактор с использованием Raphaël, а затем добавить больше идей,

Итак, первый шаг, я хочу добиться написания слова, используя Raphaël

что я могу сделать?

кто-то дает мне идеи

спасибо

1 Ответ

3 голосов
/ 27 ноября 2010

Во-первых, я не думаю, что создание редактора в Raphael - лучшая идея, стандартных html и javascript должно быть достаточно. Рафаэль создает фигуры и использует SVG (масштабируемая векторная графика) , поэтому я считаю, что это не лучшая идея. Но все равно:

Прежде всего вам необходимо ознакомиться с документацией Raphael . Сделав это, вы обнаружите, что на самом деле довольно просто создать то, что вы хотите.

1: Создайте HTML-элементы, с которыми пользователь будет взаимодействовать. 

<div id="preview" style="width:100%; height: 300px; border: 1px solid #000;"></div>
<textarea name="textBlock" cols="85" rows="10">Edit your text here</textarea>

2: Создайте свои элементы Raphael, мы изначально установили текст в виде пустой строки. 

var paper = Raphael("preview", "100%", "100%");
var t = paper.text("50%", 30, "");

3: Присоединить событие к вашему элементу, чтобы оно было обновлено. 

$("textarea[name='textBlock']").bind("keyup", function() {
    t.attr({ text: $(this).val() });
});

И вот оно у вас есть. Каждый раз, когда нажимается клавиша на клавиатуре, текст Рафаэля обновляется (когда пользователь убирает палец с клавиши). Как я упоминал ранее, это не лучший метод для того, что вы хотите, если это редактор, который появляется в stackoverflow. Существуют определенные ограничения, такие как перенос текста и т. Д., Для правильной реализации которых требуется гораздо больше работы.

Если вы хотите просмотреть исходный код целиком и поиграть с ним, здесь есть рабочая версия jsFiddle.

...