自己的HTML页面编辑器 - 自己的语言/处理自己的标签？

Question

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

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

编辑器解析HTML源代码，为用户突出显示所有可编辑块，并为所有这些块启用修改。编辑器可能会用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元素创建文本区域（如果单击它们）。

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

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