REDACTOR 简洁文本编辑器(Fixed toolbar破解版)

REDACTOR 简洁文本编辑器(Fixed toolbar破解版)
 点击预览  点击下载

使用步骤

1、引入以下的js和css文件

  1. <link rel="stylesheet" type="text/css" href="css/kube.min.css"> 
  2. <link rel="stylesheet" type="text/css" href="css/screen.css"> 
  3. <link rel="stylesheet" type="text/css" href="css/redactor.css"> 
  4. <script src="js/jquery-1.8.2.min.js"></script> 
  5. <script src="js/global.js"></script> 
  6. <script src="js/redactor.js"></script> 
  7. <script src="js/prettify.js"></script> 
  8. <script src="js/zh_cn.js"></script> 

2、在head标签中加入以下js代码

  1. <script type="text/javascript"
  2.     $(function () { 
  3.         $('#redactor_content').redactor({ 
  4.             fixed: true 
  5.             lang: "zh_cn" 
  6.             wym: true 
  7.             air: true 
  8.         }); 
  9.     }); 
  10. </script> 

3、在body标签中加入以下格式的html代码

  1. <div id="box-inside-white"> 
  2.     <div class="wrapper">       
  3.         <div id="main" class="row" style="height:1000px;"> 
  4.             <article class="threequarter">          
  5.             <h2> 
  6.                 Fixed toolbar
  7.             </h2> 
  8.                         <textarea id="redactor_content" name="content"style="height:580px;"> <h3>这里是标题</h3><p>这里面放内容</p></textarea> </article>     
  9.         </div> 
  10.     </div> 
  11. </div> 

参数配置

官网详细参数列表 如有疑问请到下面提问,常用的参数请见下面的说明
相关说明
1、Air 模式
即隐藏外部的工具栏而是在选中文本框内某行文本的时候显示一个类似word里面的一个小的工具条

只需要加上参数 air: true 即可(官网示例)

  1. $('#redactor_content').redactor({ 
  2.      air: true 
  3. }); 

2、固定工具栏
当编辑器的顶部工具栏随着滚动条向下滚动而隐藏到上方的时候,将会出现一个固定在浏览器顶部的横向工具条(官网示例)只需将参数配置为

  1. $('#redactor_content').redactor({ 
  2.       wym: true 
  3. }); 

3、语言包,中文显示
由于该插件是外国人开发的,所以默认预言是英文,但是可以通过安装插件包来将语言转换为中文。
只需下载 zh_cn.js文件并引用到页面中(这个在我的Demo中已经包含了)然后将 lang设置为”zh_cn”

  1. $('#redactor_content').redactor({ lang: "zh_cn" }); 

转载请注明:代码家园 » REDACTOR 简洁文本编辑器(Fixed toolbar破解版)

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)