Question

我正在尝试将wysiwyg实现到应用程序中，它们都使用contentEditable这很酷，直到我将整个html文档放入文本框中。每个wysiwyg使用html()和innerHTML来移动内容以及这些条带和标签......

html = "<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>Title</title>
  </head>
  <body>
    <span>Hey There</span>
  </body>
  </html>
  "

editable.innerHTML = html
editable.innerHTML
// => "
  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  <title>Title</title>
  <span>Hey There</span>
"

与$(editable).html()完全相同的事情。我找不到有关此的规范。

做什么？

Answer 1

HTML文档只能包含一个html，body和head元素，而您的主页已经包含这些元素。它正在剥离它，因为你试图将它们插入不允许的位置。

您必须完全删除它们，然后在编辑元素内容后重新添加它们，或者将整个WYSIWYG编辑器放在iframe元素中，以便拥有整个iframe文档使用而不是单个元素。

记录在案，尽管您需要知道自己在寻找什么。请参阅MDN上的<body>文档：

允许的父元素：它必须是元素的第二个元素。

以及<html>的文档：

允许的父元素：作为文档的根元素，或复合文档中允许使用子文档片段的任何位置。

你能阻止innerHTML删除HTML，HEAD，BODY元素吗？

1 个答案: