Javascript 访问iframe内的TinyMCE电流输入

我正在使用TinyMCE，并试图将用户当前键入的内容输出到TinyMCE编辑器下方的div中。我想让用户看到那里的帖子呈现的样子

我使用的脚本如下所示：

<script type="text/javascript">
    $(function () {
        $('#tinymce').keyup(function () {
            $('#myDIVTag').html('<b>' + $(this).val() + '</b>');
        });
    });
</script>

$（函数（）{
$（'#tinymce'）.keyup（函数（）{
$（'#myDIVTag'）.html（'+$（this.val（）+''）；
});
});

我已在视图中的begin表单中放置了相应的div：

    <div id="myDIVTag">

    </div>

---

但是，在我键入时没有呈现任何内容

没有小提琴，这会让事情变得更难——但在评论中指出，TinyMCE编辑器本身隐藏在

元素中。这似乎是问题的根源

为了能够使用JavaScript访问

iframe

元素中的任何内容，我们必须记住跨域策略。简而言之-如果iframe将

src

属性设置为另一个域，并且此源下的网站不明确允许我们访问

iframe

中的内容-我们将无法访问，到此为止。更多：

幸运的是，我很确定这不会有任何问题，除非我们的

iframe

中的TinyMCE从另一个域获得服务

考虑到所有这些，这里有一个片段可以实现这个目的。请根据您的需要更改选择器（我用注释指出）：

JS:

JSFIDLE:

---

基本上：我们绑定到TinyMCE编辑器“change”事件，每当它被触发时，我们就会得到输入值（

var newVal=…

），并将其放入单独的div（

.text mirror

）。

非常感谢Fiddle；快速猜测是，TinyMCE编辑器本身隐藏在

元素中。因此，要让它发挥作用，还需要更多的努力。是的，我知道iframe会让它变得很难。对不起，现在没有小提琴。我怎样才能做到这一点？我不知道我能不能摆弄蒂尼姆丝；这不是正确的方法，因为当用户在WYSIWYG模式下键入内容时，他们没有在文本区域中键入内容。正确的方法是在tinyMCE API本身中使用事件处理和getData（）方法。API公开了所有需要的内容needed@charlietfl你能把答案贴在上面吗example@KirstyWhite我已经有一段时间没有使用tinyMCE了，我真的不想浏览文档……但现在开始访问

change

，然后搜索

getData

或

getContent（）

或他们使用的任何名称use@charlietfl当前位置我与TinyMCE没有任何亲密关系，这也许就是为什么我甚至没有考虑这种解决方案的原因。在谷歌搜索了一段时间后，我用你的方法更新了答案，包括小提琴演示——谢谢你的建议！实际上，出于我的目的，您最初的答案

$（'iframe'）.contents（）.find（'textarea'）

是一个救命稻草。做了这个把戏，然后又做了一些+1.

$('iframe') // iframe element
  .contents()
  .find('textarea') // textarea/other input *within* iframe
  .keyup(function () {
    $('#myDIVTag').html('<b>' + $(this).val() + '</b>');
  });

<textarea id="tinymce-textarea"></textarea>
<div class="text-mirror"></div>

tinymce.init({
  selector: "#tinymce-textarea",
  setup: function (editor) {
    editor.on('change', function (e) {
      var newVal = tinymce.get('tinymce-textarea').getContent();
      $('.text-mirror').html(newVal);
    });
  }
});