0

Hey Stackoverflow comunity,

There is a method str.bold() to wrap a text in <b></b> tags. This is just perfect for a tiny WYSIWYG editor (I know some will say I should take one of hundrets open source solutions, but this is for learning purposes too).

The problem is how to unbold the text.

Here is my try http://jsfiddle.net/Kxmaf/178/

I know there is editor.execCommand('bold', false, ''); but this is producing different HTML results on each browser. I need to have only <b></b>, <i></i>, <u></u>

Any help is much appreciated :)

Aley
  • 8,540
  • 7
  • 43
  • 56

2 Answers2

2

what about looping over a selected string with javascript when pushing the specific style-button. you just could save the several tags like , , .... inside an array, and than loop through the specific string you have selected. so you even can change the style of the style-buttons when any of the tags has been found, to let the user know which style is just used. After deselecting the style just loop again through and delete the tags from string.

Alex Cio
  • 6,014
  • 5
  • 44
  • 74
2

You need to consider the case where the user's selection spans paragraphs. For example (selection boundaries indicated with pipes):

<p>One <b>t|wo</b></p>
<p>Thr|ee</p>

To handle this, you need to wrap and all the text nodes and partial text nodes within the user's selection in <b> tags while also detecting which text nodes are already bold and leaving them alone. This is non-trivial, and document.execCommand() handles it all for you, as do the big WYSIWYG editors.

Most browsers allow switching between style modes, allowing you to choose between styling using elements such as <b> and <i> or styling using <span> elements with style attributes. You can do this using the the "StyleWithCSS" command, falling back to "UseCSS" in older browsers. The following switches commands to use the non-CSS version:

try {
    if (!document.execCommand("StyleWithCSS", false, useCss)) {
        // The value required by UseCSS is the inverse of what you'd expect
        document.execCommand("UseCSS", false, !useCss);
    }
} catch (ex) {
    // IE doesn't recognise these commands and throws.
}

Finally, if you switched to using CSS classes instead of <b> etc., you could use the CSS class applier module of my Rangy library.

Tim Down
  • 318,141
  • 75
  • 454
  • 536
  • Thats true, but if I use `document.execCommand()` it differs in the HTML result. How can I force tags instead of spans with style properties? – Aley Jun 28 '12 at 10:28
  • @Aley: You can do that with `document.execCommand("StyleWithCSS", false, false)` in most browsers and `document.execCommand("UseCSS", false, false)` in older browsers. However, some browsers will use `` instead of ``. – Tim Down Jun 28 '12 at 10:36
  • Thank you for your greate answer. I have implmented your suggestion and everything works good, but there is only one problem. If the iframe is hidden initialy the settings will not be applied :( Here is a http://jsfiddle.net/Kxmaf/179/ – Aley Jun 28 '12 at 13:42
  • @Aley: The problem is that you're writing to the iframe when it's inside an element with `display: none`. When an iframe is hidden and shown in that way, I think some aspects of it are reset. Here's a modified jsFiddle: http://jsfiddle.net/timdown/Kxmaf/208/ – Tim Down Jun 28 '12 at 23:27
  • Thanks Tim. The problem is that the iframe that I want tp apply the changes on is invisible and than it becomes visible. In your JsFiddle it is already visible from the beginning on. Is it possible to StyleWithCSS anyway? I have tried it with contentEditable on a div and this works just fine. But with a div I have to modify the current document, which is bad when I want to have multiple editors with different settings. – Aley Jun 29 '12 at 08:26
  • @user960567: If you mean `document.execCommand()`, it works for non-editable content in IE but not other browsers. A workaround is to temporarily set `document.designMode = "on"` before calling `document.execCommand()` and then switch it off again afterwards. – Tim Down Jul 31 '12 at 16:13
  • @TimDown, Thanks, your posts are very helpful in this area. – Imran Qadir Baksh - Baloch Jul 31 '12 at 17:50