The trivial case for integrating tinyMCE is not very complicated.  After downloading and placing the tinyMCE library in grok4noobs/static/libs/tinyMCE, we need to include the tinyMCE javascript in the site view.  This is done only when the edit mode is active for the site layout view.  Before we can get there, we need to create the appropriate fanstatic libraries:

from fanstatic import Library, Resource

library    = Library('mygrok.grok4noobs', 'static')
...
tinymcelib = Resource(library, 'lib/tinymce/js/tinymce/tinymce.min.js')
tinymce    = Resource(library, 'lib/tinymce/init.js', depends=[tinymcelib])

After this, we can tell our view to include the library (layout.pt):

from resource import tinymce

class Layout(grok.View):
...

def update(self):
   ...
   if nomce is None:  # Switch includes or omits tinyMCE
       tinymce.need()

This includes the javascript for the tinyMCE editor in the headers for the HTML document.  The default initialisation associates the inline HTML editor with a textarea.

A less trivial example

We want our editor to do a number of things over and above the default.  For example, we want to integrate a source highlighter so that we get highlighted text in our text blocks, and we also want to add pictures.  We also want to bring up an edit box when someone clicks on a source text box, so that it becomes impossible to mess with the syntax highlighting.  All of this is going to need a couple more libraries, and some javascript programming of our own.

You can read all about it here.

 

 

Grok 4 Noobs

Integrating the tinyMCE editor