这里有新鲜出炉的精品教程,程序狗速度看过来!
Hallo.js 是一个简单的富文本编辑器,基于 jQuery UI 的部件,利用 html5 的 contentEditable 功能实现了即时编辑功能。与 TinyMCE 那些编辑器不同,其主要目的是为了提供良好的书写体验。
Hallo.js 是一个简单的富文本编辑器,基于 jQuery UI 的部件,利用 HTML5 的 contentEditable 功能实现了即时编辑功能,其主要目的是为了提供良好的书写体验,对 Hallo.js 感兴趣的小伙伴们可以参考一下
先看看效果:
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 订阅它们:
插件
编写一个插件
Hallo 插件编写正则 jQuery UI 插件。
当 Hallo 加载也加载单元所有启用的插件,并通过他们一些额外的选项:
一个简单的插件看起来像以下的:
- # 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)
来源: http://www.phperz.com/article/17/0419/267380.html