Inserting content into TinyMCE

2012-04-30T08:31:45Z

When developing a plugin for TinyMCE, you often need to insert content into the document. In most cases, this content is at the current cursor position, or selection. But what if you want to enter the content at the beginning or end of the document, irrelevant of the current cursor position?

In the following examples I assume you have a reference to the editor (ed). This may be as simple as getting the activeEditor.

var ed = tinyMCE.activeEditor;

Unlike the insertion of content at the current cursor position, which simply uses the selection object

ed.selection.setContent("some content");

insertion of content into other parts of the document require the dom object.

Let’s start with inserting into the end of the document. Fortunately TinyMCE provides a dom api call to add an element. So, if we provide a reference to the document using ed.getBody(), we can insert a new element. For example

ed.dom.add(ed.getBody(), 'p', {}, “some content”);

inserts a new paragraph at the end of the document.

Inserting content at the beginning of the document however is a bit more tricky. In this case, there isn’t a helper, so we need to first create the new element, and then insert it before the first child of the document. Again, there is a dom helper to assist in the creation

var el = ed.dom.create('p', {id : 'test', 'class' : 'myclass'}, 'some content');

We then use the insertBefore() method providing a reference to the firstChild of the document.

ed.getBody().insertBefore(el, ed.getBody().firstChild);

If you can’t say something constructive…

2012-03-20T10:41:52Z

For the last 6 months I've been contributing to the TinyMCE forums. In this time I've noticed a couple of disturbing trends, one of which became quite evident in a recent members post to a very old thread.

From time to time people will ask questions about how to make TinyMCE do something that it's not really designed to do. This is mostly to output non-standard HTML and is usually due to the "client requirements". The most common one is the use of <BR> tags instead of <P> tags.

I'm not going to join into the argument of using <P> tags as a good friend and colleague posted a great round up of the importance of P tags already. What I'm interested in, is the way people respond both in terms of the initial question, and the followup responses.

From what I've seen, the response to these sorts of questions can occasionally be quite harsh and usually question "why" the person is even contemplating doing this. Now while I don't always agree with the tone of the responses, I can empathises, especially if they've had to answer the 100th question that has been addressed elsewhere, including the documentation.

The disturbing trend I've recently seen however is in the reaction of some people to this "criticism" or questioning. It appears people believe we should ignore the reason why someone is doing it, and simply answer the question. I tend to disagree.

As a developer I believe it's my duty to educate, as well as assist people. This includes both other developers and clients.

I believe that there are a lot of people out there who don't know any different with respect to the choices of output. By questioning why they are doing this and ideally providing the more acceptable alternative, the respondent is potentially educating them. Now it may be that the developer knows this already and is unable to educate their current client, but for others, they may now know an alternative. They still mightn't be able to change their clients mind this time around, but they will be better armed for future engagements.

hbhau.net

Inserting content into TinyMCE

If you can’t say something constructive…