Question

我不确定Meteor加载项目的方式或处理jquery的方式是否发生了变化，但是我很难让ckeditor出现。

主要模板（铁路由器）：

<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>部分被特别处理为meteor（参见：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

您可以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)
 }

并执行相同的渲染功能

{{1}}

Answer 3

您的代码存在一些问题：

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

这是一个解决方案，我们在渲染编辑器模板时使用jQuery promises异步加载每个脚本，然后才初始化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();
  });
};

流星 - Ckeditor集成

3 个答案: