TinyMCE custom plugin help?

Environment[indent]TS 7.4.1 on W2K8 R2[/indent]
Scenario[indent]I'm taking a *.ipl script that used to be used for a customization in VFE and transforming it into a custom plugin for TinyMCE.
I created the base-structure for the TinyMCE plugin, and redirect from the dialog.htm to my revised version of the .ipl script.
At a high-level - the code is working, in that:

losing all the rest of the text.

Find more posts tagged with

Comments

Rick Poulin

The biggest issue with the current TinyMCE is that the 'selection' and caret placement business hasn't been abstracted out into logical objects (this was first built in Tiny v3.3 or 3.5, and we're stuck with 3.1.2). As such, there's only the thinnest wrapper around the browser's own implementation of edit-mode DOM manipulation. And if you haven't already figured out where I'm going with this, getting it working in firefox is easy and getting it working in IE is one of the worst hells you'll ever have to deal with in all of TeamSite.

It can be done, but the number of edge cases is longer than my arm and your code is going to be extremely ugly. If at all possible, change your approach or simplify your use cases as much as you can and chalk up the rest of the edge cases to 'user training'.

The direct answer to your question is that the Mozilla/MSDN pages are probably what you want to be looking at.
IE9/10: http://msdn.microsoft.com/en-us/library/ms533042%28v=vs.85%29.aspx
FF: https://developer.mozilla.org/en/docs/Web/API/Range

Adam Stoller

Hmm - I'm familiar with the issues of trying to deal with DOM manipulation via XMLHTTP objects in JavaScript in Firefox and various flavors of IE - and yes, I'd like to steer clear of that.

I'm thinking that maybe I can get a handle on the entire textarea "X", the selected text "Y" and then process that to form an entirely new string with Y being regex'd replaced with the desired text and then doing the setContent(modified_X_string);

I'll have to play around with this a bit when I get a chance. I'm trying to avoid completely re-writing all the code and changing the user-interaction.

It does seem silly that TinyMCE doesn't [seem to] provide a more granular approach to manipulating the text via plugin code...

ISCBorisB

I'm thinking that maybe I can get a handle on the entire textarea "X", the selected text "Y" and then process that to form an entirely new string...

If it comes to that, perhaps [thread=33088]this old thread[/thread] may help a little.
Needless to say, this is undocumented hack.

Adam Stoller

I dug a bit further into the TinyMCE documentation and realized I had missed something on my previous searches.

When I initially loaded the selected text into the plugin code I used:

var ed = tinyMCEPopup.editor;
...
selectedText = ed.selection.getContent().trim();
document.frmHyperlinks.text2.value = selectedText;
alert("FIELD: '"+document.frmHyperlinks.text2.value+"'");

(we'll come back to the trim and alert in a bit)
When I originally tried to insert the selection that was made within the UI, I was using:

hyperlinkvalue = document.frmHyperlinks.httpLink.value;
pastevalue = '<a href="custom.jsp?link=/policy/' + hyperlinkvalue + '" ' + targetvaluepaste +'>' + selectedText + '</a>';
ed.setContent(pastevalue);

(the 'hyperlinkvalue' represents the item selected in the custom UI; the targetvaluepaste is currently the empty string, but could be set to something like "target='_blank'")

Fixing issues:

within the text field where it's supposed to be.However, as soon as I close that alert (or if I eliminate the alert altogether) - the field is shown to be empty!I can retrieve the selected text as I have done, through the ed.selection.getContent() call - but I cannot figure out why the form's field keeps getting emptied.The work-around I'm considering is to hide that field if there was pre-selected text and only expose it if there wasn't any - but I dislike doing that solely because I cannot get the text to appear where it should.Any ideas on that?

Rick Poulin

It does seem silly that TinyMCE doesn't [seem to] provide a more granular approach to manipulating the text via plugin code...

TinyMCE has provided this since about 2008 or something. It's IWOV's fault for still being on such an ancient version of it.

PS, when using ed.selection.getContent(), IE does some really weird **** when the caret is at the end of a block tag, or at the end of a document, or any number of places when you haven't selected any text. Sometimes it'll give you back just a closing '</P>' and when you setContent() back with that it barfs on you. It sometimes also claims to have highlighted more than you actually did if your selection crosses the boundaries of block elements.

As for your latest issue, I think I'd have to see more of your code, specifically the event dispatching (the blanks make me think that there's some incorrect asynchronicity going on) and/or the piece that is supposed to set the value of that text field in the first place.

Adam Stoller

TinyMCE has provided this since about 2008 or something. It's IWOV's fault for still being on such an ancient version of it.

It's supposed to be getting updated in 8.0 - which was supposed to be getting released Q1 this year (today would be the last day to meet that deadline ;-))

PS, when using ed.selection.getContent(), IE does some really weird **** when the caret is at the end of a block tag, or at the end of a document, or any number of places when you haven't selected any text. Sometimes it'll give you back just a closing '</P>' and when you setContent() back with that it barfs on you. It sometimes also claims to have highlighted more than you actually did if your selection crosses the boundaries of block elements.

I haven't noticed any issues with the code in IE-10 (what I'm currently using along with FF 24) - but hopefully the customer will start beating on this later this week and it will either pass with flying colors or I'll be provided specific instructions for reproducing any problems found....

As for your latest issue, I think I'd have to see more of your code, specifically the event dispatching (the blanks make me think that there's some incorrect asynchronicity going on) and/or the piece that is supposed to set the value of that text field in the first place.

Well, my "work-around" (hiding the field when I know I have a value) is working for now - got a few other things (not directly related to this) that I need to see about resolving (hopefully today) and then maybe I'll see what I can send you under separate cover.

Rick Poulin

IE10.. *sigh*.. if only we could all be so lucky Smiley Wink

Adam Stoller

IE10.. *sigh*.. if only we could all be so lucky

Yikes! - the code doesn't seem to work very will in IE-8

in both cases (with or without pre-selected text) the "label" for the inserted link comes back as "undefined".

Sigh - I may have to dig into this further (just when I thought I was done, they pull me back in :-()

Adam Stoller

Turns out the problem was that wonderful

.trim()

I added previously - apparently that doesn't work in IE-8, instead I need to do:

...
selectedText = ed.selection.getContent();
electedText = selectedText.replace(/[\s\t]+/, "");
...

I could probably do it all in one line, but for now I'm keeping it as two lines with a comment above that indicates that trim() doesn't work in IE-8.
NOTE: The above code appears to work in IE-8, IE-10, and FF-24

So - I'm back to having this working (with the work-around to hide the one field that gets populated and cleared - and that means I'm back to trying to get several other things resolved before I can put any more effort into trying to figure out that mystery.