WYSIWYG Preview Caret Position

[Pebble]

Hi Everyone!
 I'm currently knocking up a plugin that will add text/whatever to the main wysiwyg editor  on the reply page.
I got it working to add , on button press, to the end of the text in both bbcode and preview modes.
Advancing ,  I've now got it to add the selection at the caret position in bbcode mode but I'm having a bit of a mare trying to get the caret position when in preview mode. The head scratching and keyboard bashing is getting a bit out of control, so I thought I better pop over here!

Is there a specific call I can make to the wysiwyg editor in preview mode to get the caret position? (as the editor already does this for native buttons etc)
Or someway to get the caret without breaking everything.

Thanks,
Pebble.

[Chris]

Mar 16, 2014 7:23:23 GMT -8 Pebble said:

Hi Everyone!
 I'm currently knocking up a plugin that will add text/whatever to the main wysiwyg editor  on the reply page.
I got it working to add , on button press, to the end of the text in both bbcode and preview modes.
Advancing ,  I've now got it to add the selection at the caret position in bbcode mode but I'm having a bit of a mare trying to get the caret position when in preview mode. The head scratching and keyboard bashing is getting a bit out of control, so I thought I better pop over here!

Is there a specific call I can make to the wysiwyg editor in preview mode to get the caret position? (as the editor already does this for native buttons etc)
Or someway to get the caret without breaking everything.

Thanks,
Pebble.

Remember that the preview pane is an HTML document housed inside an iframe with the content set to designMode  so the carat would in fact be a collapsed document selection that would be blinking when in designMode. To get the current position just grab the document.selection, document.getSelection or window.getSelection (depending on browser) and also remember that these calls should be made in the context of the iframe else you'll be getting results relative to the parent document and not the document in the iframe.

[Pebble]

Thanks Chris,
It helps a lot that you mentioned 'DesignMode' , because I'd looked on 'my favourite search engine' and didn't understand what designmode was.... I thought it was some sort of plugin or something. It's all about the learning!
I'll see what I can get working tomorrow (Monday), but this bit part gave me the shivers :

(depending on browser)

The head should have recovered and the new keyboard should be here by then!
No doubt I'll be back with a expression later!

[Chris]

The situation is much improved in regards to browsers than it was just 3 or 4 years ago with all (including IE) moving toward the W3C document selections model and in this case Opera was the odd man out since it used an hybrid of the other models that nobody else supported but thankfully dropped. None of these should actually cause concern though since Proboards WYSIWYG offers several methods that you can call making it practically opaque on your end, the functions detect and act accordingly leaving you to worry about other things.

[Pebble]

Just updating : Got the position/range. Now for the next part, inserting to the position!

[Pebble]

I've hit a brick wall.... As I got the position/range , everything was working And then I added a smiley or two and other stuff and it just broke, not 'just broke' but went very very wrong. It seems the beast that is the wysiwyg editor out foxed me.

[Chris]

Mar 18, 2014 13:20:32 GMT -8 Pebble said:

I've hit a brick wall.... As I got the position/range , everything was working And then I added a smiley or two and other stuff and it just broke, not 'just broke' but went very very wrong. It seems the beast that is the wysiwyg editor out foxed me.

The WYSIWYG has methods to do this stuff for you allowing you to worry about other things. First grab the WYSIWYG object when on the reply page with var wysiwyg = $('.wysiwyg-textarea').data('wysiwyg')

I would also suggest inspecting that object in a debugger to familiarize yourself

SPOILER: Click to show

console.dir($('.wysiwyg-textarea').data('wysiwyg'))

You'll see numerous properties and methods and even ones you might be familiar with such as getContent and setContent. Take note of the currentEditorName property since that will let you know which editor is currently active (bbcode or visual). You should also see method named overwriteSelection which offers an easy way to add text to both editors without having to worry about which editor is currently active, it does this by first determining which editor is currently active (bbcode or visual) then calling the appropriate editor function to replace the selection with the text you provided as a parameter to the function, keep in mind what I said earlier about that blinking text cursor being a selection just with the start and end points being the same (no actual text selected).

If you want to add nodes other than text nodes in preview or want to wrap rather than replace selections in either editor then we need to go a level deeper, so open the editors branch and you'll see one for bbcode and one for visual. Under both you'll see two methods of interest: replaceSelection and surroundSelection. The replaceSelection method is what the overwriteSelection mentioned earlier would call and in bbcode mode it expects text but in visual it expects a DOM node, the overwriteSelection simply determines which editor is active and sends the appropriate param type (text or textNode). The surroundSelection method allows you to surround a selection and once again it expects a DOM node when in visual, in bbcode however it expects up to four parameters
function(tag, attrs, reselect, defaultText)

• tag the tag, for example "b", "blockquote", etc.
  (only one tag per call so if planning to wrap in multiple then call multiple times)
• attrs these would be attributes to add to the tag, for example
  {width:'100',src:'http://images.com/pic.png'}
• reselect a boolean indicating whether to reselect the selection after the operation is complete
• defaultText optional text to be placed inside the tag, this would be how "insert quote here" ends up inside a quote tag when inserted empty

---

code:

var wy = $('.wysiwyg-textarea').data('wysiwyg')

//insert a span with background color set to yellow to highlight text selected by the user
if (wy.currentEditorName == "bbcode") {
	wy.editors["bbcode"].surroundSelection("span", {
		"style" : "background-color:yellow;"
	}, true)
} else if (wy.currentEditorName == "visual") {
	wy.editors["visual"].surroundSelection($('<span/>').css('background-color', 'yellow').get(0))
}

