Rounding off the use of TinyMCE for WYSIWYG editing
- Wed 16th February 2011, 1:04 pm
- Comments (0)
- Post a comment
This is a follow-up a previous article, which described how I use the TinyMCE editor for comment and article creation. However, at the time of writing this, there were four items left on my to-do list relating to such rich-text editing:
I’ve picked up a common Wikipedia practice which is to use the teletype (<tt>) tag to mark fixed font inline text (such as this). I added a “quick & dirty” code mod to implement this as the TinyMCE doesn’t facilitate using this tag as standard. However, I wanted to write a proper custom plugin for this when time permitted. I have now done this and made it available to the TinyMCE community (see here).
When doing in-place editing of an article I want the edit pane to adopt my style-sheet rather than the default TinyMCE style. Implementing this was quite straightforward, but I just had to do the work following the documentation for the content_css option.
My last change isn’t to do with TinyMCE but I’ll mention it here for completeness, and that is that I have improved my integration with the OpenOffice.org HTML editor to make opening this a single-click function. To do this, I have also added an extra HTTP pseudo-stream protocol to Firefox and Chrome “blogedit:” using gconftool-2 as below. (I run Ubuntu on my laptop). When an article is viewed in admin mode (which means that the user has edit privileges on the article), a couple of extra links are included on the page. The first of these is the “Edit inline” tag which fires up the TinyMCE editor. The second is an “Edit URI” tag which links to blogedit://<site>/<article>. Clicking on this link fires up a client-side script which decodes the URI and opens the OpenOffice.org HTML editor on the cached HTML copy of the article (which the article view generates the server-side in the FTP mapped _admin directory if the user is an admin.
gconftool-2 --set --type=string /desktop/gnome/url-handlers/blogedit/command '/home/terry/bin/blogedit "%s"' gconftool-2 --set --type=bool /desktop/gnome/url-handlers/blogedit/needs_terminal 'false' gconftool-2 --set --type=bool /desktop/gnome/url-handlers/blogedit/enabled 'true'
Using the new PHP Compressor
require_once("$blog_root_dir/includes/tinymce/tiny_mce_gzip.php"); $scriptTag = TinyMCE_Compressor::renderTag( array( "url" => "includes/tinymce/tiny_mce_gzip.php", "plugins" => "table,save,advlink,emotions,inlinepopups,insertdatetime,searchreplace," . "contextmenu,paste,fullscreen,visualchars,nonbreaking,xhtmlxtras,wordcount,teletype", "themes" => "advanced", "files" => array( "tiny_mce_article_bootstrap" ), ), true ); $page->assign( 'script_tag', $scriptTag);
$tinyMCECompressor = new TinyMCE_Compressor(array( "languages" => "en", "cache_dir" => realpath(dirname(__FILE__) . "/../../_cache"), "expires" => "1m", ));
Put these together and the only thing that you need to configure is the corresponding tinyMCE.init() function for each page on which you want to implement an editor. No more tinyMCE_GZ.init() calls. Easy and fast to load.
- Comments (0)
- Post a comment