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

Question

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

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

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

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

Answer 1

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

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

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

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

• 如果它已经可以作为字符串使用，请使用 DOM 解析器

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-Elements，单击它们即可创建文本区域。

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

• 拖放API支持文件和检查文件类型， Canvas 可以显示图像
• 或者您可以使用旧式文件输入和 IMG-Elements 来上传和显示图像

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