Hallo.js基于jQuery UI所见即所得的Web编辑器


Posted in Javascript onJanuary 26, 2016

先看看效果:

Hallo.js基于jQuery UI所见即所得的Web编辑器

Hallo.js是一个简单的富文本Web编辑器,基于jQuery UI并且利用HTML5的contentEditable实现所见即所得。其目标并不是取代当今非常流行的编辑器,如 TinyMCE 或 Aloha Editor,而是给开发者提供一种更简单、更愉快的用户编辑体验。

Hallo.js是由Henri Bergius为IKS项目开发的一款免费软件,使用CoffeeScript开发,遵循MIT许可协议,托管在GitHub上。

使用方法

1、你需要将jQuery、jQuery UI和Rangy库引入到你的项目中:

<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/rangy-core.js"></script>

编辑器工具栏使用jQuery UI的主题,因此你可能还想自定义一个主题,适合你的需要。工具栏图标字体基于Font Awesome。风格的工具栏出现在演示中,你也会想添加一些CSS(如背景和边框)的类hallotoolbar。

<link rel="stylesheet" href="/path/to/your/jquery-ui.css">
<link rel="stylesheet" href="/path/to/your/font-awesome.css">

引入Hallo.js

<script src="hallo.js"></script>

调用插件是非常简单的

jQuery('p').hallo();

你也可以关闭标签的编辑功能

jQuery('p').hallo({editable: false});

Hallo自己只能使选择的DOM元素可编辑和不提供任何格式的工具。格式是通过加载插件初始化Hallo。即使简单的事情,如粗体和斜体的插件:

jQuery('.editable').hallo({
 plugins: {
  'halloformat': {}
 }
});

这个例子可以使简单的格式的插件,提供如粗体和斜体的功能。你可以有很多好的插件为你想,如果有必要通过他们的选择。

Hallo有更多的选项设置当实例化。请参阅文档hallo.coffee文件。

事件方法

Hallo有一些事件,有助于整合和调用。你可以使用jQuery bind订阅它们:

  • halloenabled: Triggered when an editable is enabled (editable set to true)
  • hallodisabled: Triggered when an editable is disabled (editable set to false)
  • hallomodified: Triggered whenever user has changed the contents being edited. Event data key content contains the HTML
  • halloactivated: Triggered when user activates an editable area (usually by clicking it)
  • hallodeactivated: Triggered when user deactivates an editable area

插件

  • halloformat ? Adds Bold, Italic, StrikeThrough and Underline support to the toolbar. (Enable/Disable with options: “formattings”: {“bold”: true, “italic”: true, “strikethrough”: true, “underline”: false})
  • halloheadings ? Adds support for H1, H2, H3. You can pass a headings option key to specify what is going to be displayed (e.g. “formatBlocks”:[“p”, “h2″,”h3”])
  • hallojustify ? Adds align left, center, right support
  • hallolists ? Adds support for ordered and unordered lists (Pick with options: “lists”: {“ordered”: false, “unordered”: true})
  • halloreundo ? Adds support for undo and redo
  • hallolink ? Adds support to add links to a selection (currently not working)
  • halloimage ? Image uploading, searching, suggestions
  • halloblacklist ? Filtering unwanted tags from the content

编写一个插件

Hallo插件编写正则jQuery UI插件。

当Hallo加载也加载单元所有启用的插件,并通过他们一些额外的选项:

  • editable: The main Hallo widget instance
  • uuid: unique identifier of the Hallo instance, can be used for element IDs

一个简单的插件看起来像以下的:

#  Formatting plugin for Hallo
#  (c) 2011 Henri Bergius, IKS Consortium
#  Hallo may be freely distributed under the MIT license
((jQuery) ->
 jQuery.widget "IKS.halloformat",
  boldElement: null

  options:
   uuid: ''
   editable: null

  _create: ->
   # Add any actions you want to run on plugin initialization
   # here

  populateToolbar: (toolbar) ->
   # Create an element for holding the button
   @boldElement = jQuery '<span></span>'

   # Use Hallo Button
   @boldElement.hallobutton
    uuid: @options.uuid
    editable: @options.editable
    label: 'Bold'
    # Icons come from Font Awesome
    icon: 'icon-bold'
    # Commands are used for execCommand and queryCommandState
    command: 'bold'

   # Append the button to toolbar
   toolbar.append @boldElement

  cleanupContentClone: (element) ->
   # Perform content clean-ups before HTML is sent out

)(jQuery)

