先看看效果:
Hallo.js是一个简单的富文本Web编辑器,基于jQuery UI并且利用HTML5的contentEditable实现所见即所得。其目标并不是取代当今非常流行的编辑器,如 TinyMCE 或 Aloha Editor,而是给开发者提供一种更简单、更愉快的用户编辑体验。
Hallo.js是由Henri Bergius为IKS项目开发的一款免费软件,使用CoffeeScript开发,遵循MIT许可协议,托管在GitHub上。
使用方法
1、你需要将jQuery、jQuery UI和Rangy库引入到你的项目中:
Hallo自己只能使选择的DOM元素可编辑和不提供任何格式的工具。格式是通过加载插件初始化Hallo。即使简单的事情,如粗体和斜体的插件:
这个例子可以使简单的格式的插件,提供如粗体和斜体的功能。你可以有很多好的插件为你想,如果有必要通过他们的选择。
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加载也加载单元所有启用的插件,并通过他们一些额外的选项:
- editable: The main Hallo widget instance
- uuid: unique identifier of the Hallo instance,can be used for element IDs
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 ''
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富文本编辑器的详细介绍,希望对大家的学习有所帮助。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。