Install N1ED plugin for Editor42

Editor42 is our free MIT-licensed rich text editor, an auditable fork of TinyMCE 6.8.6 with the same API under the editor42 global. The N1ED plugin for TinyMCE runs in it unchanged: the same plugin, the same API key.

Plugin

• Download

  Get the N1ED plugin for the Editor42 you already run.

  Download Plugin

• Unpack

  Unpack the archive into the Editor42 folder, the one that holds plugins/. The plugin lands here:

  editor42/
    plugins/
      n1ed/
        plugin.js
        plugin.min.js

• Enable

  Enable the N1ED add-on in the Editor42 config:

  editor42.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>

• Link your storage

  Only link your storage when you are ready: install the file manager server-side script on your server.

• Ready to Use

CDN

• Add the CDN Script

  One script loads Editor42 from our cloud with the N1ED plugin enabled and preconfigured, always the latest version. Start the editor with editor42.init() in window.onEditorLoaded, as below.

  <!-- 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(...) also works: the global is aliased for compatibility
          editor42.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 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 editor42.init(). The CDN script expects it to be present at load time, passed in the URL.

• Link your storage

  Only link your storage when you are ready: install the file manager server-side script on your server.

• Ready to Use

Configuration

Configure your N1ED Editor42 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