我疯了吗？ （如何）我应该创建一个jQuery内容编辑器？

时间：2010-04-13 00:21:39

标签： jquery editor wysiwyg

8 个答案:

答案 0 :(得分：6)

我完全同意你对编辑器的建议 - 标记和iframe是如此2001年:)世界正在引领语义，所以我们需要现代工具来编辑内容。 （请参阅我的幻灯片http://www.slideshare.net/draftkraft/aloha-editor-contenteditable-useable）我或多或少地启动了Aloha编辑器（http://aloha-editor.org），其背后的内涵与您的相同。乌托邦:-)在我们的案例中或多或少变得现实，我们已经有一些使用它的软件：

众所周知，使用Aloha Editor作为主编辑

众所周知，这些系统具有插件

我们欢迎任何开发者如何加入，贡献，参与，反馈或其他什么。我们希望为每个人保持路线图和开发尽可能开放。欢迎提供反馈！

答案 1 :(得分：5)

好的，哇！这些人正在按照我的想法行事：

http://aloha-editor.com/

我不喜欢他们的工具栏，但他们的实际功能看起来很棒！我会密切关注他们的进步:)。

答案 2 :(得分：3)

This may help

乔阿姆斯特朗与你刚才有同样的想法，花了一个星期左右的时间玩ContentEditable并与CouchDB配合使用。他并没有最终得到一个高度优秀的编辑器，但这是一个很好的起点来推动自己（如果那是你想做的）。看起来很简单，把它放在那里并将它变成一个可靠的上下文编辑器。

作为一个注释，我同意你的观点，即编辑界面应该尽可能地与他们正在编辑的工件的上下文和布局相近。如果你最终滚动自己，请告诉我。我有兴趣参与这样的项目。

在你出去编写一个编辑器之前，查看你的用户实际在做什么可能会付出代价。在企业IT中，十分之九，你会看到人们将他们的页面放在Word或某些东西中，然后将结果粘贴到你拥有的任何“编辑器”中。我不认为这对ContentEditable方法有效。顺便说一下，这就是我们仍然使用TinyMCE的原因;它有一个中等体面的“从Word粘贴”按钮。你的目标是小学而不是公司环境，所以事情可能会有所不同。

答案 3 :(得分：2)

你试过uEditor吗？这是一个简单的Jquery解决方案，可以将textarea变成WYSIWYG编辑器

//Grab the content of the editable area then replace it with a textarea like so...

var editableContent = $(selector).html();
$(selector).after("<textarea>" + editableContent + "</textarea>")

// add attributes to text area as desired

// kill the original area:

$(selector).remove();

// call uEditor

$(textareaSelector).uEditor({options});

然后，您显然会向uEditor添加选项和事件处理程序。

只是一个想法。 罗布

答案 4 :(得分：0)

JQuery确实有很多WYSIWYG编辑器，但老实说我对它们中的大多数都很失望。你的建议听起来非常有用。我就是这样做的：

首先，对象只有在获得焦点时才会获得关键事件。解决此问题的最佳方法是在页面级别捕获关键事件。然后将正确的字符附加到当前正在编辑的div。这将处理任何div的基本输入，这可能是你想要解决的第一件事。

接下来，您需要一个工具栏，通过将显示设置为固定，可能会将其拉出页面。你需要一些逻辑来插入跨度，以便处理样式化文本。

当然，如果你自己构建所有这些，你需要构建所有东西 - 甚至是闪烁的光标，显示你输入的字符的位置。选择文本，将光标插入文本中间，复制并粘贴;你几乎必须构建我们用来从头开始的所有东西。另一个选择是使用某种文本框，但据我所知，你想避免这种情况。

所以无论如何，我的最终结论是它可能但它仍然需要做很多工作。似乎对它有很大的兴趣，所以你可能会得到一些帮助。

答案 5 :(得分：0)

尝试创建另一个WYSIWYG编辑器是浪费精力。您必须复制其他编辑器中已有的所有代码，以处理生成正确HTML所需的特殊问题，轻松编辑元素，正确管理键盘......

最好使用正在开发中的现有产品并首先尝试按原样使用它，确保它处理您的代码并生成您想要的内容，然后学习如何调整其宽度以匹配容器，自动调整它的内容高度，将工具栏放在外部div中，你就可以得到你想要的东西。如果你想真正摆脱iFrame，那么请继续向他们发送补丁，如果他们还没有提供这种能力，那么这将比从头创建所有东西容易得多。

我可以向你保证，很多人已经使用这种设置好几年了，而不需要关心用于编辑的内部元素是什么，包括使网页的任何部分都可以被编辑。触发器像上下文菜单，双击或浮动按钮。他们只关注CMS，并将编辑器的详细信息发送给专门的团队。

答案 6 :(得分：0)

这些年来，我很高兴自己没有自己做！人们已经发现，可以将contenteditable用作IO设备来接受输入，然后将实际HTML保持在contenteditable之外。我使用的两个利用这种方法的项目是：

Froala无疑是功能更丰富的编辑器，但它们的操作方式相似，从而产生清晰可预测的标记

答案 7 :(得分：-2)

如果我理解正确，你几乎想要动态可编辑的字段（参见：facebook，其他ajaxy-web2.0网站）。因此，这意味着您只需将（或其他）的类设置为适当的名称，并将jquery转换为textfield / textarea onClick。我认为jquery使用其中一个插件做了类似的事情。无论如何，您可以进行每个字段的更新（如果您不想编辑整个页面，或者必须更新整个页面/实体以编辑一个字段）。
当然，这需要一点点ajax和一些后端工作来将它们联系在一起，但这非常简单。“/ p>

相关问题
最新问题