The Editor's Indent/Outdent feature is a crime against HTML, as has been discussed before in this forum.
I'm trying to fix this myself and would like some help coming up with a solution that anyone using RadEditor can implement.
The Problem:
The Indent button simply wraps the selected elements in a <blockquote> tag. In most web browsers, this looks like you're indenting the text. However, those of us that respect HTML know well that the blockquote element is intended for quoting other people's text, not indenting.
To a screen reader for the blind, a search engine or any other semantic parser of HTML, using a blockquote tag has a much different meaning than indenting.
The Solution:
Personally, I approach indenting a section of content by wrapping it in a <div> with a margin-left style applied to it. I create a CSS class called "indent" for that purpose.
Others might add a margin-left to each element to be indented, rather than wrapping the section.
Achieving the Solution in RadEditor:
Here's where I'm stuck.
Approach #1:
My preferred approach is to obtain an array of the DOM elements selected in the Editor. That way, I can simply add a <div> before the first element and make the selected elements children of the indention <div>.
The problem: I don't know how to retrieve an array of the selected elements. editor.getSelectedElement() gives me the last of the selected elements but there's no editor.getAllSelectedElements(). If more than one line of text is selected, editor.getSelectedElement() will not work.
Approach #2:
Another approach is editing the HTML as a string. editor.getSelection().getHtml() gives me all the HTML that is selected in the Editor. editor.pasteHTML() puts the modified HTML back. Like approach #1, wrapping the HTML in <div> tags could achieve the desired result.
The problem: If the opening or closing <p> tag is not part of the selection (i.e. partial line selected), the resulting <div>-wrapped HTML is malformed.
This might work if I had a way to read ahead to the closing tag and read behind to the opening tag. But I haven't found an obvious way to do this.
Does anyone have any ideas on solving approach #1 or #2? How about a different approach that I haven't considered?
I appreciate your input.
Jeff
I'm trying to fix this myself and would like some help coming up with a solution that anyone using RadEditor can implement.
The Problem:
The Indent button simply wraps the selected elements in a <blockquote> tag. In most web browsers, this looks like you're indenting the text. However, those of us that respect HTML know well that the blockquote element is intended for quoting other people's text, not indenting.
To a screen reader for the blind, a search engine or any other semantic parser of HTML, using a blockquote tag has a much different meaning than indenting.
The Solution:
Personally, I approach indenting a section of content by wrapping it in a <div> with a margin-left style applied to it. I create a CSS class called "indent" for that purpose.
Others might add a margin-left to each element to be indented, rather than wrapping the section.
Achieving the Solution in RadEditor:
Here's where I'm stuck.
Approach #1:
My preferred approach is to obtain an array of the DOM elements selected in the Editor. That way, I can simply add a <div> before the first element and make the selected elements children of the indention <div>.
The problem: I don't know how to retrieve an array of the selected elements. editor.getSelectedElement() gives me the last of the selected elements but there's no editor.getAllSelectedElements(). If more than one line of text is selected, editor.getSelectedElement() will not work.
Approach #2:
Another approach is editing the HTML as a string. editor.getSelection().getHtml() gives me all the HTML that is selected in the Editor. editor.pasteHTML() puts the modified HTML back. Like approach #1, wrapping the HTML in <div> tags could achieve the desired result.
The problem: If the opening or closing <p> tag is not part of the selection (i.e. partial line selected), the resulting <div>-wrapped HTML is malformed.
This might work if I had a way to read ahead to the closing tag and read behind to the opening tag. But I haven't found an obvious way to do this.
Does anyone have any ideas on solving approach #1 or #2? How about a different approach that I haven't considered?
I appreciate your input.
Jeff
2 Answers, 1 is accepted
0
Hello Jeff,
Please, note that RadEditor uses the execCommand method of the browser's rich text editing engine, which produces bloquotes when the the Indent / Outdent commands are executed. This is a browser behavior not controlled by RadEditor.
It is completely possible, and in fact happens quite often that a selection starts in the middle of an element, and ends in the middle of another. Those elements ARE NOT fully selected. You certainly cannot expect that the user selection always incorporates selected elements completely and in fact simply determining whether elements are partially or fully selected is a great challenge in itself which is accomplished in a very different manner in different browsers. Besides, newer browser versions tend to break things e.g. FF3 vs FF2 or Safari 4 vs Safari 3 vs Safari 2.
Perhaps the best way is to implement this as a separate solution using an editable DIV element
<div contenteditable="true" style="1px solid red;width:300px;height:300px;">sample content</div>
and using Text Ranges. Here are more articles providing information about the range selection:
http://www.quirksmode.org/dom/range_intro.html
and
http://www.wrox.com/WileyCDA/Section/JavaScript-DOM-Ranges-Page-2.id-292302.html
Kind regards,
Rumen
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Please, note that RadEditor uses the execCommand method of the browser's rich text editing engine, which produces bloquotes when the the Indent / Outdent commands are executed. This is a browser behavior not controlled by RadEditor.
It is completely possible, and in fact happens quite often that a selection starts in the middle of an element, and ends in the middle of another. Those elements ARE NOT fully selected. You certainly cannot expect that the user selection always incorporates selected elements completely and in fact simply determining whether elements are partially or fully selected is a great challenge in itself which is accomplished in a very different manner in different browsers. Besides, newer browser versions tend to break things e.g. FF3 vs FF2 or Safari 4 vs Safari 3 vs Safari 2.
Perhaps the best way is to implement this as a separate solution using an editable DIV element
<div contenteditable="true" style="1px solid red;width:300px;height:300px;">sample content</div>
and using Text Ranges. Here are more articles providing information about the range selection:
http://www.quirksmode.org/dom/range_intro.html
and
http://www.wrox.com/WileyCDA/Section/JavaScript-DOM-Ranges-Page-2.id-292302.html
When you are ready with the implementation of your custom Indent and Outdent features send us the code and we will integrate it in RadEditor.
Kind regards,
Rumen
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
0
Jeff
Top achievements
Rank 1
Rank 1
answered on 04 Sep 2009, 06:16 PM
Hi Rumen,
I am aware that this is a browser behavior, not something implemented by telerik. I didn't mean to imply otherwise.
Thanks for pointing out execCommand. That opens up a new world of possibilities for working with the Editor content.
I'm not planning on tackling this right away unless an inspiring solution strikes me or someone else on this forum. I've already invested a great deal of time on this with little to show for it. Hand-editing the HTML is a better use of my time at this point.
Thanks for your insights.
Jeff
I am aware that this is a browser behavior, not something implemented by telerik. I didn't mean to imply otherwise.
Thanks for pointing out execCommand. That opens up a new world of possibilities for working with the Editor content.
I'm not planning on tackling this right away unless an inspiring solution strikes me or someone else on this forum. I've already invested a great deal of time on this with little to show for it. Hand-editing the HTML is a better use of my time at this point.
Thanks for your insights.
Jeff