j2jensen wrote:I'm new to Tiny MCE, but very excited about what it looks like I'll be able to do with it. After a few days of tweaking, I've finally got everything working just the way I want it. However, once we started testing it on older browsers, I found that about 40% of the time in IE 6, it either won't load at all, or only about half of the toolbar icons will load. I played around enough with the code to find that if the browser has a little extra time between the .init script and the text area, the problem seems to go away. It would seem to me that the problem lies in the initializer not finishing its work before it's expected to load something up. Based on your knowledge of Tiny MCE, is this possible? Is there some way of checking to make sure that the init command finished before adding an editor to the page?
Hi j2jensen!
Just thought I'd comment on your question.
The init command is actually an event that your code is responding to, and in any type of event-driven programming, you cannot rely on those events coming in any particular order, or with any particular timing. The editor does not wait for your init method to finish; it calls it and them moves on to the next thing on its list of to-dos.
If you have code that must complete before the editor loads, then definitely do not put it in the init event. Instead, place your code before TinyMCE is initialized. You can place the TinyMCE initialization function either at the end of your code, or place it within its own function (that's what I do). I like placing the initialization in its own function or even its own "class" (object) because it creates a generic way to start TinyMCE that I can use in a variety of situations.
For example, on any page that contains a TinyMCE editor on my site, I include a javascript file called RichTextEditor.js, and that file has everything I need to work with the editor, all defined within one object. (I think of it as a "class".) It looks something like this:
var RichTextEditor = {
//... I define some misc. properties here - values related to the
//... text editor that I need to keep track of globally.
initialize: function (options) {
if (typeof(document.execCommand) === "undefined") {
LotteryPostError.Show("Your web browser cannot handle the Lottery Post Rich Text Editor, so you will need to disable the Rich Text Editor before you can use this page.\n\nTo do so, click Board Settings in the Options menu, and then un-check the Rich Text Editor checkbox.\n\nAlternatively, we recommend that you upgrade your web browser to the latest version of Microsoft Internet Explorer or Mozilla Firefox, both of which will allow the use of the Rich Text Editor.", "Web Browser Not Compatible", "icon-caution-16.gif");
}
else {
var tinyMceOptions = {
accessibility_focus: false,
//... more default options defined
};
if (typeof(options) === "object") {
if (options.gzip && tinyMCE_GZ) {
tinyMCE_GZ.init();
delete options.gzip;
}
SpeednetDOM.MergeProperties(options, tinyMceOptions);
}
tinyMCE.init(tinyMceOptions);
}
},
//... here's where I define callbacks that I use from TinyMCE
//... called as "RichTextEditor.callbackFn()"
};
That's actually a pretty small snippet of the actual code, but hopefully it demonstrates the basic structure I created. It helps keep everything related to the text editor self-contained, it's highly re-usable, and I can control when everything fires. (It is my own personal approach. There are any number of different ways to do what I am doing.)
When I'm ready to start the editor, I use the following code, and I can optionally pass some additional editor options if they are needed on the page. For example, if I want to change how TinyMCE finds the textareas.
RichTextEditor.initialize();
or
RichTextEditor.initialize({editor_selector: "editbox", entity_encoding: "named"});
TinyMCE has an absolute TON of flexibility, and an ability to do lots and lots of different things itself. However, there are times when the proper thing to do in YOUR site is to have your own code control a particular thing, rather than relying on TinyMCE.
You'll see that sometimes if you need to have precise control over the output. TinyMCE has tremendous capability in that department, but there are some things that make more sense to tweak after YOU get control of the content. (Such as server-side processing.)
Good luck to you! For what it's worth, your choice in text editor was perfect, because in my opinion this is hands-down the best text editor you can find.
-Todd
