从tinymce获取数据答案

【问题标题】：Get data from tinymce从tinymce获取数据
【发布时间】：2013-07-29 00:35:57
【问题描述】：

您好，在确认选项卡上的向导中，我尝试从 tinymce 编辑器获取内容。但它不起作用。使用普通的文本区域，它可以正常工作。

普通Textarea示例：

<div class="control-group">
<label class="control-label">MyValue<span class="required">*</span></label>
<div class="controls">
<textarea class="span12 m-wrap" style="max-width:100%;" name="MyValue" rows="7"></textarea>
</div></div>

在确认页面上显示来自 textarea 的文本的代码：

<div class="control-group">
<label class="control-label">MyValue</label>
<div class="controls">
<span class="text display-value" data-display="MyValue"></span>
</div>
</div>

我的 JavaScript 代码：

        var displayConfirm = function() {
            $('.display-value', form).each(function(){
                var input = $('[name="'+$(this).attr("data-display")+'"]', form);
                if (input.is(":text") || input.is("textarea")) {
                    $(this).html(input.val());
                } else if (input.is("select")) {
                    $(this).html(input.find('option:selected').text());
                } else if (input.is(":radio") && input.is(":checked")) {
                    $(this).html(input.attr("data-title"));
                } else if ($(this).attr("data-display") == 'htmlinhalt') {
                    $(this).html($('[name="htmlinhalt"]', form).val());
                } 
            });
        }

但为什么它不适用于 tinymce 文本区域？我想我必须直接从tinymce而不是textarea获取内容，但是如何？

【问题讨论】：

在开始任何提交或验证之前您是否尝试过tinyMCE.triggerSave();？
不，我仍然不尝试。信息：tinymce 代码不在 self js 文件中，而不是我的 displayConfirm javascript 代码。 @MahanGM 如果我把它写在我的 javascript 代码之上。什么都没发生。或者我必须在哪里集成它？
您应该知道一件事，当您使用 TinyMCE 进行编辑时，它不会从您提供的 textarea 中使用，而是使用其内部 html 框架标签来保存和显示数据。您必须进行更新，例如保存触发器才能将数据放入该文本区域。
@MahanGM 所以我无法使用 javascript 在向导的 3 选项卡上显示内容？ ---- 我也发现 var ed = tinymce.activeEditor; // 获取编辑器实例 ed.save(); //将编辑器内容保存到textarea --- 但是如何集成呢？

标签： php javascript tinymce

【解决方案1】：

试试

tinymce.get('your_textarea_id').getContent();

【讨论】：

我必须在哪里整合它？
在代码的 texarea 部分，请务必使用正确的 textare-ID
你的意思是在我的 textarea 部分还是在输出中？
好吧，你的意思是：else if ($(this).attr("data-display") == 'htmlinhalt') {tinyMCE.get('MyID').getContent();} -- 还是什么都没有
哦，我明白了...我忘记了一些东西 :-) $(this).html(tinymce.get('htmlinhalt').getContent());好的，如果我首先这样做，我会得到价值。如果我在 else if ($(this).attr("data-display") == 'htmlinhalt') {... 它不起作用...任何想法？也许我这里也有错误？

【解决方案2】：

我遇到了完全相同的问题，之前的答案也对我不起作用。我的问题是我的 textarea 没有 id。给它一个 id 后，我可以通过之前的答案轻松获取内容（尽管使用大写的“MCE”）：

tinyMCE.get('your_textarea_id').getContent();

所以你想在你的 if 语句中添加一个额外的行。如果您为 textarea 提供与其名称相同的 id，那么这应该可以工作：

   var displayConfirm = function() {
        $('.display-value', form).each(function(){
            var input = $('[name="'+$(this).attr("data-display")+'"]', form);
            if (input.is(":text")) {
                $(this).html(input.val());
            } else if (input.is("textarea")) {
                $(this).html(tinyMCE.get($(this).attr("data-display")).getContent());
            } else if (input.is("select")) {
                $(this).html(input.find('option:selected').text());
            } else if (input.is(":radio") && input.is(":checked")) {
                $(this).html(input.attr("data-title"));
            } else if ($(this).attr("data-display") == 'htmlinhalt') {
                $(this).html($('[name="htmlinhalt"]', form).val());
            } 
        });
    }

【讨论】：

【解决方案3】：

您可以获取原始内容（带有 html 标签），或仅获取文本（html 条纹）。函数 getContent() 返回的默认格式是原始格式。

<textarea id="MyValue" name="MyValue"></textarea>
<div>
    <a href="javascript:alert(tinymce.EditorManager.get('MyValue').getContent({format : 'raw'}));">[getRawContents]</a>
    <a href="javascript:alert(tinymce.EditorManager.get('MyValue').getContent({format : 'text'}));">[getTextContents]</a>
    <a href="javascript:alert(tinymce.EditorManager.get('MyValue').getContent());">[getContents]</a>
</div>

我使用 MyValue 因为您在问题中使用。如果需要，更改 your_textarea_id。

API 3 中有关 tinyMCE 3.x 的更多信息有关 tinyMCE 4.x 的更多信息，请访问 API 4

【讨论】：