[Wormopolis]

... and bookmarked.

[Pebble]

Cheers Chris,
I've got some coding time on Thursday so will take a look then. It seems I went a bit too deep into the wysiwyg editor and I was pulling out the data I needed and then manually adding my text, which then threw the editor into fits of disgust.
Thanks,
Pebble.

EDIT:
I got a bit of spare time and decided to have a quick look to see what was ahead.... And that's all it took. Done and working! 
Excellent info & explanation  Chris,
Thanks again.

[Wormopolis]

in preview mode, the selected content has to be converted back to BBCode in order to use replaceSelection doesnt it... I tried using a document fragment but it doesnt seem to like that.

[Chris]

Without seeing the code, it sounds like the document fragment is being created in the context of the parent document rather than in the context of the iframe document. The WYSIWYG maintains a reference to the inner document or you could just use jQuery to grab it

$('.visual-editor iframe').contents()[0] === $('.wysiwyg-textarea').data('wysiwyg').editors.visual.document; //true

[Wormopolis]

Tim Camara

context:

I wanted to finally put a colorsmear button in the editor tool bar that worked correctly. in bbcode mode, I used replaceSelection and it surrounded the selected text just fine with the smear tags. smear tags arent normal HTML tags, they are [smear:#hex] text to smear [/smear:hex:mode]

so now when I look at functions available in the visual editor, I cant use surround selection, because the tag it wants would have to be a standard tag, and couldnt have the formatting I need inside the brackets. so I have been trying to use getContents and selection to get everything that is selected - including any formatting already applied - so that it just puts my tags before and after. there is an insertAfter() function, but that only gets me halfway. so looking at some example like your quote plugin, I was trying to extract the selection, convert it to bbcode, add my tags, and convert it back and use overwriteSelction(). but I keep getting errors. I look at the definition for the functions, and Im getting confused as to what data type they are expecting. Im currently trying to dissect the surroundSelection() function in order to simulate what it is doing in order to put BACK what is already there with its formatting, but just let me put stuff before and after. I looked through virgil's walkthrough, but it seems to steer in the same kind of direction of similar tags around content. or Im just not reading it right.

I FEEL like Im close, but Im running out of cigarettes...

[Wormopolis]

ok... so I think I got it. I had to pilfer the surroundSelection() function to make it work, but it works. however because it has to have a node, I put a $('<span>') in there to give it a node. but when you switch to bbcode editor, it shows the span surrounding my smear tags. is there a way to give it a fragment so it inserts without having to resort to a span?

[Chris]

So if you're not dealing with DOM elements just plain text then grab the selection, add your text to it then use replaceSelection to replace the current selection with your modified selection. Keep in mind what I said regarding creating the fragment (or anything added to the fragment) within the proper context since a browser will usually balk if you attempt to cross-contaminating by inserting elements from one document into a completely different document (there are special methods such as importNode to handle such cases).

You'll see I grabbed a reference to the iframe's document then used that to access the createTextNodes method in the context of the iframe, also by converting the range into a document fragment using cloneContents() the context for the fragment remains with the iframe document rather than the parent document. If I wanted to create an empty documentFragment I would use doc.createDocumentFragment() (where doc is a reference to the iframe's document) rather than document.createDocumentFragment(). That is what I meant by context and also what jQuery means by its optional context parameter.


var wy = $('.wysiwyg-textarea').data('wysiwyg')
var doc = wy.editors.visual.document
var frag = wy.editors.visual.getRange().cloneContents();
frag.appendChild(doc.createTextNode("[/smear:#hex]"));
frag.insertBefore( doc.createTextNode("[smear]"),frag.firstChild);
wy.editors.visual.replaceSelection(frag);


Also note that the above code sample doesn't bother catering to older IE selection methods and assumes we're working with the W3C standard so IE older than IE9 (I think that's when IE adopted w3c ranges) probably would not work unless extra code was created for that.

[Wormopolis]

yeah that was my folly then. I was using document.createTextNode and it was failing on that line. this is what I got out of surroundSelection that I modifed:

SPOILER: Click to show


tmp=$('.wysiwyg-textarea').data('wysiwyg');
   
   if (tmp.currentEditorName == "visual") {
       f=$('<span/>').get(0);
       var d=tmp._visualEditor.selection||tmp._visualEditor.getSelection();
       if(this.window.getSelection){
           var c=tmp._visualEditor.range||tmp._visualEditor.getRange();
           var e=c.extractContents();
           f.appendChild(document.createTextNode('[smear:#FF0000]'));
           f.appendChild(e);
           f.appendChild(document.createTextNode('[/smear:#00FF00]'));
           c.insertNode(f);
           c.collapse(true);
           c.setEndAfter(f);
           d.removeAllRanges();
           d.addRange(c);
           d.collapseToEnd()
       } else {
           if(tmp._visualEditor.document.selection){
               var c=tmp._visualEditor.range||tmp._visualEditor.getRange();
               f.innerHTML='[smear:#FF0000]'+c.text+'[/smear:#00FF00]';
               c.pasteHTML(f.outerHTML);
               c.collapse(false);
               c.select()
           }
       }
} else if (tmp.currentEditorName == "bbcode") {
       tmp.editors[tmp.currentEditorName].replaceSelection('[smear:#FF0000]'+tmp.editors[tmp.currentEditorName].getSelectedText()+'[/smear:#00FF00]');        
   }


yours is much cleaner so I am going to try to merge the two. I know you hate it, but I gave you props in a code comment in that area. Thank you!