先看看效果:

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="/UploadFiles/2021-04-02/jquery.min.js">

编辑器工具栏使用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="/UploadFiles/2021-04-02/hallo.js">

调用插件是非常简单的

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

标签:
Hallo.js,jQuery,UI,Web编辑器

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

P70系列延期,华为新旗舰将在下月发布

3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。

而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?

根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。