TinyMCE 编辑器在 Handlebar Script 文件和 jquery 中使用时无法在 chrome、mozilla firefox 中工作答案

【问题标题】：TinyMCE editor not working in chrome, mozilla firefox when used in Handlebar Script files along with jqueryTinyMCE 编辑器在 Handlebar Script 文件和 jquery 中使用时无法在 chrome、mozilla firefox 中工作
【发布时间】：2013-06-13 07:06:34
【问题描述】：

我正在使用最新版本的 TinyMCE 4.0b3。 jQuery 版本是 1.9.1。以下是我的代码：

<script type="text/javascript" src="tinymce/tinymce.min.js"></script>
<script type="text/javascript">
  tinymce.init({
  selector: "textarea",
  theme: "modern",
  plugins: [
  "advlist autolink lists link image charmap print preview hr anchor pagebreak",
  "searchreplace wordcount visualblocks visualchars code fullscreen",
  "insertdatetime media nonbreaking save table contextmenu directionality",
  "emoticons template paste textcolor"
  ],
  toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
  toolbar2: "print preview media | forecolor backcolor emoticons",
  image_advtab: true,
  templates: [
   {title: 'Test template 1', content: 'Test 1'},
   {title: 'Test template 2', content: 'Test 2'}
  ],
 });
 </script>

 <textarea name="content" rows="5" cols="100"/>

以上代码在 IE9 标准模式下完美运行。但不能在IE9兼容模式下，mozilla firefox，google chrome，safari。我在浏览器控制台中没有看到任何错误。

我看到很多关于这个的帖子，应该在 tinymce 之后加载 jquery 来解决这个问题。但在我们的应用程序中，我们不能这样做，因为 jquery 是在主页本身加载的。

我尝试使用 $(document).ready 函数但没有用。我不确定它是否是 jquery 问题。

编辑：上面的代码在所有浏览器的纯 html 文件中都可以正常工作。在我们的应用程序中，我们使用 hbs（车把脚本）文件。当试图将该代码放入 hbs 文件时，它不起作用。

有没有其他方法可以解决这个问题。

【问题讨论】：

为我工作（在 Chrome 中）：jsfiddle.net/akkRU
@SebastianG：在所有浏览器中以纯 html 格式使用时，它适用于我。在我们的应用程序中，我们使用的是 hbs 文件。当试图将该代码放入 hbs 文件时，它不起作用。
啊，hbs 文件...你能更精确一点吗？没听过这个词。
@SebastianG：hbs 文件：车把脚本文件。请看我的编辑
如果它在正常环境下工作，那么您的 HBS 文件似乎有问题。你应该修改你的问题的标签和标题，这真的很混乱。

标签： jquery handlebars.js tinymce-4

【解决方案1】：

在我们的应用程序中，我们也使用了 require js。所以我们需要进行 shims 配置以使其工作。

requirejs.config({
baseUrl: "js",
paths: {
    tinyMCE: 'libs/tinymce/tiny_mce'
},
shim: {
    tinyMCE: {
        exports: 'tinyMCE',
        init: function () {
            this.tinyMCE.DOM.events.domLoaded = true;
            return this.tinyMCE;
        }
    }
}
});

参考：How can I implement TinyMCE with Require.js?

【讨论】：

【解决方案2】：

尽量把脚本代码放在body标签之后。

【讨论】：