以上就是关于Hallo.js富文本编辑器的详细介绍,希望对大家的学习有所帮助。

Javascript 相关文章推荐
JavaScript判断一个URL链接是否有效的实现方法
Oct 08 Javascript
sencha touch 模仿tabpanel导航栏TabBar的实例代码
Oct 24 Javascript
流量统计器如何鉴别C#:WebBrowser中伪造referer
Jan 07 Javascript
javascript中attachEvent用法实例分析
May 14 Javascript
javascript中if和switch,==和===详解
Jul 30 Javascript
JS实现为排序好的字符串找出重复行的方法
Mar 02 Javascript
jQuery获取当前点击的对象元素(实现代码)
May 19 Javascript
jQuery EasyUI Tab 选项卡问题小结
Aug 16 Javascript
bootstrap datetimepicker日期插件使用方法
Jan 13 Javascript
微信小程序template模板实例详解
Oct 27 Javascript
基于D3.js实现时钟效果
Jul 17 Javascript
三步搞定:Vue.js调用Android原生操作
Sep 07 Javascript
基于JavaScript如何制作遮罩层对话框
Jan 26 #Javascript
基于Node.js实现nodemailer邮件发送
Jan 26 #Javascript
JavaScript小技巧整理篇(非常全)
Jan 26 #Javascript
基于canvas实现的绚丽圆圈效果完整实例
Jan 26 #Javascript
基于canvas实现的钟摆效果完整实例
Jan 26 #Javascript
js实现的页面矩阵图形变换特效
Jan 26 #Javascript
JS实现简单的二维矩阵乘积运算
Jan 26 #Javascript
You might like
php获取文章上一页与下一页的方法
2014/12/01 PHP
PHP中大于2038年时间戳的问题处理方案
2015/03/03 PHP
phpStudy2016 配置多个域名期间遇到的问题小结
2017/10/19 PHP
getElementsByTagName vs selectNodes效率 及兼容的selectNodes实现
2010/02/26 Javascript
firefox下frameset取不到值的解决方法
2010/09/06 Javascript
基于jQuery的让非HTML5浏览器支持placeholder属性的代码
2011/05/24 Javascript
event.currentTarget与event.target的区别介绍
2012/12/31 Javascript
从零学JSON之JSON数据结构
2014/05/19 Javascript
JavaScript控制网页层收起和展开效果的方法
2015/04/15 Javascript
详解js跨域原理以及2种解决方案
2015/12/09 Javascript
javascript+HTML5自定义元素播放焦点图动画
2016/02/21 Javascript
浅析BootStrap模态框的使用(经典)
2016/04/29 Javascript
javascript写一个ajax自动拦截并下载数据代码实例
2019/09/07 Javascript
Vuex的各个模块封装的实现
2020/06/05 Javascript
跟老齐学Python之Import 模块
2014/10/13 Python
使用IronPython把Python脚本集成到.NET程序中的教程
2015/03/31 Python
自动化Nginx服务器的反向代理的配置方法
2015/06/28 Python
python使用matplotlib绘制柱状图教程
2017/02/08 Python
python之线程通过信号pyqtSignal刷新ui的方法
2019/01/11 Python
python如何实现视频转代码视频
2019/06/17 Python
numpy和pandas中数组的合并、拉直和重塑实例
2019/06/28 Python
由面试题加深对Django的认识理解
2019/07/19 Python
Python爬虫使用代理IP的实现
2019/10/27 Python
pandas 数据类型转换的实现
2020/12/29 Python
香港No.1得奖零食网:香港零食大王
2016/07/22 全球购物
澳大利亚票务和娱乐市场领导者:Ticketmaster
2017/03/03 全球购物
Kathmandu澳洲户外商店:新西兰户外运动品牌
2017/11/12 全球购物
凯蒂·佩里个人女鞋品牌:Katy Perry Collections
2019/04/04 全球购物
公共汽车、火车和飞机票的通用在线预订和销售平台:INFOBUS
2019/11/30 全球购物
如何使用PHP session
2015/04/21 面试题
接待员岗位责任制
2014/02/10 职场文书
管理部副部长岗位职责范文
2014/03/09 职场文书
项目申报专员岗位职责
2014/07/09 职场文书
邀请函范文
2015/02/02 职场文书
优秀学生干部主要事迹材料
2015/11/04 职场文书