Meteor - Ckeditor 集成

Question

我不确定 Meteor 加载项目的方式或它处理 jquery 的方式是否发生了变化，但我在启动 ckeditor 时遇到了很多麻烦。

主模板（Iron-router）：

<template name="layout">
<head>
    <script type="text/javascript" src="js/ckeditor/ckeditor.js"></script>
    <script type="text/javascript" src="js/ckeditor/adapters/jquery.js"></script>
</head>
.....
</template>

独立编辑器模板：

<template name="editor">
    <div class="editor_container">
        <textarea class="editor"></textarea>
    </div>
</template>

位于public/js/ckeditor 的Ckeditor，任何时候我尝试使用Template.editor.rendered() 技术，甚至只是尝试在控制台中输入$('.editor').ckeditor();，我都会收到以下错误：

$('.editor').ckeditor();
VM48825:2 Uncaught TypeError: undefined is not a function

有什么想法吗？

Answer 1

您可以像这样使用 IRLibLoader 从 iron:router 到 onBeforeAction。

Router.route('/editor', {
  name: 'editor',
  template: 'layout',
  onBeforeAction: function () {
    var ckEditor = IRLibLoader.load('/js/ckeditor/ckeditor.js');
    var adapter = IRLibLoader.load('/js/ckeditor/adapters/jquery.js');
    if(ckEditor.ready() && adapter.ready()){
      console.log('The 2 JS just finish load');
      this.next(); // Render the editor page

      if(Meteor.isClient){
        Template.editor.rendered = function(){
          $('.editor').ckeditor();
          console.log("loading coeditor when template fully rendered");
        }
      }
    }
  }
});

主layout上的替代品你可以用这个。

<head>
    <script type="text/javascript" src="js/ckeditor/ckeditor.js"></script>
    <script type="text/javascript" src="js/ckeditor/adapters/jquery.js"></script>
</head>
<template name="layout">
 {{> yield}}
</template>

<template name="editor">
    <div class="editor_container">
        <textarea class="editor"></textarea>
    </div>
</template>

并做同样的渲染功能

Template.editor.rendered = function(){
   $('.editor').ckeditor();

   //or make a little delay (1sec) 
   Meteor.setTiemout(function(){
    $('.editor').ckeditor();
   },100)
 }

Answer 2

你的代码有几个问题：

• 您不能将<head> 部分放在另一个模板中，它必须在所有模板之外完成。
• 您的 JS 文件的路径已损坏，您必须在它们前面加上一个斜杠以引用公共目录中的文件。
• 在<head> 部分加载脚本不是一个好主意，因为它们会在您的应用首次为每个用户加载时加载，即使他们从未使用过编辑器。

这是一个解决方案，我们在渲染编辑器模板时使用 jQuery Promise 异步加载每个脚本，然后才初始化 CKEditor。

Template.editor.rendered=function(){
  var template=this;
  $.when(
    $.getScript("/js/ckeditor/ckeditor.js"),
    $.getScript("/js/ckeditor/adapters/jquery.js")
  ).done(function(){
    template.$(".editor").ckeditor();
  });
};

Answer 3

尝试将<head> 部分从布局模板中删除。读到这里，我相信<head> 部分被特别对待为流星（参见：http://docs.meteor.com/#/full/structuringyourapp），并且它位于模板中可能会导致 JS 实际上没有被加载。不过只是猜测。

<head>
    <script type="text/javascript" src="js/ckeditor/ckeditor.js"></script>
    <script type="text/javascript" src="js/ckeditor/adapters/jquery.js"></script>
</head>
<template name="layout">
.....
</template>