Question

我正在尝试使用 javascript 创建一个简单的富文本编辑器，它目前只有一个按钮，即粗体按钮（仅为了简单起见）。

但是我希望按钮的颜色变为蓝色，以显示粗体按钮处于活动状态，因此病房中的所有文本都是粗体。

当我完成粗体加工时。我再次点击粗体按钮，它的颜色应该变为银色，显示粗体不再有效。我写了以下代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Rich text editor</title>
    <script src="https://use.fontawesome.com/bac4a9a15f.js"></script>
</head>
<body onload="enableEditMode()">

    <button onclick="hlite()" id="bold" style="color:silver;display:block;"><i class="fa fa-bold"></i></button>

<iframe name="richTextField" src="" frameborder="0" style="width:1000px; height:500px; border:1px solid black;"></iframe>
<script>
    function enableEditMode(){
        richTextField.document.designMode = 'on';
    }

    function execCmd(command) {
        richTextField.document.execCommand(command, false,null);
    }

    function hlite(){

        color = document.getElementById('bold').style.color;
       if(color == 'silver'){
           console.log(color);
        document.getElementById('bold').style.color = "blue";
        execCmd('bold');
        color = 'blue';
       }else {

        document.getElementById('bold').style.color = "silver";
        }

    }
    </script>
</body>
</html>

在富文本编辑器中更改按钮颜色

0 个答案: