Обнаружить, если текст выделен жирным шрифтом

Я пытаюсь создать редактор WYSIWYG, и до сих пор у меня его есть, поэтому вы можете выбрать текст и нажать «Сделать жирным», чтобы выделенный текст выделен жирным шрифтом. Это буквально просто обтекает теги < b> (без пробелов) вокруг выделенного текста. Но моя проблема в том, что если я хочу, чтобы не-полужирный, что мой сценарий имеет некоторые проблемы ...Обнаружить, если текст выделен жирным шрифтом

До сих пор, вот мой сценарий:

<script language="javascript"> 
function format(tag) //defines function format 
{ 
    var editor = document.getElementById('editor'); 
    var txt = ''; 
    var tester = document.getElementById('tester'); 
    if (window.getSelection) //if your browser uses this method of text selection 
    { 
     txt = window.getSelection(); 
      } 
    else if (document.getSelection) //if your browser uses this method of text selection 
    { 
     txt = document.getSelection(); 
      } 
    else if (document.selection) //if your browser uses this method of text selection 
    { 
     txt = document.selection.createRange().text; 
      } 
    else return; //Return this 
    matched = editor.innerHTML.match(txt); //Find the selected text in the editor 
//  if (matched.style.font-weight = "600") {tester.innerHTML = "already bold";} //if the selected text is bold, say 'already bold' DOES NOT WORK 
//  else {tester.innerHTML = "not bold";} //if it doesn't... 
    editor.innerHTML = editor.innerHTML.replace(matched,"<"+tag+">"+matched+"</"+tag+">");//Wrap <b> tags around it 
} 
</script> 
<input type="button" value="Make Bold" onmousedown="format('b')"> 
<input type="button" value="Make Italic" onmousedown="format('i')"> 
<div id='editor' onclick="javascript:this.designMode='on';" designmode="on" contenteditable="true">Edit Box</div> 

<span id="tester">testing span</span>

Если попробовать его можно ввести в это поле и выберите текст и нажмите «Сделать жирным», и он будет выделен жирным шрифтом. Теперь снова нажмите «Сделать жирным», но ничего не произойдет. Это просто добавление другого тега < b> вокруг выделенного текста. Я хочу, чтобы он сделал его нежирным; нормальный.

Как это сделать?

Спасибо :)

источник

2010-07-24 Scott

Существует миллион редакторов WYSIWYG, доступных по каждой лицензии, которую вы можете назвать. Если вы не делаете это исключительно как учебное упражнение, я советую не изобретать колесо. – mikerobi

баловаться с HTML в виде строки это плохая идея. Существует два варианта: первый - получить элемент, содержащий текущий выбор пользователя, и использовать методы и свойства DOM, такие как parentNode, чтобы проверить, выделен ли он. Это сложно сделать в кросс-браузере. Намного проще использовать метод execCommanddocument, который автоматически переключит смелость. Он поддерживается в последних версиях всех основных браузеров.

document.execCommand("bold", false, null);

UPDATE

Обратите внимание, что в Firefox (и, возможно, другие браузеры), это не имеет никакого эффекта, если документ не имеет designMode включен. Вот полный пример. Выделите текст и нажмите Ctrl-B:

<html> 
<head> 
    <title>Test</title> 
    <script type="text/javascript"> 
     window.onload = function() { 
      document.designMode = "on"; 
     }; 

     function keyDown(evt) { 
      if (evt.keyCode == 66 && evt.ctrlKey) { 
       document.execCommand("bold", false, ""); 
      } 
      return false; 
     } 
    </script> 
</head> 
<body onkeydown="return keyDown(event);"> 
    <div>I like tea <b>with milk</b></div> 
</body> 
</html>

источник

2010-07-24 20:22:48

Спасибо :)! Я слышал об этой команде, но ни у кого нет объяснений, которые я понимаю. Нет примера. Не могли бы вы привести пример этой работы? Я попробовал просто включить его в функцию, но ничего не произошло, когда я вызвал функцию :( – Scott

Большое спасибо! – Scott

Обнаружить, если текст выделен жирным шрифтом

ответ

Смежные вопросы