Meteor

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>

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

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

有什么想法吗？

Answer 1

尝试从布局模板中删除 <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>

Answer 2

您的代码有几个问题：

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

这是一个解决方案，我们在呈现编辑器模板时使用 jQuery 承诺异步加载每个脚本，然后才初始化 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

您可以像这样使用 iron:router 中的 IRLibLoader 到 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)
 }

Meteor - Ckeditor 集成

Meteor - Ckeditor Integration

javascript

jquery

ckeditor