<span class="yellow_bold">This will be </span><span class="blue_bold">the </span><span class="yellow_bold"></span><span class="red_bold"><span class="blue_bold">end</span> of it all </span><span class="blue_bold">because</span>...
Where I think my problem is coming from is that when I ask for the selected element in the command event - I only get the first word and not the second. Is there someway for me to get each element (word) in turn and process them or is there an entirely different way I could be handling this to get the result I need?
If I step into the code I see the following:
var selectedHTML = "";
var selectedHtmlElement;
var selectionObject;
function OnClientCommandExecuting(editor, args) {
selectedHTML = editor.getSelectionHtml(); // becomes "<font class="yellow_bold">the </font><font class="red_bold">end</font>"
selectedHtmlElement = editor.getSelectedElement(); // becomes "This will be the end of..."
selectionObject = editor.getSelection(); // becomes an object I don't know how to use - maybe it is helpful and I don't know it
}
function OnClientCommandExecuted(editor, args) {
var commandName = args.get_commandName();
if (commandName == "ApplyClass") {
var className = args.get_value();
if (className == "") return;
var selectedElement = editor.getSelectedElement(); // becomes an element with innerHtml = "the "
var parentElement = getParentSpan(selectedElement.parentNode);
if (parentElement) {
var newNode1 = parentElemen
The OnClientCommandExecuted is only fired once and I only get the one word/element when I request getSelectedElement. Is there some way to access the other word/element in this event as well so I can process it. And note how the element returned by getSelectedElement is different between the CommandExecuted and CommandExecuting events. The latter returns the top parent element that contains all the words/elements and not just the 2 that are affected by the style change.
<telerik:RadScriptBlock ID= "voteScript" runat= "server" >
<script type= "text/javascript" >
var selectedHTML = "" ;
var selectedHtmlElement;
var selectionObject;
function OnClientCommandExecuting(editor, args) {
selectedHTML = editor.getSelectionHtml();
selectedHtmlElement = editor.getSelectedElement();
selectionObject = editor.getSelection();
}
function OnClientCommandExecuted(editor, args) {
var commandName = args.get_commandName();
if (commandName == "ApplyClass" ) {
var className = args.get_value();
if (className == "" ) return ;
// alert("executing on " + selectedHTML);
var selectedElement = editor.getSelectedElement();
var parentElement = getParentSpan(selectedElement.parentNode);
if (parentElement) {
// break the content into 3 pieces - before selected text, the selected text, and after selected text and apply span styles to each
var newNode1 = parentElement.cloneNode( false );
var newNode2 = selectedElement.cloneNode( true );
newNode2.innerHTML = newNode2.innerText;
// alert(newNode2.innerHTML);
newNode1.innerHTML = parentElement.firstChild.nodeValue;
parentElement.innerHTML = parentElement.lastChild.nodeValue;
parentElement.parentNode.insertBefore(newNode1, parentElement);
parentElement.parentNode.insertBefore(newNode2, parentElement);
}
else {
var justText = selectedElement.innerText;
var newNode = document.createElement( "FONT" );
newNode.setAttribute( "class" , className);
newNode.innerHTML = justText;
selectedElement.parentNode.replaceChild(newNode, selectedElement);
}
}
}
function getParentSpan(el) {
if (!el || el == null ) return false ;
while (el && el.tagName && el.tagName.toLowerCase() != "font" && el.tagName.toLowerCase() != "body" ) {
el = el.parentNode;
}
if (el == null || !el.tagName || el.tagName.toLowerCase() == "body" ) return false
else return el;
}
</script>
</telerik:RadScriptBlock>
|