如何在Meteor JS中集成TinyMCE和CKEditor



我正试图在我的项目中使用CKEditor或TinyMCE编辑器。所以我把TinyMCE文件夹放在流星公用文件夹里,也放

<head>
<script type="text/javascript" src="<your installation path>/tinymce/tinymce.min.js"></script>
<script type="text/javascript">
    tinymce.init({
        selector: "textarea"
    });
</script>

在模板头标记中。但是收到以下错误。资源被解释为脚本,但使用MIME类型text/html/"http://localhost:3000/%3Cyour%20installation%20path%3E/tinymce/tinymce.min.js". (index):97传输未捕获的语法错误:意外的标记<tinymce.min.js:1未捕获引用错误:未定义tinymce

如何解决此问题?与CKEditor相同。有没有其他丰富的编辑器,我可以在流星JS中使用?

首先,您需要将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元素进行全局引用。

将文件放在/client/compatibility中,而不是/public文件夹。然后在你想要使用的模板中初始化它。

Template.editor.rendered = function() {
  tinymce.init({
    selector: 'textarea'
  });
};

这是搜索wysiwyg:的唯一结果

https://github.com/mcrider/meteor-bootstrap-wysiwyg

meteor add mcrider:bootstrap-wysiwyg

看起来比CKEditor或TinyMCE简单一点,但也许这对你的项目来说没问题。

最新更新