Install N1ED plugin for TinyMCE

The quickest way to enable Bootstrap (styles, grid, blocks, and widgets) in your editor is to install the N1ED plugin for TinyMCE (also known as Tiny.cloud) of any version. The file manager, image editor, and other handy tools are also included in this add-on.

Plugin

• Download Plugin

  Get the N1ED plugin for upgrading your existing installation of:

  • Editor42
  • TinyMCE 8, 7, 6 and 5
  Download Plugin

• Unpack

  Unpack the archive with the plugin into the TinyMCE plugins/ folder:

  tinymce/
      plugins/
          n1ed/
              plugin.js
              plugin.min.js

• Enable Plugin

  Enable the N1ED add-on in the TinyMCE config:

  tinymce.init({
      selector: "#editor",
      plugins: "n1ed",
  
      // apiKey: "...",
      // Get your own key in the Dashboard: https://n1ed.com/dashboard
  });

  The N1ED plugin is fully functional after this step. Next, you will need to link your file storage by installing the file manager backend on your server.

• Install backend

  Now you need to install the file manager server-side script on your server to enable the file manager in your editor. Follow the instructions provided in the link to complete the setup.

• Ready to Use

Ready-to-Use Bundle

• Download

  The ready-to-use bundle (ZIP) already contains the N1ED plugin in a fully preconfigured, TinyMCE-compatible environment. The editor inside is Editor42 — our free MIT-licensed editor, based on TinyMCE and fully compatible with it. Use it as an instant preview or copy it into your project, and only link your storage when you are ready.

  Download Bundle

• Unpack

  Unpack it somewhere into your webserver public directory. For example:

  var/
    www/
      public/
        editor42/
          editor42.min.js
        sample.html

  You can use sample.html to immediately run the editor and check how it works, even outside of a webserver. Then you may want to remove this file if it isn't needed anymore.

• Attach to content box

  Add the script link onto your page and initialize the editor there, attaching it to the textarea or some div with the content you want to edit.

  <script src="/editor42/editor42.min.js"></script>
  <script>
      // tinymce.init(...) also works — the global is aliased for compatibility
      editor42.init({
          selector: "#content",
          plugins: "n1ed",
  
          // apiKey: "...",
          // Get your own key in the Dashboard: https://n1ed.com/dashboard
      });
  </script>

  Then install the file manager backend to link your file storage.

• Ready to Use

CDN

• Add the CDN Script

  One script loads the editor with the N1ED plugin enabled and preconfigured, always the latest version, cached on the CDN. The editor is Editor42, our free editor based on TinyMCE, so tinymce.init() works unchanged. To keep TinyMCE itself, install N1ED as a plugin (the first tab).

  <!-- This div will be replaced with the editor -->
  <div id="editor"></div>
  
  <!-- Place this before adding the script with N1ED
       to correctly process the moment when it is loaded -->
  <script type="text/javascript">
      window.onEditorLoaded = function() {
          tinymce.init({
              selector: "#editor",
          });
      }
  </script>
  
  <!-- Load the script. The API key can be found in the Dashboard -->
  <script type="text/javascript"
          src="https://cloud.n1ed.com/v/latest/sdk/n1ed.js?apiKey=N1ED24RR1234123412341234">
  </script>

  You can copy this snippet into any place of your <body> tag, but the scripts must go below the editor placeholder and their order is important. The JavaScript snippet page has the details.

• Set API key

  After the previous step your editor should load fine with the demo key.

  Then use your own free API key from the Dashboard: replace the demo key in the URL after ?apiKey= with yours. The Dashboard is also where you configure the toolbar, the widgets and the file storage of that key.

  Please don't pass your API key as a parameter to tinymce.init(). The CDN script expects it to be present at load time, passed in the URL.

• Ready to Use

Configuration

Configure your N1ED TinyMCE installation in the Dashboard: choose the toolbar and widgets, link the file storage, set Bootstrap options and custom blocks, all without touching the code.

Dashboard

Examples

Live CodePlay examples for TinyMCE with the JS/CSS/HTML code provided.

• JS snippet: TinyMCE with N1ED from one script
• TinyMCE plugin: N1ED added to your own TinyMCE