代码之家 › 专栏 › 技术社区 › Scott

检测文本是否粗体

wysiwyg editor javascript

Scott · 技术社区 · 14 年前

<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>在所选文本周围添加标记。我想让它变得不大胆;正常。

我该怎么做?

1 回复 | 直到 14 年前

Tim Down 14 年前

把HTML作为字符串处理是个坏主意。有两个更好的选择:第一个是获取包含当前用户选择的元素,并使用DOM方法和属性,例如 parentNode execCommand 方法 document ,将自动切换粗体。所有主流浏览器的最新版本都支持它。

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

更新

注意,在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>

推荐文章

edluis97 · 所见即所得编辑器中的表问题

6 年前

conterio · 将带有图像的Html(WYSIWYG)发布到ASP。网络核心控制器

6 年前

A.S.J · ReactJS应用程序中的Froala:内联编辑

6 年前

tquill · Rails sanitize不允许rgb颜色

7 年前

kelvin · 使用tinymce编辑器时,我的数据不会发布到数据库中

7 年前

Finglish · 带草稿。js是否可以使用类名创建自定义块跨度

7 年前

MagTun · TinyMce Shorcut:使用keybaurd Shorcut更改所选文本的背景色

7 年前

Tom K · Drupal:阅读更多所见即所得

8 年前

Dhanendran · Drupal 7 CKEditor在从文本区域替换媒体文件时未呈现

9 年前

Flood Gravemind · Stackoverflow使用的所见即所得编辑器是什么?

11 年前