Javascript 为整个文档编辑所见即所得HTML？_Javascript_Tinymce

Javascript 为整个文档编辑所见即所得HTML？

javascript tinymce

Javascript 为整个文档编辑所见即所得HTML？,javascript,tinymce,Javascript,Tinymce,我目前面临的情况是，我将整个HTML文档作为JSON对象的一部分，并希望让用户以WYSIWG方式编辑它。我目前的做法是使用TinyMCE，但我也愿意接受其他建议我在使用TinyMCE时面临的问题是，如果用户编辑文档，文档的该部分就会丢失。有人知道解决这个问题的方法吗下面的示例包含一个字符串，其中包含一个简单的HTML文档，该文档显示在textarea中。加载文档后，您将看到该区域包含整个文档。如果您继续单击“Init”按钮，它将初始化TinyMCE，您将发现标记正在被读取，您甚至可以更改它。

我目前面临的情况是，我将整个HTML文档作为JSON对象的一部分，并希望让用户以WYSIWG方式编辑它。我目前的做法是使用TinyMCE，但我也愿意接受其他建议

我在使用TinyMCE时面临的问题是，如果用户编辑文档，文档的该部分就会丢失。有人知道解决这个问题的方法吗

下面的示例包含一个字符串，其中包含一个简单的HTML文档，该文档显示在

textarea

中。加载文档后，您将看到该区域包含整个文档。如果您继续单击“Init”按钮，它将初始化TinyMCE，您将发现标记正在被读取，您甚至可以更改它。问题在于，无论何时使用“工具”中的选项按“保存”或查看源代码，都只保留文档的

正文部分
该文档实际上是来自exchange的外出邮件。原始代码有点复杂，但这是我提出的一个最小的工作示例
那么，是否有人知道我如何能够让用户仍然能够以所见即所得的方式进行一些格式化，同时保留正在加载的原始HTML标记？这主要意味着包括html
、head
等标记
<!DOCTYPE html>
<html>
<head>
    <script src="http://cloud.tinymce.com/stable/tinymce.min.js"></script>
</head>
<body>
    <button onclick="tinymce.init({ selector:'textarea', plugins:'code' })">Init</button>
    <button onclick="tinyMCE.editors[0].save()">Save</button>
    <button onclick="tinyMCE.editors[0].remove()">Remove</button><br />
    <textarea id="editorArea" style="width: 100%;" rows="15"></textarea>
    <script>
    var htmlElements = `
        <html xmlns:o="urn:schema-microsoft-com:office:office">
        <head>
            <style>
                body{font-family: sans-serif; font-size: 55pt;}
            </style>
        </head>
        <body>
            <div>
                <span style="font-size: 7pt">Here is some text.</span>
            </div>
        </body>
        </html>`;
    document.getElementById("editorArea").innerHTML = htmlElements;
    </script>
</body>
</html>


初始化
拯救
删除

变量HtmleElements=`
正文{字体系列：无衬线；字体大小：55pt；}
这里有一些文字。
`;
document.getElementById（“editorArea”）.innerHTML=htmlElements；
我不知道这是否是最好的方法。但这就是我在我的一个项目中所做的。我的用例是在浏览器上呈现标记文本或html，它应该是可编辑的。我用在这种情况下，你可以自由选择任何图书馆




变量HtmleElements=`
正文{字体系列：无衬线；字体大小：55pt；}
这里是一些可编辑的文本。
`;
var converter=新决战。converter（），
text=htmlElements，
输出=converter.makeHtml（文本）；
document.getElementById（“editorArea”）.innerHTML=输出；
当查看内容的代码视图时，fullpage
插件允许用户使用整个HTML文档：

然后保存内容时，您应该返回整个文档。
您希望用户能够编辑标题和正文内容，还是仅编辑正文因为你总是可以提取正文，把它放在WYSIWYG编辑器中，然后用HTML的其余部分将它包装回去。有了这个案例，这可能有点困难。问题是外出消息包含特定的office HTML代码。这样，我必须首先提取正文（使用另一种方法，因为每条消息的标题可能不同），然后将它们粘在一起。同时，头部包含的样式等对于一些高级用户可能很重要。这是我需要做的一件相当愚蠢的事情。解决方案是/是使用fullpage
插件，它可以轻松地为高级用户启用高级视图，其他人只看到身体。这是一个有趣的想法，但并不能真正解决我的问题，因为我已经有了用户应该编辑的HTML。使用这种方法，我首先需要将HTML转换为Markdown，然后再转换为HTML以使其可编辑。但在其他一些情况下，这可能会很有趣。不，您不需要将html转换为标记，这个库同时理解html和标记。在我的例子中，我把html作为输入，而不是减价。事实上，我是在稍晚的时候偶然发现的，但我自己并没有写一个答案。到目前为止，它真的很有魅力。