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之文件操作
Mar 07 Javascript
简单的无缝滚动程序-仅几行代码
May 08 Javascript
关于jquery动态增减控件的一些想法和小插件
Aug 01 Javascript
JavaScript中“过于”犀利地for/in循环使用示例
Oct 22 Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
Nov 29 Javascript
详解JS中Array对象扩展与String对象扩展
Jan 07 Javascript
JS回调函数简单用法示例
Feb 09 Javascript
JQuery 获取Dom元素的实例讲解
Jul 08 jQuery
js事件委托和事件代理案例分享
Jul 25 Javascript
微信小程序 页面跳转事件绑定的实例详解
Sep 20 Javascript
node.js监听文件变化的实现方法
Apr 17 Javascript
vue中对象数组去重的实现
Feb 06 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
成为好程序员必须避免的5个坏习惯
2014/07/04 PHP
PHP的cURL库简介及使用示例
2015/02/06 PHP
10个对初学者非常有用的PHP技巧
2016/04/06 PHP
Gambit vs ForZe BO3 第三场 2.13
2021/03/10 DOTA
javascript YUI 读码日记之 YAHOO.util.Dom - Part.4
2008/03/22 Javascript
JavaScript高级程序设计(第3版)学习笔记8 js函数(中)
2012/10/11 Javascript
js获取当前月的第一天和最后一天的小例子
2013/11/18 Javascript
深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解
2016/04/03 Javascript
Bootstrap按钮组件详解
2016/04/26 Javascript
jQuery插件imgAreaSelect基础讲解
2017/05/26 jQuery
Vue实现移动端页面切换效果【推荐】
2018/11/13 Javascript
ES6知识点整理之函数对象参数默认值及其解构应用示例
2019/04/17 Javascript
微信小程序 云开发模糊查询实现解析
2019/09/02 Javascript
p5.js实现故宫橘猫赏秋图动画
2019/10/23 Javascript
微信小程序自定义navigationBar顶部导航栏适配所有机型(附完整案例)
2020/04/26 Javascript
ES2020 已定稿,真实场景案例分析
2020/05/25 Javascript
python实现zencart产品数据导入到magento(python导入数据)
2014/04/03 Python
Ruby使用eventmachine为HTTP服务器添加文件下载功能
2016/04/20 Python
python基础教程项目三之万能的XML
2018/04/02 Python
pandas获取groupby分组里最大值所在的行方法
2018/04/20 Python
Python正则表达式和元字符详解
2018/11/29 Python
Python使用socket模块实现简单tcp通信
2020/08/18 Python
Python+Opencv身份证号码区域提取及识别实现
2020/08/25 Python
python入门教程之基本算术运算符
2020/11/13 Python
cookies应对python反爬虫知识点详解
2020/11/25 Python
自我评价的范文
2014/02/02 职场文书
高中军训感言200字
2014/02/23 职场文书
村干部培训方案
2014/05/02 职场文书
我的梦想演讲稿500字
2014/08/21 职场文书
纪检干部现实表现材料
2014/08/21 职场文书
先进事迹材料范文
2014/12/29 职场文书
2015年导购员工作总结
2015/04/25 职场文书
致三级跳运动员加油稿
2015/07/21 职场文书
2016年社区国庆节活动总结
2016/04/01 职场文书
4种非常实用的python内置数据结构
2021/04/28 Python
MySQL令人大跌眼镜的隐式转换
2021/08/23 MySQL