Skip navigation

Recently I was tasked with building a pretty smiple CMS for my companie’s websites.  The major problem I ran into was picking a rich text editor that is easy enough to use with dojo.  There are a number of choices out there, but every single one has major problems.  These major problems include: cost, bugs, eas of use etc.  For instance, FCK is free, but it has a number of bugs.  TinyMCE is free as well, but it doesn’t play nicely with dojo.  Dojo has a built in rich text editor, but from what I understand building plugins for it is an absolute nightmare.  There are a ton of other free ones out there, but a lot of them seemed like they didn’t have very large user bases or very good support.

I decided to go with TinyMCE because it has a wide set of features and the plugins seem easy enough to develop.  The problem with TinyMCE at first glance was it didn’t look like it’d be easy to use with dojo.  The documentation is pretty poor in that it doesn’t have many examples.  I struggled for hours trying to find an example that would allow me to create a TinyMCE editor on the fly.  Finally (no thanks to the documentation), I came up with this:

dojo.provide("my.widgets.RichEditor");

dojo.require("dijit._Widget");
dojo.require("dijit._Templated");
dojo.require("dijit.form.Button");
dojo.require("dijit.form.TextBox");

dojo.declare("my.widgets.RichEditor", [ dijit._Widget, dijit._Templated ], {
	templatePath :dojo.moduleUrl("my", "widgets/layout/RichEditor.htm"),
	templateString :"",
	widgetsInTemplate :true,
	width: 600,
	height: 400,
	editor: null,
	value: "",
	editorNode: null,
	initialized: false,

	postCreate : function() {
		this.inherited(arguments);

		var ed = new tinymce.Editor(this.editorNode.id, {
			theme: "advanced",
			plugins : "safari,spellchecker,pagebreak,style,layer,table,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,media,searchreplace,print,contextmenu,paste,directionality,noneditable,visualchars,nonbreaking,xhtmlxtras",
			theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
			theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
			theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
			theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
			theme_advanced_toolbar_location : "top",
			theme_advanced_toolbar_align : "left",
			theme_advanced_statusbar_location : "bottom",
			theme_advanced_resizing : true,
		});

		setTimeout(function() { ed.render(); }, 50);

		this.editor = ed;
		this.editor.onInit.add(dojo.hitch(this, function() {
			this.initialized = true;
			this.setValue(this.value);
		}));
	},

	setValue: function(value) {
		if (this.initialized) {
			this.editor.setContent(value);
		} else {
			this.value = value;
		}
	},

	getValue: function() {
		if (this.initialized) {
			return this.editor.getContent();
		} else {
			return this.value;
		}
	},

	destroy: function() {
		this.inherited(arguments);
		this.editor.destroy();
		tinyMCE.remove(this.editor);
	}
});

That is a dojo widget that allows you to use TinyMCE.  I haven’t been brave enough to try and load the TinyMCE js on the fly, I will have to try that one later on…

Advertisements

9 Comments

  1. Can you show the RichEditor.htm file? Thanks.

  2. Sure thing:


    <div dojoAttachPoint="containerNode" style="width: 100%; height: 100%;">
    <textarea dojoAttachPoint="editorNode" id="${id}" style="width: 100%; height: 100%;"></textarea>
    <div dojoAttachPoint="readOnlyNode" style="display: none;"></div>
    </div>

  3. Hi cool widget. I have got this up and runnig but im unable to get any data that i type into the tinymce textarea that is created out by using dojo to query the id of the textarea… ? Any idea what could be wrong?

    • Are you using dijit.byId? You’ll need to get the actual widget instance in order to get the value. Once you have the widget instance you can then use the getValue() method.

  4. I have got this error :-
    Uncaught Error: declare my.widgets.RichEditor: mixin #0 is unknown. Did you use dojo.require to pull it in?

    • Hello Mithlesh, have you made sure to dojo.require(“dijit._Widget”) and dojo.require(“dijit._Templated”)? I left this out of my example, which I will update. Usually these base widgets have already been included.

  5. Hi Sowelie

    I am having the same problem as Mithlesh in that having used tiny_mce with dojo for a couple of years I am now getting the error “Uncaught Error: declare im.imRichEditor: mixin #0 is unknown. Did you use dojo.require to pull it in?”

    Both dojo.require(“dijit._Widget”) and dojo.require(“dijit._Templated”) are declared.

    The only difference is that we have migrated from Dojo 1.6.1 to 1.7.2.

    What would of changed in the dojo toolkit to stop this from working?

    • Hey Olly,

      Dojo 1.7.2 did change quite a bit especially with dijit._Templated and dijit._Widget. You may need to use dijit._TemplatedBase and dijit._WidgetsInTemplate. You’ll have to tweak the mixins a bit to see what will work. Check this out: http://livedocs.dojotoolkit.org/releasenotes/1.7#id2.

        • Olly
        • Posted April 4, 2012 at 12:29 pm
        • Permalink

        Many thanks for your reply Sowelie. It seems I may need to alter quite a few areas of coding so I will book this work in and let you know if all goes well with the TinyMCE integration.


One Trackback/Pingback

  1. […] Dojo widget that I created is based upon an implementation that I found on Disgruntleddevs.wordpress.com, but I changed the widget to make it more flexible – and I also don’t use a template […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: