在 iframe 中访问 TinyMCE 当前输入

Question

我正在使用 TinyMCE，我正在尝试将用户当前输入的内容输出到 TinyMCE 编辑器下方的 div。我希望用户看到 post 呈现的样子。

我使用的脚本是这样的：

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

我在视图的开始表单中放置了相应的 div：

    <div id="myDIVTag">

    </div>

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

Answer 1

没有 fiddle，这让事情变得更难了 - 但在评论中指出 TinyMCE 编辑器本身隐藏在 <iframe> 元素中。这似乎是问题的根源。

为了能够使用 JavaScript 访问 iframe 元素中的 任何内容 ，我们必须记住跨域策略。简而言之 - 如果 iframe 将 src 属性设置为另一个域，并且此来源下的网站没有明确允许我们在 iframe 中访问其内容 - 我们将无法做到，结束故事。更多：http://blog.cakemail.com/the-iframe-cross-domain-policy-problem/ .

幸运的是，我很确定这里不会有任何问题 - 除非我们 iframe 中的 TinyMCE 从另一个域获得服务。

考虑到所有这些，下面是应该可以解决问题的代码段。请根据您的需要更改选择器（我在评论中指出了它们）：

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

编辑：

评论中建议（感谢@charlietfl！）解决这个问题的正确方法是使用 TinyMCE API 事件，而不是 iframe 中的 textarea 元素的通用绑定=].考虑到这一点，这是一个快速的答案：

HTML:

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

JS:

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

JSFiddle：http://jsfiddle.net/c1zncmt8/1/ .

基本上：我们绑定到 TinyMCE 编辑器 "change" 事件，每当它被触发时，我们都会获取输入值 (var newVal = ...) 并将其放入单独的 div ( .text-mirror).

在 iframe 中访问 TinyMCE 当前输入

Access TinyMCE current input within iframe

javascript

jquery

html

tinymce