如何在父级 window 的子级上启用 tinymce

Question

我正在开发一个 Web 应用程序，它从 Java servlet 生成所有 HTML 代码，我需要生成 HTML 将弹出另一个 window 的内容一个 tinymce 框架。问题似乎出在 tinymce 的选择器中，它无法识别子 window 中的元素。我已将我的脚本缩减为以下 javascript 代码：

var childWindow = window.open('', '', 'width=800, height=600');
childWindow.document.write('<html><head></head><body><textarea></textarea></body></html>');
var tinymceSRCScript = childWindow.document.createElement('script');
tinymceSRCScript.src = 'http://cdn.tinymce.com/4/tinymce.min.js';
childWindow.document.getElementsByTagName('head')[0].appendChild(tinymceSRCScript);

function setTinymceOnChild() {
  if (!childWindow.tinymce) {
    setTimeout(setTinymceOnChild, 100);
  } else {
    childWindow.tinymce.init({selector:"textarea"}); 
    childWindow.alert('it went through')
  }
}

childWindow.addEventListener('load', setTinymceOnChild(), true);

我正在打开子 window，我正在设置一个基本的 HTML 结构，里面有一个 textarea 并设置 tinymce public src。在主要 window 中，我正在检查子 window 是否已初始化 tinymce，然后尝试将其设置为任何 textarea 元素。即使不提示错误，子window里面的textarea也不会加载

我仅限于纯javascript（无JQuery）和IE 11.

在此先感谢您的帮助或建议。

Answer 1

你可以试试这个：

<script>
var childWindow = window.open('#', 'E-mail plugin', 'width=800, height=600');
childWindow.firstTime = true;
childWindow.document.write('<html><head>'
    + '</head><body><textarea></textarea>'
    + '<scr' 
    + 'ipt id="tinymcescript">'
    + '</scr' 
    + 'ipt>'
    + '<scr' 
    + 'ipt>var setTinymceOnChild = function(){if (!tinymce || !tinymce.init) {'
    + 'setTimeout(setTinymceOnChild, 100);}else{'
    + 'tinymce.init({selector:"textarea",'
    + 'height: 400,'
    + 'plugins: ['
    + '"advlist autolink lists link image charmap print preview anchor",'
    + '"searchreplace visualblocks code fullscreen",'
    + '"insertdatetime media table contextmenu paste code"],'
    + 'toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"'
    +'});'
    + 'if(window.firstTime == true){window.location.reload();window.firstTime=false;}'
    + '}}; document.getElementById("tinymcescript").onload = function(){setTinymceOnChild();}; '
    + ' document.getElementById("tinymcescript").onerror=function(){alert("err")};'
    +'document.getElementById("tinymcescript").src="http://cdn.tinymce.com/4/tinymce.min.js"; </scr' + 'ipt></body></html>');
</script>

要点是： - 代码是 child window 的一部分，所以你不需要关注 child/parent 引用 - 由于某种原因，它在第一次加载时不起作用。 tinymce 没有在加载时显示，但随后出现在刷新弹出窗口时。因此，我在代码中添加了一个刷新 - 代码看起来很糟糕，需要更好地格式化以便于维护 - tinymce javascript 的加载基于此处的示例：https://developer.mozilla.org/en/docs/Web/API/HTMLScriptElement#Dynamically_importing_scripts

如何在父级 window 的子级上启用 tinymce

How to enable tinymce on child window from parent

javascript

tinymce