制作最简单的富文本编辑器

最新推荐文章于 2024-08-13 08:58:33 发布

风风草

最新推荐文章于 2024-08-13 08:58:33 发布

阅读量1.7k

点赞数 1

分类专栏： JS H5

本文链接：https://blog.csdn.net/u011523953/article/details/104469467

版权

JS 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

1、借助HTML DOM的 contentEditable 属性
（描述元素的内容是否可编辑）来让div内容可编辑

2、document的execCommand 方法
该方法允许运行命令来操纵可编辑内容区域的元素。当使用contentEditable时，调用 execCommand() 将影响当前活动的可编辑元素。如何使用可以查看execCommandMDN对应的文档说明

以下为富文本编辑器完整代码：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>富文本编辑器G</title>
        <link href="/static/assets/vendors/bootstrap/css/bootstrap.css" rel="stylesheet">
        <style>
            body{
            padding: 100px 200px;
            }
            #editor {
                height:500px;
                margin: 30px;
            }
        </style>
    </head>
    <body>
        <div id="editparent">
            <!-- 编辑器控制按钮 -->
            <div id='editControls' style='text-align:center; padding:5px;'>                           
                <div class='btn-group'>
                    <a class='btn' data-role='bold' href='#'><b>Bold</b></a>
                    <a class='btn' data-role='italic' href='#'><em>Italic</em></a>
                    <a class='btn' data-role='underline' href='#'><u><b>U</b></u></a>
                    <a class='btn' data-role='strikeThrough' href='#'><strike>abc</strike></a>
                </div>
            </div>
            <!-- 编辑器可输入内容处 -->
            <div id='editor' class='form-control'  contenteditable>
                <h3>在这里输入内容</h3>
            </div>
        </div>
        <script src="/static/assets/vendors/jquery/jquery.js"></script>
        <script>
            $(function() {
                $('#editControls a').click(function(e) {
                    document.execCommand($(this).data('role'), false, null);                  
                })
            });
        </script>
    </body>
</html>