javascript - 使用 javascript 动态更改 TinyMCE 编辑器的背景

Question

我有一个评论字段和一个输入文本区域，它是一个tinymce编辑器。我有一个名为 admin only 的复选框，如果单击该复选框，tinymce 的主体应将颜色更改为粉红色，如果未选中，则应为白色。我使用了 javascript 并使用 onclick 方法来动态更改它。

这是html代码:

<table>
    <tr>
        <td><span>New Comment :</span></td>
    </tr>
    <tr>
        <textarea></textarea>
    </tr>
</table>
<div>
    <div align="left">
        <input name="cbAdmin" type="checkbox" id="cbAdmin" value="Admin" onClick="SetCommentColor()"/>
        <label>Administrator Only</label>
    </div>

这是使用的 JavaScript :

function SetCommentColor() {
    if (document.form2.cbAdmin.checked == true) { 
        color = 'pink';
    } else {
        color = 'white';
    }
    var t = tinyMCE.getInstanceById('eComment');
    t.getBody().style.backgroundColor = color;
}

这对我不起作用。谁能帮我解决这个问题吗？

Answer 1

这是代码的最终版本。

<script type="application/javascript">
  tinymce.init({
    selector: "textarea",
    plugins: [
      "advlist autolink lists link image charmap print preview anchor",
      "searchreplace visualblocks code fullscreen",
      "insertdatetime media table contextmenu paste"
    ],
    toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
  });

  function SetCommentColor() {
    if (document.getElementById('cbAdmin').checked == true) {
      color = 'pink';
    } else {
      color = 'red';
    }
    //alert(tinyMCE.getInstanceById('eComment'));
    var t = tinyMCE.get(0);
    t.getBody().style.backgroundColor = color;
  }

</script>

<table>
  <tr>
    <td><span>New Comment :</span></td>
  </tr>
  <tr>
    <textarea id="eComment" name="eComment"></textarea>
  </tr>
</table>
<div>
  <div align="left">
    <input name="cbAdmin" type="checkbox" id="cbAdmin" value="Admin" onClick="SetCommentColor()" />
    <label>Administrator Only</label>
    <table>

问题是缺少 Id 并且不支持 getInstanceById。

您可以在此处运行此示例 http://fiddle.tinymce.com/