jquery 建议编辑器


 

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

  但事实证明,它是如此简单,让我十分惊讶!借助 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‘>
                                <class=‘btn‘ data-role=‘undo‘ href=‘#‘><class=‘icon-undo‘></i></a>
                                <class=‘btn‘ data-role=‘redo‘ href=‘#‘><class=‘icon-repeat‘></i></a>
                            </div>
                            <div class=‘btn-group‘>
                                <class=‘btn‘ data-role=‘bold‘ href=‘#‘><b>Bold</b></a>
                                <class=‘btn‘ data-role=‘italic‘ href=‘#‘><em>Italic</em></a>
                                <class=‘btn‘ data-role=‘underline‘ href=‘#‘><u><b>U</b></u></a>
                                <class=‘btn‘ data-role=‘strikeThrough‘ href=‘#‘><strike>abc</strike></a>
                            </div>
                            <div class=‘btn-group‘>
                                <class=‘btn‘ data-role=‘justifyLeft‘ href=‘#‘><class=‘icon-align-left‘></i></a>
                                <class=‘btn‘ data-role=‘justifyCenter‘ href=‘#‘><class=‘icon-align-center‘></i></a>
                                <class=‘btn‘ data-role=‘justifyRight‘ href=‘#‘><class=‘icon-align-right‘></i></a>
                                <class=‘btn‘ data-role=‘justifyFull‘ href=‘#‘><class=‘icon-align-justify‘></i></a>
                            </div>
                            <div class=‘btn-group‘>
                                <class=‘btn‘ data-role=‘indent‘ href=‘#‘><class=‘icon-indent-right‘></i></a>
                                <class=‘btn‘ data-role=‘outdent‘ href=‘#‘><class=‘icon-indent-left‘></i></a>
                            </div>
                            <div class=‘btn-group‘>
                                <class=‘btn‘ data-role=‘insertUnorderedList‘ href=‘#‘><class=‘icon-list-ul‘></i></a>
                                <class=‘btn‘ data-role=‘insertOrderedList‘ href=‘#‘><class=‘icon-list-ol‘></i></a>
                            </div>
                            <div class=‘btn-group‘>
                                <class=‘btn‘ data-role=‘h1‘ href=‘#‘>h<sup>1</sup></a>
                                <class=‘btn‘ data-role=‘h2‘ href=‘#‘>h<sup>2</sup></a>
                                <class=‘btn‘ data-role=‘p‘ href=‘#‘>p</a>
                            </div>
                            <div class=‘btn-group‘>
                                <class=‘btn‘ data-role=‘subscript‘ href=‘#‘><class=‘icon-subscript‘></i></a>
                                <class=‘btn‘ data-role=‘superscript‘ href=‘#‘><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(
formatBlockfalse< + $(this).data(role+ >);
                            
break;
                        
default:
                            document.execCommand($(
this).data(role), falsenull);
                            
break;
                    }
                     
                })
            });
        
</script>
    </body>
</html>

 

 

(转自梦想天空)

jquery 建议编辑器,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。