jquery 建议编辑器

最新推荐文章于 2025-09-10 16:16:57 发布

转载最新推荐文章于 2025-09-10 16:16:57 发布 · 79 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/jami918/p/3584956.html

文章标签：

#javascript #ViewUI

用谷歌搜索找了很久，发现所有的插件都是功能太复杂，不是我想要的。所以，我决定我自己来实现需要的编辑功能。刚开始我觉得应该要花费很多的时间，因为我想象内容编辑功能应该是很复杂的。

　　但事实证明，它是如此简单，让我十分惊讶！借助 HTML5 特性，所有的工具都已经可用，所有你需要做的只是配合他们编写一些非常简单的 JavaScript 代码调用就可以了。

　　你需要两样东西，第一是：

1	`contenteditable`

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

　　我们最常用的输入文本内容是 input 与 textarea，使用 contenteditable 属性后，可以在div、table、p、span、body等等很多元素中输入内容。如果想要整个网页可编辑，可以在 body 标签内设置 contenteditable。contenteditable 已在 HTML5 标准中得到有效的支持.

　　第二样东西是一个功能特殊的函数：

1	`execCommand`

　　execCommand 让我们能够对 contenteditable 区域的内容做一些相当复杂的操作。如果你想了解更为详细的内容可以看这里：The Mozilla Docs。

　　从本质上讲， execCommand 有三个参数：

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

　　多数情况下，ValueArgument 可以设置为 null，但有一种情况：当你要设置一行文本的标签的时候（h1，h2，p 等），你需要使用 formatBlock 命令，并把标签放到 ValueArgument 中。

　　现在，事情就很简单了，我们把 exexCommand 要执行的命令放到 data-role 属性中，然后编写简单的 JavaScript 都可以很容易地完成编辑器功能了。核心代码其实就10行：

<! DOCTYPE html >
< html >
     < head >
     < title >Editable WYSIWYG </ title >
         < link href ="http://www.bootcss.com/assets/dist/css/bootstrap.min.css" rel ="stylesheet" >
         < link href ="font-awesome.css" rel ="stylesheet" >
         < style >
            #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://www.bootcss.com/assets/js/jquery.js" ></ script >
         < script src ="http://www.bootcss.com/assets/dist/js/bootstrap.min.js" ></ script >
         < script >

            $( 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 >

（转自梦想天空）

转载于:https://www.cnblogs.com/jami918/p/3584956.html