一次性使用从多个 TinyMCE 4 实例获取内容？答案

【问题标题】：Use getContent from multiple TinyMCE4 instances in one go?一次性使用从多个 TinyMCE 4 实例获取内容？
【发布时间】：2014-11-04 10:09:38
【问题描述】：

我需要从周围的 DIV 中获取 HTML，同时从带有内联 tinyMCE4 的 多个 DIV 中获取正确的（原始？）HTML。

我已经设法通过使用 :

获取所有 HTML

jQuery("#ForSaving").html(jQuery(".Editable").html());

但这会从 tinyMCE 获取错误的 HTML。 我得到的不是 <iframe> 的输出，而是 <img class="mce-object mce-object-iframe" 等。

我曾尝试使用 tinyMCE 的 getContent()，但未能一次性从所有 tinyMCE 实例中获得正确的结果。

对我来说重要的是，我不仅从 tinyMCE DIV 中获取内容，而且还从周围的 DIV 和代码中获取内容。我需要它来进一步处理 HTML。

这是我的纯 HTML 示例：

<html>
<head>        
    <script type="text/javascript">
        tinymce.init({
            selector: "div.tinyeditor",
            inline: true,
            theme: "modern",
    </script>                
</head>
<body>
    <div id="ForSaving"></div>

    <div id="Editable">
        <div class="contentwrap" id="area_(randnumb)">
            <div class="somediv">Some html</div>
            <div class="tinyeditor"><p>The HTML inside tinyMCE</p></div>
        </div>

        <div class="contentwrap" id="area_(randnumb)">
            <div class="somediv">Some html</div>
            <div class="tinyeditor"><p>The HTML inside tinyMCE</p></div>
        </div>

        <div class="contentwrap" id="area_(randnumb)">
            <div class="somediv">Some html</div>
            <div class="tinyeditor"><p>The HTML inside tinyMCE</p></div>
        </div>

        <div class="contentwrap" id="area_(randnumb)">
            <div class="somediv">Some html</div>
            <div class="tinyeditor"><p>The HTML inside tinyMCE</p></div>
        </div>
    </div> <!-- end of div#editable -->
</body>
</html>

我需要从 DIV #Editable 中获取所有 HTML 内容， 但使用来自 tinyMCE 实例的（原始？）正确 HTML 输出。希望马上。

我需要一个如下所示的 HTML：

           <div class="contentwrap" id="area_(randnumb)">
                    <div class="somediv">Some html</div>
                    <div class="tinyeditor">(THE REAL HTML FROM tinyMCE)</div>
           </div>

           <div class="contentwrap" id="area_(randnumb)">
                    <div class="somediv">Some html</div>
                    <div class="tinyeditor">(THE REAL HTML FROM tinyMCE)</div>
           </div>

           <div class="contentwrap" id="area_(randnumb)">
                    <div class="somediv">Some html</div>
                    <div class="tinyeditor">(THE REAL HTML FROM tinyMCE)</div>
           </div>

           <div class="contentwrap" id="area_(randnumb)">
                    <div class="somediv">Some html</div>
                    <div class="tinyeditor">(THE REAL HTML FROM tinyMCE)</div>
           </div>
</div>

有简单的方法吗？

【问题讨论】：

您的“我需要获取”-html 中有许多额外的</div>s。
不，那是我需要的 HTML。 :-) 如果您仔细观察，您会发现这是 DIV#Editable 中的所有 HTML。我只需要它也能从所有 tinyMCE DIV 中获取真正的 HTML 内容。
对不起，现在明白你的意思了。你是对的:-)

标签： javascript jquery tinymce tinymce-4

【解决方案1】：

我通过做一些改变解决了这个问题：

1) 我使用 jquery each() 在每个 div.contentwrap 中运行一个循环

2) 我首先得到了 contentwrap 的真实 ID

3) 然后构建使用 var contentwrapstart = (并在此处使用 HTML + ID)

<div class="contentwrap" id="area_(randnumb)">

4) 然后获取该特定 tinyeditor 的 tinyMCE 内容。（也必须向该 div 添加一个 ID）

5) 然后构建

6) 将每个添加到 var 结果 +=（此处的值）

7) 每个人都这样做

8) 存储的 var 结果 = 循环外

9) 稍后从 var 结果中获得了我需要的 HTML。

而且效果很好:-)

【讨论】：