wysiwyg

Up until now we have had a basic homemade text editor for the admin web interfaces that we provide. I thought it was about time to change that.

I decided to try out Ext.js and at the same time see if there were a good text editor provided with Ext. Well I couldn’t really find that but instead I bumped into TinyMCE which is a very powerful and easy to use WYSIWYG editor. It is easy to customize, it works in the different browsers I have tried and it was also easy to set up with AJAX. I.e. it works very well with the Ext.js implementation and also with Dojo from what I understand. There are many defined functions for all possible scenarios. I can really recommend it.

One thing you must be aware of is that although the editor is applied on textareas you can not use the usual ways of getting or setting that content (i.e. getElementById(‘textAreaId’).innerHTML). Instead you will need to get a handle on the textarea and use TinyMCE’s own functions. For example like below:

function getContents() {

// Get a handle on the the textarea
var body = tinyMCE.get(‘body’);

// The AJAX request using Ext
Ext.Ajax.request({
  url: ‘content_controller.php’,
  method: ‘GET’,
  params: { action: “getContents”, pid: document.getElementById(‘page’).value },
  success: function(response, opts) {
    // Decode a json response and place into variable ‘obj’
    var obj = Ext.decode(response.responseText);

    // Set field values
    document.getElementById(‘header’).value = obj.header;
    document.getElementById(‘subHeader’).value = obj.subHeader;
    document.getElementById(‘image’).value = obj.image;

    // Set textarea content
    body.setContent(obj.body);
  },
   failure: function(response, opts) {
    console.log(‘server-side failure with status code ‘ + response.status);
  }
});
}

function getBody() {
//Alert the textarea content (for some reason)
alert(tinyMCE.get(‘body’).getContent());
}

So just go there and download and take a look at a few examples and you will be up and running in no time. The API is a good place to look for functionality.

Share and Enjoy: