Question

我想使用Raphaël创建一个新编辑器，然后添加更多想法，

所以第一步，我想用Raphaël实现写单词

我能做什么？

有人给我一些想法

感谢

Answer 1

首先，我不认为在拉斐尔创建一个编辑器是最好的主意，标准的HTML和JavaScript应该足够了。拉斐尔创造形状并使用SVG (Scalable Vector Graphics)，这就是为什么我认为这不是最好的主意。但无论如何：

首先，您需要熟悉Raphael documentation。完成此操作后，您会发现创建所需内容实际上非常简单。

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() });
});

你有它。每次按下键盘上的按键时，Raphael文本将被更新（当用户将手指从按键上抬起时）。正如我之前提到的，如果它是一个编辑器，就像在stackoverflow上出现一样，这不是你想要的最好的方法。有一些限制，如文本包装等，需要更多的工作才能在这个框架中正确使用。

如果您想查看整个来源并使用它，jsFiddle here.

上有一个可用的版本

如何制作一个可以使用Raphaël编写单词的简单编辑器

1 个答案: