Question

我正在开发一个从Java servlet生成所有HTML代码的Web应用程序，我需要生成HTML内容，该内容将弹出另一个带有tinymce框架的窗口。这个问题似乎出现在了一个选择器中，这个选择器不会识别子窗口中的元素。我已将脚本缩减为以下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);

我正在打开子窗口，我正在设置一个带有textarea的基本HTML结构并设置tinymce public src。在主窗口中，我检查子窗口是否已初始化tinymce，然后尝试将其设置为任何textarea元素。即使没有提示错误，子窗口内的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>

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

如何从父窗口启用子窗口上的tinymce

1 个答案: