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 相关文章推荐
用js判断用户浏览器是否是XP SP2的IE6
Mar 08 Javascript
js 如何实现对数据库的增删改查
Nov 23 Javascript
jquery.qrcode在线生成二维码使用示例
Aug 21 Javascript
js页面跳转的常用方法整理
Oct 18 Javascript
javascript使用百度地图api和html5特性获取浏览器位置
Jan 10 Javascript
通过js来制作复选框的全选和不选效果
May 22 Javascript
javascript随机之洗牌算法深入分析
Jun 07 Javascript
JavaScript中join()方法的使用简介
Jun 09 Javascript
解决WordPress使用CDN后博文无法评论的错误
Dec 15 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
Jan 21 Javascript
Bootstrap php制作动态分页标签
Dec 23 Javascript
javascript作用域链与执行环境详解
Mar 25 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导出到Excel或CSV的详解(附utf8、gbk 编码转换)
2013/06/25 PHP
codeigniter教程之多文件上传使用示例
2014/02/11 PHP
WordPress中获取所使用的模板的页面ID的简单方法
2015/12/31 PHP
PHP无限极分类函数的实现方法详解
2017/04/15 PHP
Tinymce+jQuery.Validation使用产生的BUG
2010/03/29 Javascript
基于jquery的获取mouse坐标插件的实现代码
2010/04/01 Javascript
超酷的网页音乐播放器DewPlayer使用方法
2010/12/18 Javascript
javascript真的不难-回顾一下基础知识
2013/01/15 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
2013/11/19 Javascript
jquery制作多功能轮播图插件
2015/04/02 Javascript
一看就懂:jsonp详解
2015/06/01 Javascript
JavaScript获取键盘按键的键码(参照表)
2017/01/10 Javascript
Vue过滤器的用法和自定义过滤器使用
2017/02/08 Javascript
微信小程序 点击控件后选中其它反选实例详解
2017/02/21 Javascript
vue绑定设置属性的多种方式(5)
2017/08/16 Javascript
详解A标签中href=&quot;&quot;的几种用法
2017/08/20 Javascript
Vue组件化开发思考
2018/02/02 Javascript
JS原型与继承操作示例
2019/05/09 Javascript
详解可以用在VS Code中的正则表达式小技巧
2019/05/14 Javascript
python 输出一个两行字符的变量
2009/02/05 Python
深入浅析python中的多进程、多线程、协程
2016/06/22 Python
Python实现string字符串连接的方法总结【8种方式】
2018/07/06 Python
python 随机生成10位数密码的实现代码
2019/06/27 Python
修改 CentOS 6.x 上默认Python的方法
2019/09/06 Python
JupyterNotebook 输出窗口的显示效果调整方法
2020/04/13 Python
Python在线和离线安装第三方库的方法
2020/10/31 Python
CSS3弹性伸缩布局之box布局
2016/07/12 HTML / CSS
Kathmandu美国网站:新西兰户外运动品牌
2019/03/23 全球购物
2014年小学植树节活动方案
2014/03/02 职场文书
房地产广告词大全
2014/03/19 职场文书
2014年无财产无子女离婚协议书范本
2014/10/09 职场文书
办公经费申请报告
2015/05/15 职场文书
黑白记忆观后感
2015/06/18 职场文书
立秋之描写立秋的作文(五年级)
2019/08/08 职场文书
python中pymysql包操作数据库方法
2022/04/19 Python
Python可视化神器pyecharts绘制水球图
2022/07/07 Python