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

【问题标题】：Own HTML page editor - own language / processing own tags?自己的 HTML 页面编辑器 - 自己的语言/处理自己的标签？
【发布时间】：2013-09-13 12:31:55
【问题描述】：

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

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

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

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

【问题讨论】：

标签： javascript editor wysiwyg

【解决方案1】：

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

首先，我假设自定义标签是一种模板，它定义了编辑器的入口点并定义了哪些元素是可编辑的，哪些是不可编辑的。
要解析这个模板，你必须有 options(source):

如果您从远程源加载模板，请使用 XMLHttpRequests：

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

如果它已经作为字符串可用，请使用 DOM-Parser

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 并将移动的项目捕捉到这些行（要有创意）。

还有：编辑文本。

这可以很简单地使用：样式化文本区域。
也许您可以在文本区域添加一些样式来隐藏边框。
如果你想提供格式，你可以使用 DIV 元素，如果它们被点击，它们会创建文本区域。

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

拖放api支持文件和检查文件类型，画布可以显示图像
或者您可以使用老式文件输入和 IMG 元素来上传和显示图像

我希望这对您的项目有所帮助。

【讨论】：