Detect if text is bold_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-01-08 13:03 出处：网络

I\'m trying to make a WYSIWYG editor, and so far I have it so you can select text and click \'Make Bold\' to make the selected text bold.It literally just wraps < b> (no space) tags around the sele

I'm trying to make a WYSIWYG editor, and so far I have it so you can select text and click 'Make Bold' to make the selected text bold. It literally just wraps < b> (no space) tags around the selected text. But my problem is that if I want to un-bold that, my script has some trouble...

So far, here is my script:

<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 Bol开发者_JAVA技巧d" 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>

If you try it out you can type in that box and select text and click Make Bold and it will be bold. Now click Make Bold again but nothing happens. It's just adding another < b> tag around the selected text. I want it to make it un-bold; normal.

How do I do that?

Thanks :)

Messing with the HTML as a string is a bad idea. There are two better options: the first is to obtain the element containing the current user selection and use DOM methods and properties such as parentNode to test if it's bold. This is tricky to do cross-browser. Much easier is to use the execCommand method of document, which will automatically toggle boldness. It's supported in recent versions of all major browsers.

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

UPDATE

Note that in Firefox (and possibly other browsers), this has no effect unless the document has designMode switched on. Here's a full example. Highlight some text and press 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>