Question

我试图在流星应用程序中使用CKEditor：我的尝试：

将CKEditor文件夹与公共文件夹中的所有文件（js，css，lang，plugins和skin）放在一起，在标题中包含对javascript文件（ckeditor.js）的引用，并使用适当的类textarea元素。失败，因为编辑器仅在textarea位于正文中时才有效（在任何模板中，textarea控件保持不变）。
将javascript文件（ckeditor.js，config.js，styles.js）放在client / lib / compatibility文件夹中，将其余文件放在公用文件夹中。这次应用程序无法找到文件（皮肤，插件，...），因为正在寻找localhost：3000 / client / lib / compatibility / ckeditor / ...

有人在此之前进行此集成吗？

Answer 1

我得到了这个工作，并希望为未来的访问者发布一个解决方案。首先，您需要将CKEDITOR构建下载中的所有内容放在公用文件夹中。 CKEDITOR提供各种各样的东西，并根据相关目录引用所有内容。

您的公用文件夹应该有一个名为ckeditor的目录，它应该包含以下文件和文件夹：

 adapters
 lang
 plugins
 skins
 ckeditor.js
 config.js
 contents.css
 styles.js

在您的主布局文件中引用CKEDITOR，如下所示：

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

在你的模板中：

 <template name="yourTemplate">
   <textarea id="content" name="content"></textarea>
 </template>

最后，在模板的渲染功能中：

 Template.yourTemplate.rendered = function() {
   $('#content').ckeditor();
 };

通常情况下，您会说this.$('#content').ckeditor()，但由于CKEDITOR位于您的公共文件夹中，因此无法正常工作。因此，您需要对#content元素的全局引用。

Answer 2

只将您在<head>中包含的CKEditor文件放在 client / lib 的文件夹中，即 client / lib / ckeditor 。这就是将它们提供给客户端所需要做的全部内容：不需要在任何<head>或类似内容中引用任何内容。 Meteor在客户端中找到的所有.js和.css文件会自动连接并提供给客户端。这适用于任何客户端库，而不仅仅是CKEditor。

您需要做的下一件事是在使用它的页面上初始化CKEditor。假设您有一个名为 edit 的模板，其中textarea的ID为编辑器。并说你也在加载CKEditor jQuery Adapter。在客户端中的JavaScript文件中，放置：

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

这里的关键是初始化发生在textarea 编辑器存在并准备就绪之后，因为此代码在编辑模板完全呈现后执行。只要重新呈现编辑，它就会被重新执行。包含任何其他客户端库并进行类似的初始化。

编辑通过.css引用的图像文件是Meteor的痛苦。处理它们的“正确”方法是将它们全部置于 public 文件夹下，在本例中为 public / ckeditor 。然后编辑CKEditor .css文件，以便对图像URL的所有引用都指向根目录下的新文件夹，即 /ckeditor/image1.png 等（忽略“公共”）。

在流星中集成CKEditor

2 个答案: