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富文本编辑器的详细介绍,希望对大家的学习有所帮助。

(0)

相关推荐

  • jquery可定制的在线UEditor编辑器

    UMeditor,它是由百度web前端研发部开发所见即所得富文本web编辑器UEditor演变的迷你版编辑器,具有轻量,可定制,注重用户体验等特点,允许自由使用和修改代码,适用于前台快速简单回复框或后台内容编辑器. 使用方法: 因为本插件是百度「FEX前端研发团队」开发,在官方有较强细的中文文档,本文的目的只是让朋友们知道了解有这么个好插件而已,因此文档手册.下载.实例全链接到官方. 下载你需的要的语言版本,然后解压,在解压目录建立一个名为demo的html文件,代码如下 <!DOCTYPE H

  • jQuery 移动端artEditor富文本编辑器

    由于手机上打字比较慢,并不适合长篇大论的文章,所以移动端的富文本编辑器很少.artEditor是一款基于jQuery的移动端富文本编辑器,支持插入图片,后续完善其他功能. 插件地址:https://github.com/baixuexiyang/artEditor 欢迎star或fork. demo 引用: <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script

  • 10个基于jQuery或JavaScript的WYSIWYG 编辑器整理

    在线编辑内容的时候,那些基于 JavaScript 的编辑器帮了我们大忙,这些所见即所得(WYSIWYG)编辑器,给我们提供了类似 Office?的操作体验.如今,任何网站内容管理系统(CMS)和博客系统都需要一个这样的编辑器.本文精选了5个基于 JavaScript?的编辑器,5个基于 jQuery 框架的编辑器. MarkitUp – jQuery Official Website | Demo markItUp! 它不是一个"全功能,乱用"的编辑器.相反,它是一个非常轻量级的,可

  • jQuery编辑器KindEditor4.1.4代码高亮显示设置教程

    编辑器KindEditor官网: http://www.kindsoft.net/ 1.需要加载的JS和CSS文件为: 复制代码 代码如下: <script src="kindeditor-4.1.4/kindeditor.js" type="text/javascript" charset="utf-8"></script> <script src="kindeditor-4.1.4/plugins/co

  • 基于jquery实现可定制的web在线富文本编辑器附源码下载

    今天给大家介绍一款非常棒的WEB在线富文本编辑器--UMeditor,它是由百度web前端研发部开发所见即所得富文本web编辑器UEditor演变的迷你版编辑器,具有轻量,可定制,注重用户体验等特点,允许自由使用和修改代码,适用于前台快速简单回复框或后台内容编辑器. 在线预览     源码下载 如何使用? 建立一个demo.html文件,首先在需要添加编辑器的地方加入以下代码,使用style可以设置编辑器的宽度和高度. <script type="text/plain" id=&

  • 基于jquery.Jcrop的头像编辑器

    用过新浪微博的朋友对它的头像编辑器都有印象吧.不过人家是用flash做的. 在一个项目中,也用到了同样的东西,本来想直接用新浪微博的,但它有一部分请求路径写到FLASH里面去了,所以只好放弃. 在网上找到了jquery.Jcrop,基本满足了我的需求,但它只是简单的切割而已,还有缩略图没有生成.或许有很多人都需要这类东西吧,于是我把它封装起来了,方便其它朋友直接使用. 官方网址:http://deepliquid.com/content/Jcrop.html 上面有很多demo,有兴趣的可以上去

  • 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

  • Javascript基于jQuery UI实现选中区域拖拽效果

    一.效果展示 普通的三个div 鼠标拖动选中效果 选中所有的div 这样貌似看不出效果,没关系,我们有神奇的gif动画,来一个整体的动画效果感受下. 二.代码实现 整个代码其实也不难,需要用到一个博主自己封装的js文件. AreaSelect.js 考虑到代码量有点大,并且知乎没有代码折叠功能,所以这里就留一个文件名.等博主抽时间将它开源到github上面去,当然,有需要的朋友也可以直接联系博主,博主免费提供! 引入这个js后,还需要引用jquery和jquery UI相关文件. <script

  • 基于jQuery UI CSS Framework开发Widget的经验

    jQuery UI中两大核心的css文件是ui.core.css和ui.theme.css.这两个css样式贯穿整个基于jQuery ui的界面上,并且可以通过jQuery ui ThemeRoller来生成自己的样式. .ui-helper-hidden :为元素应用display:none .ui-helper-hidden-accessible:将元素的绝对位置设置为不可见 .ui-helper-clearfix:适用于浮动包裹父元素的属性 . ui-helper-zfix:适用于修复if

  • 使用jQuery UI库开发Web界面的简单入门指引

    一.jQuery UI jQuery UI 是以jQuery 为基础的开源JavaScript 网页用户界面代码库.包 含底层用户交互.动画.特效和可更换主题的可视控件.我们可以直接用它来构建具有很 好交互性的web 应用程序. jQuery UI 的官网网站为:http://jqueryui.com/ jquery-ui-x.xx.x.custom.zip .里面目录结构如下: 1.css,包含与jQuery UI 相关的CSS 文件: 2.js,包含jQuery UI 相关的JavaScri

  • 基于jquery ui的alert,confirm方案(支持换肤)

    实现功能: 1.修改标题样式.把jquery ui的标题样式放上去.支持换肤. 2.修改按钮样式,换成jqueryui的button按钮样式. 3.将模式化窗口的背景换成了jqueryui的模式化背景. 代码: //首先要引入jquery,以及ui的包和皮肤的样式如: <script src="../js/ui/jquery-1.11.0.min.js"></script> <script src="../js/ui/jquery-migrate

  • Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中

    复制代码 代码如下: $("#div").bindTemplate({ source : json object, template : null | $("#template") | "<div>{{object}}</div>", dateFormat : "d.m.y", tagOpen : "{{", tagClose : "}}" }); bindTem

  • jquery.cvtooltip.js 基于jquery的气泡提示插件

    序 1.插件名cvtooltip中的cv是ChinaValue的首字母缩写,而tooltip就是提示啦. 2.适用于新功能的提示,引导用户的提示,即时类消息的提示,操作失败提示(操作成功了也没人拦着)等等等,使用css实现,不附带任何图片文件. 3.目前发现的问题,在Chorme中表现的不给力,是由于Chrome对页面的解析与IE和FF不同,导致jquery的position或者offset返回值不同. 4.该插件依然是练习之作,一人之力,错误难免. 实例演示 1.载入页面的同时,气泡提示也显示

  • jcarousellite.js 基于Jquery的图片无缝滚动插件

    1.引入JS库,jquery.js脚本和插件脚本jcarousellite.js. 复制代码 代码如下: <script type="text/javascript" src="path/to/jquery.js"></script> <script type="text/javascript" src="path/to/jcarousellite.js"></script> 2

  • editable.js 基于jquery的表格的编辑插件

    我的思路是这样的: 1.对任何一个 table, tr 都可以添加编辑.删除功能--功能独立 2.可以自动的完成编辑.取消功能,如点击编辑, 表格内容自动变成编辑框.下拉框等, 点击取消结束编辑状态 3.添加删除.确定(即更新)事件--只需要添加自己服务端的删除.更新代码就可以 4.能够自定义设置可编辑列,不可编辑列--方便定制编辑功能 下面是我实现的功能代码: editable.js 复制代码 代码如下: /* code: editable.js version: v1.0 date: 201

随机推荐