Meteor - Ckeditor Integration

Meteor - Ckeditor Integration

本文关键字：Integration Ckeditor Meteor      更新时间：2023-09-26

我不确定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

有什么想法吗？

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

您可以像这样将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)
 }

您的代码有几个问题：

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

这里有一个解决方案，我们在呈现编辑器模板时使用jQuerypromise异步加载每个脚本，然后初始化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();
  });
};
相关文章：