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 相关文章推荐
jquery 事件冒泡的介绍以及如何阻止事件冒泡
Dec 25 Javascript
js获取当前地址 JS获取当前URL的示例代码
Feb 26 Javascript
wap浏览自动跳转到wap页面的js代码
May 17 Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
Apr 24 Javascript
javascript顺序加载图片的方法
Jul 18 Javascript
JQuery导航菜单选择特效
Apr 11 Javascript
jQuery配合coin-slider插件制作幻灯片效果的流程解析
May 13 Javascript
JQuery点击行tr实现checkBox选中的简单实例
May 26 Javascript
jquery获取table指定行和列的数据方法(当前选中行、列)
Nov 07 Javascript
Ajax异步获取html数据中包含js方法无效的解决方法
Feb 20 Javascript
浅谈JavaScript 代码简洁之道
Jan 09 Javascript
js实现select下拉框选择
Jan 11 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 上传文件类型判断函数(避免上传漏洞 )
2010/06/08 PHP
php模拟js函数unescape的函数代码
2012/10/20 PHP
使用vs code编辑调试php配置的方法
2019/01/29 PHP
PHP实现数组向任意位置插入,删除,替换数据操作示例
2019/04/05 PHP
可以把编码转换成 gb2312编码lib.UTF8toGB2312.js
2007/08/21 Javascript
强大的jquery插件jqeuryUI做网页对话框效果!简单
2011/04/14 Javascript
js生成随机数之random函数随机示例
2013/12/20 Javascript
JS清除选择内容的方法
2015/01/29 Javascript
javascript中this的四种用法
2015/05/11 Javascript
vue.js实现标签页切换效果
2018/06/07 Javascript
vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法
2018/09/19 Javascript
vue-quill-editor+plupload富文本编辑器实例详解
2018/10/19 Javascript
小程序显示弹窗时禁止下层的内容滚动实现方法
2019/03/20 Javascript
Vue表单之v-model绑定下拉列表功能
2019/05/14 Javascript
微信小程序 数据缓存实现方法详解
2019/08/26 Javascript
Python中定时任务框架APScheduler的快速入门指南
2017/07/06 Python
python 实时得到cpu和内存的使用情况方法
2018/06/11 Python
pygame实现俄罗斯方块游戏
2018/06/26 Python
用python写一个定时提醒程序的实现代码
2019/07/22 Python
QML使用Python的函数过程解析
2019/09/26 Python
python Jupyter运行时间实例过程解析
2019/12/13 Python
python 比较字典value的最大值的几种方法
2020/04/17 Python
Python打印特殊符号及对应编码解析
2020/05/07 Python
Pop In A Box英国:Funko POP搪胶公仔
2019/05/27 全球购物
纯净、自信、100%的羊绒服装:360Cashmere
2021/02/20 全球购物
类如何去实现接口
2013/12/19 面试题
化学系大学生自荐信范文
2014/03/01 职场文书
宣传标语大全
2014/07/01 职场文书
毕业生找工作求职信
2014/08/05 职场文书
社区党员公开承诺书
2014/08/30 职场文书
党课培训心得体会
2014/09/02 职场文书
个人更名证明
2015/06/23 职场文书
给朋友的赠语
2015/06/23 职场文书
初中英语教师个人工作总结2015
2015/07/21 职场文书
导游词之西安骊山
2019/12/20 职场文书
Python干货实战之八音符酱小游戏全过程详解
2021/10/24 Python