Using RTE in other contentEditable Div/Span

[Sean Patterson]

I am using contentEditable=true Div's and Span's as the "source" that the RTE of the RadEditor works on.  It works for the "standard" items that are left click based and most dialog based inserts (excluding things like AJAX spell check where the source is drawn from the RadEditor DIV ?? ).  But all the right click menus of the RTE are not available to these areas, I assume because the context menus are binded to the RadEditor created DIV.  Is there there a way to port those to these contentEditable areas?  I would like to do it client-side as a delegation to the body based on the div/span being conentEditable or not (using jQuery).  This is because I turn the ability on and off so the delegation would need to be client-side and check the attribute of contentEditable=true before rendering the context menu - if not I'll just cancel the event.

Is there an example of how to bind these missing functions to other divs/spans that are not generated by the RadEditor servercontrol ?  And/or the list of the eventHanders that I need to port?

Thanks.

[Dobromir]

Hi Sean,

I am not quite sure I understand what exactly you are trying to achieve. Could you please describe in more details the exact scenario? Sample page demonstrating what you are trying to achieve will be of great help solving the case.

Regards,
Dobromir
the Telerik team

[Sean Patterson]

Dobromir,
Thanks.  Let me explain a little more, then present my code.  I have a interactive document building page.  The document itself is built at the paragraph and list levels (and some other stardardize formatting items - waring statements, etc).  The content of each of these items is stored in a database row as well as other attribute associated with the data that is store in the attribute of the DOM nodes when viewing the page.  
   Each of these DOM nodes can only be edited when the user "turns it on for editing" and only one item a time can be edited by a single browser session.  I have a pub/sub system in the background that detects when the content of a area under edit changes and it send off the change to a httpHandler (async) and then other users looking at the same document have that paricular element updated in "real time" (long-polling).  
    I love the functionaly that RadEditor gives me over other WYSIWYG editors but (and I may be mistake here) I need to create an editor instance for every available item that I want under edit (if I want it edited in realative position in the DOM) or do as I originally did and simply loading a single editor in DIV mode and then detach/reattach the DIV as needed.  The toolbar is set to the top of the screen so it stays after the editor DIV is detached.  Then when a user wanted ot edit a particualr DOM element I set the HTML inside the editor, hide the contents of the DOM element about to be edited, and appened the RadEditor after the hidden DOM element (then resized as needed).  I would then reverse the process when they were done editing.  This approach worked, but it is not as smooth as simiply setting the attribute of the DOM element I wanted edited to contentEditable = true. Moving the editor DIV around is cluncky and makes for a lot of DOM manipulation.
    So I stopped doing that for user flow reasons and I currently load the editor then detach it leaving only the toolbar avaible and use the contentEditable attrutites as needed.  However I loose all functionaly of the toolbar that does not rely on Broswer based document.execCommand (I only need IE to work).  So pretty much I am left with just a pretty toolbar that I could build myself.  
    What I would like to do and the question is how to bind the events that get attached to the RadEditor DIV (as well as the toolbar items?) at runtime of the page and insted delegate them to the BODY via $('body').delegate('DIV.underedit','click', function(e) {})  
I assign the div underedit class at the same time I make the DIV contentEditable.  My understanding of the RadEditor in DIV mode - and from my inspection of the DOM - it is really just a contentEditable DIV. Exepct I don't know what event handlers get binded to that div in order to replicate the handlers any contentEditable DIV that is not rendered via a RadEditor Control.
    My understanding is you have some sort of solution for this as it was suggested by Rumen in
http://www.telerik.com/community/forums/aspnet/editor/non-editable-region.aspx 

My current coding:

Currently onLoad function:

  function EditorLoaded(editor, args) {
  _TK_editor = $telerik.findEditor("<%=RadEditor1.ClientID%>");
  _$editor = $('#editme').detach();  //#editme is a wrapper around the RadEditor
}

What USED to happen user dbl clicks: (ie. when I was messing with the DOM to move the editor around)

function editContents($thisedit) {
if (_isEditing == false) {
$('#MainContainer').selectable("disable").removeClass('ui-selectable-disabled ui-state-disabled')
}
else {
killEdit(); // function to detach if it exists elsewhere in the page
}
var editorContent =  $thisedit.find('.cnt').html();
/*set the content of the Text Editor and show it*/

 if (!!editorContent) {
  _TK_editor.set_html(editorContent); //reset the content
   }
    else {
   _TK_editor.set_html("New Content");
 }

    var element = _TK_editor.get_element();
   var elementheight = $thisedit.find('.cnt').height();
     var elementwidth = $thisedit.width();
   $thisedit.find('.cnt').hide();
  _$editor.insertAfter($thisedit);

_isEditing = true;
_$currentEdit = $thisedit;
 _TK_editor.onParentNodeChanged();
 _TK_editor.setSize(elementwidth, elementheight);

////////////// START PUBSUB timers, etc/////////////////
}

What I currently use:
-- SAME detach function but now then the user dbl clicks:

function editContents($thisedit) {
if (_isEditing == false) {
$('#MainContainer').selectable("disable").removeClass('ui-selectable-disabled ui-state-disabled')
}
else {
killEdit(); // reset any DIV with contentEditable = true
}
_isEditing = true;
_$currentEdit = $thisedit;
$thisedit.attr('contentEditable', 'true')
///// PUBSUB routine//////
}

The entire system works both ways but it is clunch moving that RadEditor Div around and resizing it, etc.  Also just creating muliple radEditor instances for each available DOM element make for a lot of extra Bandwidth in addition to the fact that the user can insert new DOM element into the document to add new paragarphs, etc.  All these operation of this occurs with out postback.  Putting the whole thing in a giant RadEditor and turing on an doff the divs does not relaly work either.  Since if they are not editing the div, clicking on it updates aother areas of the page based on Meta Data of the DOM elemenent which can than be subsequently updated by other page interactions.
    In the end really just looking to how to make another contentEditable areas as the sorce to the non standard Browser editor buttons as well as the context menus, etc within the editor.
    Hope you understand more my intent and needs. 

Thanks!
-Sean



    
    

[Rumen]

Hi Sean,

Thank you for the very detailed explanation.

The requested functionality is very complex and it is not supported out-of-the box by RadEditor. It requires writing a lot of hacks and could produce unwanted side effects and even bugs.

What you can try is the solutions provided in the following KB article: Setting hidden RadEditor in edit mode on click and putting it in non editable mode onblur. They are suitable for scenarios when the performance is an important requirement.

Greetings,
Rumen
the Telerik team