Monday, February 27, 2017

Using the tinyMCE CDN

As you know there are all sorts of text editors out there.  For my purposes tinyMCE works fine.  It has a CDN so with the inclusion of a little javascript, you have a capable wysiwyg text editor without having to install any bits into your code (as long as the CDN is up...).  Here is how I use it.



<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
        <script>
            tinymce.init({
                browser_spellcheck: true,
                contextmenu: false,
                selector: 'textarea',
                height: 500,
                theme: 'modern',
                plugins: [
                  'advlist autolink lists link image charmap print preview hr anchor pagebreak',
                  'searchreplace wordcount visualblocks visualchars code fullscreen',
                  'insertdatetime media nonbreaking save table directionality',
                  'emoticons template paste textcolor colorpicker textpattern imagetools'
                ],
                toolbar1: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
                toolbar2: 'print preview media | forecolor backcolor emoticons',
                image_advtab: true,
            });
          </script>

This works pretty well as a blog editor.  I have to hand put in some HTML for embedded images and videos, but so far that hasn't been a big issue.  I get the raw HTML from the tinyMCE editor for saving like so-

var ct = tinyMCE.activeEditor.getContent({ format: 'raw' });

Quick and easy.  Happy coding.