zoukankan      html  css  js  c++  java
  • 一步步教你编写redactor的插件

    Redactor是一款JQuery框架下的所见即所得在线HTML编辑器,具有常用的功能如图片/文件上传、表格、格式化等等,不仅轻量级和跨浏览器,还支持各种平台如PC、Mac、iPad, iPhone、Android、Refrigerators,更重要的它能够自动保存、自动调整大小,还有一套API。

    准备说明

    我们就以表情插件为例,看展示下它的插件编写。首先准备好表情图片,放在目录的img文件夹,请查看示例包

    使用redactor只需要引用redactor.js和redactor.css即可,所以我们的示例直接应用谷歌的JQuery库以及redactor官方的redactor.js和redactor.css。如果你不愿意可以直接把js和css另存在本地也行。或许你会问它的背景图片不需要了吗?这就是我认为它有意思的地方,它的背景是:

    这张背景图片被base64编码后放在了redactor.js文件中了。如果不喜欢放在脚本,可以把图片另存即可。redactor.js一大段乱码看起来也蛮不爽的。

    演示的HTML页面

    我们HTML页面命名为index.html,代码如下:

    <!DOCTYPE html>
    <html>
    <head>	
    	<title>第一个redactor插件</title>
    	<meta charset="utf-8">
    	<link rel="stylesheet" href="http://imperavi.com/js/redactor/redactor.css" />	  
    </head>
    <body>		
    </body>
    </html>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    <script src="http://imperavi.com/js/redactor/redactor.js"></script> 

    制作插件

    下面我们来制作插件,其实制作插件的官方文档说的蛮详细的,可以去了解下。我们制作这个插件主要步骤:

    1. 添加表情按钮到toolbar;
    2. 点击表情按钮弹出表情列表窗口;
    3. 选择表情并把表情插入编辑器中;

    插件的基本格式

    if (typeof RedactorPlugins === 'undefined') var RedactorPlugins = {}; 
    RedactorPlugins.plginname = { 
        init: function()
        {
            //....
        }
    }
    • init 为redactor初始化回调函数;
    • plginname为插件名称;

    插件的脚本文件

    在实际使用redactor中可能制作的插件比较多,所以我们把插件都放在一个js文件中,命名为redactor-plugin.js.

    我们制作的表情插件名命名为:smile,所以redactor-plugin.js文件内容如下:

    if (typeof RedactorPlugins === 'undefined') var RedactorPlugins = {}; 
    RedactorPlugins.smile = { 
        init: function()
        {
            //....
        }
    }

    添加表情按钮到toolbar

    添加自定义按钮到toolbar,需要用到redactor的插件API:addBtn,声明如下:

    this.addBtn(button_key, button_title, function(redactor_object, event, button_key) { callback; });
    • button_key 是按钮key,不可见;
    • button_title 是按钮名称,鼠标悬停显示;
    • redactor_object是redactor对象,event是事件对象,button_key是按钮key;
    • callback为回调函数;

    redactor-plugin.js文件内容如下:

    if (typeof RedactorPlugins === 'undefined') var RedactorPlugins = {}; 
    RedactorPlugins.smile = { 
        init: function()
        {
             this.addBtn('smile', '表情', function(redactor_object, event, button_key) {
    		
    	 })
        }
    }

    加载redactor及其插件

    插件制作完成,就应该把插件加载到redactor中了,所以index.html的HTML代码如下:

    <!DOCTYPE html>
    <html>
    <head>	
    	<title>第一个redactor插件</title>
    	<meta charset="utf-8">
    	<link rel="stylesheet" href="http://imperavi.com/js/redactor/redactor.css" />	
    </head>
    <body>
    	
    	<textarea id="redactor" name="content">
    		<h2>Hello and Welcome</h2>
    		<p>我是osEye</p>
    		<p>如果12是个循环的话,13就是新的开始....</p>
    	</textarea>
    </body>
    </html>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    <script src="http://imperavi.com/js/redactor/redactor.js"></script>  
    <script src="redactor-plugin.js"></script>  
    <script type="text/javascript">
    $(document).ready(
    	function(){
    		var buttons = ['formatting', '|', 'bold', 'italic', 'fullscreen'];
    		$('#redactor').redactor({ 
    			plugins: ['smile']
    		});
    	}
    );
    </script>

    添加了一个id为redactor的textarea,用于redactor编辑器的归宿,在脚本中加载redactor。脚本放置文档底部是为了满足那啥的性能优化规则,哈哈。

    添加CSS显示toolbar按钮

    此刻打开index.html应该看到表情按钮啦吧?!

    No,你还看不到,因为toolbar的按钮都是背景图展示的,而且CSS有一定的规则:

    body .redactor_toolbar li a.redactor_btn_按钮key  {
    	background: url(图片地址) no-repeat;
    }

    背景图是25x25px的图片,我这里就随意用表情图片做背景图了,你在实际应用中肯定用精美的图片。所以在index.html中必须加上样式,实际应用中CSS文件最好也独立成文件,我这里只是示例,所以我直接放在index.html文档中了,现在的index.html的HTML代码如下:

    <!DOCTYPE html>
    <html>
    <head>	
    	<title>第一个redactor插件</title>
    	<meta charset="utf-8">
    	<link rel="stylesheet" href="http://imperavi.com/js/redactor/redactor.css" />	
    	<style type="text/css">
    	body .redactor_toolbar li a.redactor_btn_smile  {
    		background: url(img/tootha.gif) no-repeat;
    	}
    	</style>
    </head>
    <body>
    	
    	<textarea id="redactor" name="content">
    		<h2>Hello and Welcome</h2>
    		<p>我是osEye</p>
    		<p>如果12是个循环的话,13就是新的开始....</p>
    	</textarea>
    </body>
    </html>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    <script src="http://imperavi.com/js/redactor/redactor.js"></script>  
    <script src="redactor-plugin.js"></script>  
    <script type="text/javascript">
    $(document).ready(
    	function(){
    		var buttons = ['formatting', '|', 'bold', 'italic', 'fullscreen'];
    		$('#redactor').redactor({ 
    			plugins: ['smile']
    		});
    	}
    );
    </script>

    现在可以看到表情按钮了吧^_^。

    添加点击按钮回调事件,弹出表情列表

    redactor中有调用模态窗口的插件API:

    this.modalInit(title, elment, width, callback);
    • title 为窗口名称;
    • elment HTML内容或HTML元素Id事件;为HTML元素ID时,窗口自动把ID的HTML填充到窗口中;
    • width 为窗口的宽度;
    • callback 为回调函数;

    redactor-plugin.js文件内容如下:

    if (typeof RedactorPlugins === 'undefined') var RedactorPlugins = {}; 
    RedactorPlugins.smile = { 
        init: function()
        {
            this.addBtn('smile', '表情', function(redactor_object, event, button_key) {
    		var callback = $.proxy(function(){
    			$('#face').find('img').each(function(){
    				$(this).click(function(){
    					redactor_object.insertHtml('<img src="'+$(this).attr('src')+'">');	
    					redactor_object.modalClose();
    				})
    			});
    		}, redactor_object);
    		redactor_object.modalInit('表情', '<div id="face"><img src="img/sada.gif"> <img src="img/smilea.gif"> <img src="img/yalishanda.gif"> <img src="img/yw.gif"> <img src="img/sada.gif"> <img src="img/yx.gif"> <img src="img/tootha.gif"></div>', 500, callback);
    	 })
        }
    }

    效果图

    源码下载请点击这里

  • 相关阅读:
    PHP微信墙制作
    SSM框架构建多模块之业务拆分实践
    系统设计和系统划分有定律可循
    说说application/x-www-form-urlencoded和application/json的区别
    记一次Eclipse关于JDK和JRE的问题
    SVN和Git的比较
    程序员枪击事件引发的背后思考
    高性能JavaScript之加载和执行
    业务拆分的思考
    谈谈运维人员谨慎操作系统环境和管理
  • 原文地址:https://www.cnblogs.com/zhaiqianfeng/p/4618348.html
Copyright © 2011-2022 走看看