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

您所在的位置：网站首页 › 哈利波特魔法觉醒禁林手记寻犬启事 › 基于Bootstrap响应式所见即所得的jQuery编辑器插件

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

#基于Bootstrap响应式所见即所得的jQuery编辑器插件| 来源: 网络整理| 查看: 265

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文件。

HTML结构

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

初始化插件

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

$(document).ready( function() { $("#txtEditor").Editor(); }); 配置参数

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

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

【本文地址】

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

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

今日新闻

推荐新闻