Question

我需要创建WYSIWYG编辑器，用于创建具有高级功能的修改HTML页面。

我知道我有一个HTML页面，在其中我将使用自己的标签 - 这些标签允许用户修改具体块（例如设置文章内容，格式化它）或设置图像源等。一些标签允许重复块，定义块是否可编辑，可移动。编辑器也允许创建新标签。

编辑器解析HTML源代码，针对用户所有可编辑块的higlight，并为所有这些块启用修改。编辑器可能会用JS编写。

这只是我的想法，还有很多问题。也许存在一些JS库，使这项任务更容易。有没有人有类似任务的经验？请分享您的经历。

Answer 1

这似乎是一项相当复杂的任务所以我试图给你一些想法，哪些功能可能有用。

首先，我假设自定义标签是一种模板，它定义了编辑器的入口点，并定义哪些元素是可编辑的，哪些不可编辑。
要解析此模板，您必须选择（source）：

var xhr = new XMLHttpRequest();
xmlhttp.open("GET","books.xml",false);
xmlhttp.send();
var xmlDoc=xmlhttp.responseXML;

var parser=new DOMParser();
var xmlDoc=parser.parseFromString(TheVariableContainingTheXML,"text/xml");

请注意，这些仅适用于较新的浏览器，对于较旧的浏览器，请查看上述来源之后，xmlDoc变量可以用作XMLDocument（reference）用它来初始化编辑器。

现在：移动物体。

基本上，您可以使用HTML5拖放API（turorial，events）。如果您熟悉一些GUI编辑器（如NetBeans，Xcode或其他软件，如iWork），您就会知道其中许多都提供帮助热线。要意识到您应该使用透明HTML 5 canvas并将移动的项目捕捉到这些行（具有创意）。

并且：编辑文本。

这可以很简单地使用：样式textareas 也许你可以在文本区域添加一些样式来隐藏边框如果要提供格式，可以使用DIV-Elements创建文本区域（如果单击它们）。

如果你想编辑图像，你应该考虑一个合适的后端我还没有做过类似的事情，但在这里，有一些想法：

我希望这可以帮助您完成项目。