HTML5进阶-contentEditable属性详解

偏执的太偏执、 2022-01-27 08:11 273阅读 0赞

> HTML中的contentEditable的属性可以打开某些元素的可编辑状态．也许你没用过contentEditable属性．甚至从未听说过．contentEditable的作用相当神奇．可以让div或整个网页，以及span等等元素设置为可写。我们最常用的[输入文本][Link 1]内容便是input与textarea，使用contentEditable属性后，可以在div,table,p,span,body,等等很多元素中输入内容．

### 简单效果： ###

![20190526003835179.png][]![20190526003835184.png][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzk5NzQz_size_16_color_FFFFFF_t_70][]

--------------------

点击按钮下方文字即可编辑文本信息，选中你编辑的文本，点击上方按钮会改变文本相应的字体。

### 代码展示： ###

HTML：

（记得引用jQuery）

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title> 
        <script src="jquery-3.3.1.js"></script>
        <script src="index.js"></script>
    </head>
    <body>                
        <h2>编辑器</h2>
        <div id="editor">
            <button id="bold"><b>加粗</b></button>
            <button id="italic"><i>斜体</i></button>
            <button id="underline"><u>下划线</u></button>
            <div contentEditable="true" >
                这里面<b>已经</b>有 <i>一些</i>富<u>文本</u>了
            </div>
        </div>
    
        <script>        
        new Editor('#editor')
        </script>
           
    </body>
    </html>

JavaScript：

function Editor(selector){
        this.$editor = $(selector)
        this.bindEvents_()
    }
    Editor.prototype.bindEvents_ = function(){
        this.$editor.on('click' , 'button' , function(e){
            switch(e.currentTarget.id){
                case 'bold':
                    document.execCommand('bold')
                    break
                case 'italic':
                    document.execCommand('italic')
                    break
                case 'underline':
                    document.execCommand('underline')
                    break
    
            }
        })
    }

[Link 1]: https://baike.baidu.com/item/%E8%BE%93%E5%85%A5%E6%96%87%E6%9C%AC
[20190526003835179.png]: https://img-blog.csdnimg.cn/20190526003835179.png
[20190526003835184.png]: https://img-blog.csdnimg.cn/20190526003835184.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzk5NzQz_size_16_color_FFFFFF_t_70]: /images/20220127/2d4038d676b3454e91664c82874da570.png