Insert from popup at cursor position

[netnak]

There's a couple of earlier requests for this, but I still can't find a working example.

I need to create my own dialog boxes (using ASP/PHP) that return an HTML snippet back to the editor at the cursor position. I can use the paste command, but that appends text and surrounds with <p>s. And the Tidy example works on the whole editor HTML,

I need to put my cursor in the middle of a line of text, click a button that pops up a dialog box, run the script on that page that generates some HTML that - on submission - goes back into the editor text. I can do everything, but get the HTML I've generated back into the editor, inserted at the cursor position.

I'm sure the right functions are in the jQuery library, but I've not a clue where.

Can anyone help? Thanks.

[mr_lundis]

The paste function is for plain text only.

To the best of my knowledge, WYMeditor doesn't at this time provide a good way to insert pure html into the editor at the current caret position. However this piece of functionality is needed and hopefully we'll see it in the upcoming releases of WYM. I'd suggest you to post a feature request for this at the Trac site to speed up the process. Or if you wish to help out even more you could of course write the code needed and may be submit a patch to us, it'd be really appreciated.

[netnak]

Many thanks for explaining this.

The inability to insert our own HTML stops us upgrading from version .2 (which had the handy #1#2#3 functionality).

I'll gladly try and contribute. I sort of assumed that, since there is the ability to insert an image, then this insert_image routine itself would reveal how to insert HTML at the caret. I can see the image dialog HTML in the .js file, but if anyone has any guidance on where I might find the calls to jQuery that actually performs the insert, I'd be grateful.

[mr_lundis]

If I remember this correctly, jQuery isn't used to insert images but the internal image handling functionality of the web browser. Therefore I think you will find very little code of use there.

However, I have looked in to this a bit myself, and it seems like the most efficient way to do this would be to manipulate the contentDocument of the iframe directly. If you can do this with normal jQuery selectors you can pass a second parameter to the $-function - a context, or pass it a DOM element directly.

You can access the iframe contentDocument by the internal _doc property of your current WYMeditor instance.

See:
http://docs.jquery.com/Core/jQuery#expressioncontext

So by looking at the current paste functionality I came up with the following:

Code: Select all

WYMeditor.editor.prototype.pasteHtml = function(sData) {
    var container = this.selected();

    if(container && container.tagName.toLowerCase() != WYMeditor.BODY) {
        jQuery(container).after(sData);
    } else {
        jQuery(this._doc.body).append(sData);
    }
};

This code will take the passed html and insert it after the selected element in the editor. You might also want to check for html validity, make it possible to insert code directly at the selection (i.e. just paste inline elements or split the selected element to insert a new block element) and so on.

Hope this helps, cheers.

[jfh]

There was an insertAtCursor(html) function in 0.2, that needs to be ported to current version.
If you develop for FF, you can use the execCommand 'inserthtml', which will insert at HTML at the cursor position.
With MSIE, you'll need to get the caret position in order to insert the content - see getCaretPos() in 0.2 code.

FYI, we use dialogs otherwise the iframe selection is lost in MSIE (if the iframe loses the focus).
This issue is by design in this browser, but we've found a way - that will be implemented in 0.6 - to store the selection.
I guess you can avoid using dialogs in this specific case, because you don't really need to manipulate the selection.
HTH.

[netnak]

Thanks for these responses. I will certainly look, but I fear my Javascript skills are not up to it (which is why I need a way of writing my dialogs in ASP!).

So if there are others following this post, please join in the chase.

[mr_lundis]

Hi all!

I've been working on a port of the old insertAtCursor and getCaretPos functions. But unfortunately my computer just decided to crash, and I currently don't have the time to restore the work.
So I'll be posting the code tomorrow or maybe later on this week.

Cheers.

[Surt]

Hi,

i was working on it at:
viewtopic.php?f=3&t=383
using some code from a french post, you could see the code at the 3rd post.

[mr_lundis]

Hi,
i was working on it at:
viewtopic.php?f=3&t=383
using some code from a french post, you could see the code at the 3rd post.

Yeah, I know. I've even snitched some of you code.


Does anyone information on how Safari handles this? I haven't got the time to look in to the RTE functionality in Safari yet, however I've got things to work in most other browsers. (Can't test in IE 7/8 and Safari since I'm currently running Linux)

[mr_lundis]

Finally I've found some time to put everything together. I've packed everything as a plug in, you'll just need to include it then you're good to go.

Usage:
Call the insertAtCaret method whenever you wish to insert pure html into the editor.

Example:

Code: Select all

yourWymInstance.insertAtCaret('a html snippet');

You can get a reference to your current WYMeditor instance like this:

Code: Select all

yourWymInstance = jQuery.wymeditors(0);

Change the zero to match the index of the instance you want to access.

Download:

insertAtcaret.zip

(8.88 KiB) Downloaded 543 times

Alternate download:

insertAtcaret.tar.gz

(7.58 KiB) Downloaded 502 times

For additional details, see the README file.

[jfh]

Thanks! I've included the code in the core files, see r541.
The function is 'insert()' instead of 'insertAtCursor' or 'insertAtCaret()'.

If you want to discuss about it, or report a bug, please reopen and comment the ticket #120.

[netnak]

Having started this thread, I'm very,very grateful you guys have found a solution. Thank you!

[netnak]

Now I've tested it; it all works brilliantly. Thanks again. But I also now understand an earlier comment in this thread:

"FYI, we use dialogs otherwise the iframe selection is lost in MSIE (if the iframe loses the focus).
This issue is by design in this browser, but we've found a way - that will be implemented in 0.6 - to store the selection.
I guess you can avoid using dialogs in this specific case, because you don't really need to manipulate the selection.
HTH."

Unfortunately I do want to manipulate the selection in some instances. Yes, I can now insert my own HTML (derived from code that, typically, picks data from some database or other), but if the user comes back to edit their inserted snippet, they will select it and expect my code to understand its contents. So for this I guess I await 0.6 (and continue to grumble about all things IE...). The road map has 0.6 a mere week away. Is this still the case or have you a revised estimate?

[mr_lundis]

Having started this thread, I'm very,very grateful you guys have found a solution. Thank you!

You're welcome!

Unfortunately I do want to manipulate the selection in some instances. Yes, I can now insert my own HTML (derived from code that, typically, picks data from some database or other), but if the user comes back to edit their inserted snippet, they will select it and expect my code to understand its contents. So for this I guess I await 0.6 (and continue to grumble about all things IE...).

I'm sorry, but I can't see your problem here. If you want to open a dialogue, you'll need to open it in an external window for the time being. Or is it getting the current selection itself that you're having a hard time with?

The road map has 0.6 a mere week away. Is this still the case or have you a revised estimate?

0.6 probably won't be released any time soon. Primary focus right now is to get 0.5 out there first, and the 0.6 code is still very experimental.

[jfh]

FYI there's a new function available to wrap/unwrap inline content with custom elements such as span.
See r545.
The code is quite basic/beta ATM but already cross-browser.
A test page is available at http://files.wymeditor.org/wymeditor/tr ... /wrap.html

HTH