Entries Tagged 'How-To' ↓

Welcome Back!

In my current project I have developed a light-weight tag library based on Radius Tags. I am using TinyMCE as my WYSIWYG editor and needed to handle these custom tags in an intuitive fashion. In this case, I am happy for the user to have to manually edit the code in the HTML view to interact with the tags, but I want to at least let them know the tag is there.

Assuming we have a tag: <o:title/>

I simply add the following to my TinyMCE configuration:

extended_valid_elements : "o:title",
custom_elements: "o:title"

extended_valid_elements tells the editor that this tag is valid.

custom_elements makes TinyMCE switch the tag into a div when in the WYSIWYG view. The div has a “mce_name” attribute with the value of the tag name (in this case mce_name=”o:title”).

With the tag being handled by TinyMCE, I can now customise the display by providing some styles in the Editor CSS.

You can assign a generic div style:

div[mce_name] {
  background-color:#EEEEEE;
  border:1px solid #CCCCCC;
  height:225px;
  width:600px;
}

As well as specific styles for a named tag (in this case  using a background image to render the display):

div[mce_name="o:title"] {
  background-image:url(/images/title_tag.png);
  background-repeat:no-repeat;
  background-position:2px 5px;
}

Easy!

Any sufficiently complicated website contains an ad hoc, bug-ridden, slow implementation of half of Wordpress

I’ve been working on a new project for Inspire Digital.

The project is going to allow site members to produce their own content.

Members have a WYSIWYG editor (using jquery.wysiwyg) for creating content with some basic HTML. I wanted to come up with a way for only those who need the files to download the files.

Previously in this sort of situation I have simply included the script and css files within the form, but this is not valid HTML.

So … Loading Javascript and CSS dynamically with jQuery to the rescue!

Loading JavaScript is built-in to jQuery, but you need to create CSS elements yourself.

The approach places a class on the text area we want to be WYSIWYG, then we detect that class, load the CSS and JavaScript and initialise the editor. Easy!

$(document).ready( function() {
  if ($('.wysiwyg_editor')) {
    $("head").append("<link>");
    css = $("head").children(":last");
    css.attr({
      rel:  "stylesheet",
      type: "text/css",
      href: "/javascripts/jwysiwyg/jquery.wysiwyg.css"
    });
    $.getScript("/javascripts/jwysiwyg/jquery.wysiwyg.js", function(){
         //wait before initialising to prevent intermittent load error
	 setTimeout("init_wysiwyg_editor()",250);
    });
  }
});
function init_wysiwyg_editor() {
  $(".wysiwyg_editor").wysiwyg();
}

The only gotcha I found was that calling $(“.wysiwyg_editor”).wysiwyg(); would occasionally error with an undefined method unless I put a momentary timeout in before calling. I think this was the result of the browser making the call while still interpreting the freshly loaded script.