1

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

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

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

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

4

1 回答 1

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

并且：编辑文本。

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

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

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

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

于 2013-09-13T18:47:57.887 回答