All geek questions in one place

How to integrate TinyMCE and CKEditor into Meteor JS?

I am trying to use the CKEditor or TinyMCE editor in my project. So I put the TinyMCE folder in the meteor shared folder, also put

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

in the title tag of the template. However, getting the following error. The resource is interpreted as Script, but passed with text like MIME / html: "http://localhost:3000/%3Cyour%20installation%20path%3E/tinymce/tinymce.min.js". (index):97 "http://localhost:3000/%3Cyour%20installation%20path%3E/tinymce/tinymce.min.js". (index):97 Uncaught SyntaxError: Unexpected token <tinymce.min.js: 1 Uncaught ReferenceError: tinymce not defined

How to fix this problem? The same applies to CKEditor. Is there any other rich editor that I can use in Meteor JS?

+5
source share
3 answers

First you need to put everything from loading the CKEDITOR assembly into a shared folder. CKEDITOR comes with all things and refers to everything based on relative directories.

Your shared folder should have a directory named ckeditor, which should contain the following files and folders:

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

In your main file, CKEDITOR links like this:

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

In your template:

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

Finally, in the displayed function of your template:

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

You will usually say this.$('#content').ckeditor() , but this does not work because CKEDITOR is in your shared folder. As a result, you will need a global reference to the #content element.

+7
source

Instead of the /public folder, put your files in /client/compatibility . Then initialize it in the template you want to use.

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

This was the only wysiwyg search result:

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

 meteor add mcrider:bootstrap-wysiwyg

It looks a bit simpler than CKEditor or TinyMCE, but maybe this is fine for your project.

0
source

Source: https://habr.com/ru/post/1203281/

More articles:


All Articles