使用 jQuery 在 TinyMCE 编辑器中设置值答案

【问题标题】：Set Value Inside a TinyMCE Editor using jQuery使用 jQuery 在 TinyMCE 编辑器中设置值
【发布时间】：2012-01-24 10:53:26
【问题描述】：

您好，我需要在 tinyMCE 编辑器中设置预定义的内容。下面是我的html和jquery。

<script type="text/javascript">
    tinyMCE.init( {
        mode : "exact" ,
        elements : "country"
    });
</script>
<script type="text/javascript">
    $(function() {
        $("#lang").change(function() {
            var s = $(this).val(); alert(s);
            $("#country").val(s);
        })
    })
</script>


<select id="lang">
        <option value="">Please Select country</option>
        <option value="us">US</option>
        <option value="es">SPAIN</option>
        <option value="jp">JAPAN</option>
    </select><br /><br />
    <textarea id="country" cols="10" rows="5"></textarea>

该脚本适用于普通文本区域，但不适用于 tinyMCE。这有什么我做错了吗。

谢谢

【问题讨论】：

我很确定 tiny mce 会呈现一个 sudo 元素供用户输入，因此如果您更改国家/地区的值，它不会更改输出。但是，tinymce 有一个特殊的插件可以与 jquery tinymce.com/tryit/jquery_plugin.php 交互

标签： javascript jquery tinymce textarea

【解决方案1】：

我认为你可以做到：

$(function() {
    $("#lang").change(function() {
        var s = $(this).val(); 
        alert(s);
        tinyMCE.activeEditor.setContent(s);
    });
});

【讨论】：

对于特定的tinyMCE实例，也可以使用tinyMCE.getInstanceById('textarea_id').setContent(s);
效果很好。我将它用作在 tinyMCE 中设置的 ajax 响应。
使用最新的 TinyMCE 版本 (5)，您需要此代码：tinymce.get('elementid').setContent(s); 您可以在 API 文档中了解更多信息：tiny.cloud/docs/api/tinymce/tinymce.editor/#setcontent

【解决方案2】：

仅对我而言，代码有效：

tinyMCE.get('my_textarea_id').setContent(my_value_to_set);

也许这是来自新版本 tinyMCE 的代码！（微型 MCE Api 3）

【讨论】：

【解决方案3】：

这对我有用

$("#description").val(content);

【讨论】：

【解决方案4】：

你也可以试试这个：
如果不替换tinymce中的全部内容，请将光标设置在tinymce中要添加值的位置

$(document).on('change','#lang', function() {
     var Getname = $(this).val();
     if (Getname != '') {
        //tinyMCE.activeEditor.setContent(s);   // This is for replace all content
        tinyMCE.activeEditor.execCommand('mceInsertContent',false,Getname); // Append new value where your Cursor
        //console.log(Getname)
    }
 });

我正在使用此代码的新版本 TinyMCE 5

【讨论】：

【解决方案5】：

在ajax调用之前，需要调用触发器

tinyMCE.trigge*emphasized text*rSave(true, true);

完整语法

  tinyMCE.triggerSave(true, true);
        $.ajax({
          data: $('#userForm').serialize(),

          url: "{{ route('versions.store') }}",
          type: "POST",
          dataType: 'json',
          success: function (data) {
          }
          });

【讨论】：