浙江 杭州

基于Bootstrap响应式所见即所得的jQuery编辑器插件

系统分类: 网页特效 - jquery插件 - jQuery高级页面组件 2017-03-13

人气1832

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


LineControl Editor是一款基于Bootstrap的响应式、所见即所得的富文本编辑器jQuery插件。该富文本编辑器可以使用textarea元素或任何一个容器元素来生成,它拥有常见富文本编辑器的所有功能,使用快捷方便。

插件依赖

该富文本编辑器插件依赖于jQuery2.1.0和Twitter Bootstrap以及 Font-Awesome 字体图标

  • Jquery (2.1.0)
  • Twitter Bootstrap (3.1.1)
  • Font-Awesome (4.0.3)

使用方法

使用该富文本编辑器要在页面中引入jQuery,bootstrap和font-awesome字体图标样式文件,以及editor.css和editor.js文件。

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="editor.css" type="text/css" rel="stylesheet"/>
<script src="editor.js"></script>                
              
HTML结构

可以使用一个<div>来作为该富文本编辑器的容器。

<div id="txtEditor"></div>                
              
初始化插件

在页面加载完毕之后可以通过下面的方法来初始化该富文本编辑器。

<script type="text/javascript">
  $(document).ready( function() {
    $("#txtEditor").Editor();                    
  });
</script>                
              

配置参数

你可以在初始化插件的时候添加一些配置参数。

editor('createMenuItem', 
        {"text": "TouchGlasses", //Text replaces icon if its not available
         "icon":"fa fa-glass", //This is a Font-Awesome Icon 
          "tooltip": "Touch Glasses",
          "custom": function(button, parameters){ 
               //Your Custom Function.
               alert("Cheers!!!");
           },
           "params": {'option1':"value1"} //Any custom parameters you want to pass
                                         //to your custom function.
 });                
              

下面是该文本编辑器的默认配置:

'texteffects':true,
'aligneffects':true,
'textformats':true,
'fonteffects':true,
'actions' : true,
'insertoptions' : true,
'extraeffects' : true,
'advancedoptions' : true,
'screeneffects':true,
'bold': true,
'italics': true,
'underline':true,
'ol':true,
'ul':true,
'undo':true,
'redo':true,
'l_align':true,
'r_align':true,
'c_align':true,
'justify':true,
'insert_link':true,
'unlink':true,
'insert_img':true,
'hr_line':true,
'block_quote':true,
'source':true,
'strikeout':true,
'indent':true,
'outdent':true,
'fonts':fonts,
'styles':styles,
'print':true,
'rm_format':true,
'status_bar':true,
'font_size':fontsizes,
'color':colors,
'splchars':specialchars,
'insert_table':true,
'select_all':true,
'togglescreen':true                
              

更多关于该富文本编辑器的信息请参考:https://github.com/suyati/line-control

查看演示
下载资源:4
下载资源
错误提交:

格式:zip 大小:62.52KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-1892.html 非特殊说明,本文版权归原作者所有,转载请注明出处
基于Bootstrap响应式所见即所得的jQuery编辑器插件

我当前G币余额:0 已下载次数:4

注:点击右侧分享按钮并且留下评论自动+10G币

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

说点什么...(已有0 评论)