Important changes to Tiny Cloud pricing > Find out more

KnockoutJS integration

A custom binding that applies a TinyMCE Editor to the bound HTML element.

Contribute to this page

TinyMCE can be added to a Knockout project using the third-party TinyMCE Knockout integration.

Important: This Integration is maintained by a third-party developer. Tiny Technologies, Inc. bears no responsibility for this integration, which is not covered by the Tiny Self-Hosted Software License Agreement. For issues related to the integration, contact the third-party project directly.

Michael Papworth developed the Knockout binding for TinyMCE. For details, see: the tinymce-knockout-binding project.

Procedure

  1. In a HTML file, add source scripts for jQuery and Knockout JS.

    If the project loads jQuery or Knockout from a Content delivery Network (CDN), use the script provided by the CDN, including any attributes, such as integrity and crossorigin.

  2. Source TinyMCE and the TinyMCE jQuery integration from the Tiny Cloud or from a self-hosted location.

    • Tiny Cloud

      To source TinyMCE and the TinyMCE jQuery integration from the Tiny Cloud, add the following script elements:

        <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
        <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/jquery.tinymce.min.js" referrerpolicy="origin"></script>
      

      Replace no-api-key in the source script (<script src=...) with a Tiny Cloud API key, which is created when signing up to the Tiny Cloud.

      Signing up for a Tiny Cloud API key will also provide a trial of the Premium Plugins.

    • TinyMCE self-hosted

      To use an independent deployment of TinyMCE, add source scripts to either the <head> or the end of the <body> of the HTML file, such as:

        <script src="/path/to/tinymce.min.js"></script>
        <script src="/path/to/jquery.tinymce.min.js"></script>
      

      For information on self-hosting TinyMCE, see: Advanced installation choices.

  3. Source tinymce-knockout-binding (wysiwyg.js) on the page.

    If the project loads tinymce-knockout-binding from a Content Delivery Network (CDN), use the script provided by the CDN, including any attributes, such as integrity and crossorigin.

  4. Add an initialization point for TinyMCE, such as:

     <div>
       <textarea data-bind="wysiwyg: content, wysiwygConfig: {  }">
       </textarea>
     </div>
    
  5. Add the TinyMCE Knockout init script. The TinyMCE settings are defined within the defaults object.

     <script>
       (function( $, ko ) {
    
         ko.bindingHandlers['wysiwyg'].defaults = {
         };
    
         function ViewModel( content ) {
           var self = this;
           self.content = ko.observable( content );
         };
    
         $( document ).ready( function() {
           ko.applyBindings( new ViewModel( '<p>Hello, World!</p>' ) );
         });
    
       }( jQuery, ko ));
     </script>
    

Example Knockout integration

To load a TinyMCE editor similar to the Basic example, add the following code to an empty HTML file.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Load jquery -->
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <!-- Load knockoutjs -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-min.js" integrity="sha256-Tjl7WVgF1hgGMgUKZZfzmxOrtoSf8qltZ9wMujjGNQk=" crossorigin="anonymous"></script>
    <!-- Load TinyMCE and the TinyMCE jQuery integration -->
    <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
    <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/jquery.tinymce.min.js" referrerpolicy="origin"></script>
    <!-- Load tinymce-knockout-binding (wysiwyg.js) -->
    <script src="https://cdn.jsdelivr.net/npm/tinymce-knockout-binding@1.1.1/src/wysiwyg.js" integrity="sha256-ZG6uOMw+SZjWjCa+SDh1FkcdpVBHjg2elNToi46xLNo=" crossorigin="anonymous"></script>
    <!-- Script to initialize a TinyMCE editor -->
    <script>
      (function( $, ko ) {

        ko.bindingHandlers['wysiwyg'].defaults = {
          height: 500,
          menubar: false,
          plugins: [
            'advlist autolink lists link image charmap print preview anchor',
            'searchreplace visualblocks code fullscreen',
            'insertdatetime media table paste code help wordcount'
          ],
          toolbar: 'undo redo | formatselect | bold italic' +
            'backcolor | alignleft aligncenter alignright ' +
            'alignjustify | bullist numlist outdent indent |' +
            'removeformat | help'
        };

        function ViewModel( content ) {
          var self = this;
          self.content = ko.observable( content );
        };

        $( document ).ready( function() {
          ko.applyBindings( new ViewModel( '<p>Hello, World!</p>' ) );
        });

      }( jQuery, ko ));
    </script>
  </head>
  <body>
    <div>
      <textarea data-bind="wysiwyg: content, wysiwygConfig: {  }"></textarea>
    </div>
  </body>
</html>

For information on creating advanced configurations for the third-party TinyMCE Knockout integration, visit the project on GitHub: tinymce-knockout-binding.

Can't find what you're looking for? Let us know.

Except as otherwise noted, the content of this page is licensed under the Creative Commons BY-NC-SA 3.0 License, and code samples are licensed under the Apache 2.0 License.