JS----文本编辑器

最新推荐文章于 2024-05-10 09:53:24 发布

damys

最新推荐文章于 2024-05-10 09:53:24 发布

阅读量1k

点赞数

分类专栏： JScript.Jquery JS小记文章标签：编辑器

本文链接：https://blog.csdn.net/damys/article/details/27172831

版权

JScript.Jquery 同时被 2 个专栏收录

81 篇文章 0 订阅

订阅专栏

JS小记

22 篇文章 1 订阅

订阅专栏

1.HTML 标签（web编辑）

contenteditable 是 HTML 中的一个属性，设置 HTML标签的 contenteditable=“true” 时，即可开启该元素的编辑模式。contenteditable 的作用相当神奇，可以让 div 或整个网页，以及 span 等等元素设置为可编辑。如果想要整个网页可编辑，可以在 body 标签内设置 contenteditable

2.功能特殊的函数：execCommand

execCommand 有三个参数：

　　Command Name – 命令名称；
　　ShowDefaultUI – 未实现，所以最好设置为 false；
　　ValueArgument – 命令的参数；

ValueArgument 可以设置为 null，当你要设置一行文本的标签的时候（h1，h2，p ...），你需要使用 formatBlock 命令，并把标签放到 ValueArgument 中

exexCommand 要执行的命令放到 data-role 属性中，然后编写简单的 JavaScript 都可以很容易地完成编辑器功能了。

核心代码:

$(function() {
    $('#editControls a').click(function(e) {
        switch($(this).data('role')) {
            case 'h1':
            case 'h2':
            case 'p':
                document.execCommand('formatBlock', false, '<' + $(this).data('role') + '>');
                break;
            default:
                document.execCommand($(this).data('role'), false, null);
                break;
        }
    })
});

完整代码如下:

下载:bootstrap.css,font-awesome.css

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Editable</title>
        <link href="assets/css/bootstrap-combined.min.css" rel="stylesheet">
        <link href="assets/css/font-awesome.css" rel="stylesheet">
        <style type="text/css">
            #editor {
                resize: vertical;
                overflow: auto;
                border: 1px solid silver;
                border-radius: 5px;
                min-height: 100px;
                box-shadow: inset 0 0 10px silver;
                padding: 1em;
            }
        </style>
    </head>
    <body>
        <div class="content">
            <div class="container-fluid">
                <div id='pad-wrapper'>
                    <div id="editparent">
                        <div id='editControls' class='span12' style='text-align:center; padding:5px;'>
                            <div class='btn-group'>
                                <a class='btn' data-role='undo' href='#'><i class='icon-undo'></i></a>
                                <a class='btn' data-role='redo' href='#'><i class='icon-repeat'></i></a>
                            </div>
                            <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 class='btn-group'>
                                <a class='btn' data-role='justifyLeft' href='#'><i class='icon-align-left'></i></a>
                                <a class='btn' data-role='justifyCenter' href='#'><i class='icon-align-center'></i></a>
                                <a class='btn' data-role='justifyRight' href='#'><i class='icon-align-right'></i></a>
                                <a class='btn' data-role='justifyFull' href='#'><i class='icon-align-justify'></i></a>
                            </div>
                            <div class='btn-group'>
                                <a class='btn' data-role='indent' href='#'><i class='icon-indent-right'></i></a>
                                <a class='btn' data-role='outdent' href='#'><i class='icon-indent-left'></i></a>
                            </div>
                            <div class='btn-group'>
                                <a class='btn' data-role='insertUnorderedList' href='#'><i class='icon-list-ul'></i></a>
                                <a class='btn' data-role='insertOrderedList' href='#'><i class='icon-list-ol'></i></a>
                            </div>
                            <div class='btn-group'>
                                <a class='btn' data-role='h1' href='#'>h
                                    <sup>
                                        1
                                    </sup>
                                </a>
                                <a class='btn' data-role='h2' href='#'>h
                                    <sup>
                                        2
                                    </sup>
                                </a>
                                <a class='btn' data-role='p' href='#'>p</a>
                            </div>
                            <div class='btn-group'>
                                <a class='btn' data-role='subscript' href='#'><i class='icon-subscript'></i></a>
                                <a class='btn' data-role='superscript' href='#'><i class='icon-superscript'></i></a>
                            </div>
                        </div>
                        <div id='editor' class='span12' style='' contenteditable>
                            <h1>This is a title!</h1>
                            <p>
                                This is just some example text to start us off
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript">
        </script>
        <script src="http://cdn.bootcss.com/bootstrap/3.0.0/js/bootstrap.min.js">
        </script>
        <script type="text/javascript">
            $(function(){
                $('#editControls a').click(function(e){
                    switch ($(this).data('role')) {
                        case 'h1':
                        case 'h2':
                        case 'p':
                            document.execCommand('formatBlock', false, '<' + $(this).data('role') + '>');
                            break;
                        default:
                            document.execCommand($(this).data('role'), false, null);
                            break;
                    }
                    
                })
            });
        </script>
    </body>
</html>

damys

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JS----文本编辑器

1.hcontenteditable 是 HTML 中的一个属性，设置 HTML标签的 contenteditable=“true” 时，即可开启该元素的编辑模式。contenteditable 的作用相当神奇，可以让 div 或整个网页，以及 span 等等元素设置为可编辑。
复制链接

扫一扫