Hallo.js WYSIWYG-Webeditor basierend auf jQuery UI_jquery

Schauen wir uns zunächst die Wirkung an:

Hallo.js ist ein einfacher Rich-Text-Webeditor, der auf der jQuery-Benutzeroberfläche basiert und HTML5-ContentEditable verwendet, um WYSIWYG zu erreichen. Das Ziel besteht nicht darin, die heute sehr beliebten Editoren wie TinyMCE oder Aloha Editor zu ersetzen, sondern Entwicklern ein einfacheres und angenehmeres Bearbeitungserlebnis für Benutzer zu bieten.

Hallo.js ist eine kostenlose Software, die von Henri Bergius für das IKS-Projekt entwickelt wurde. Sie wird mit CoffeeScript entwickelt, folgt der MIT-Lizenzvereinbarung und wird auf GitHub gehostet.

Anwendung

1. Sie müssen jQuery, jQuery UI und Rangy-Bibliotheken in Ihr Projekt einführen:

<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/rangy-core.js"></script>

Die Editor-Symbolleiste verwendet jQuery-UI-Designs, daher möchten Sie möglicherweise auch ein Design an Ihre Bedürfnisse anpassen. Die Schriftart des Symbolleistensymbols basiert auf Font Awesome. Obwohl in der Demo eine gestaltete Symbolleiste angezeigt wird, sollten Sie der Klasse hallotoolbar auch etwas CSS (z. B. Hintergrund und Rahmen) hinzufügen.

<link rel="stylesheet" href="/path/to/your/jquery-ui.css">
<link rel="stylesheet" href="/path/to/your/font-awesome.css">

Wir stellen Hallo.js vor

<script src="hallo.js"></script>

Der Aufruf des Plug-Ins ist sehr einfach

jQuery('p').hallo();

Sie können die Bearbeitungsfunktion von Tags auch deaktivieren

jQuery('p').hallo({editable: false});

Hallo selbst kann nur ausgewählte DOM-Elemente bearbeitbar machen und stellt keine Formatierungswerkzeuge zur Verfügung. Das Format besteht darin, Hallo durch Laden des Plug-Ins zu initialisieren. Sogar einfache Dinge wie Fett- und Kursivschrift-Plugins:

jQuery('.editable').hallo({
 plugins: {
  'halloformat': {}
 }
});

In diesem Beispiel wird ein einfaches Formatierungs-Plugin erstellt, das Funktionen wie Fett- und Kursivschrift bietet. Sie können so viele gute Plugins haben, wie Sie möchten, und diese bei Bedarf auswählen.

Hallo verfügt über mehr Optionen, die bei der Instanziierung festgelegt werden können. Siehe die Dokumentation hallo.coffee-Datei.

Ereignismethode

Hallo bietet einige Veranstaltungen an, die bei der Integration und Berufung helfen. Sie können sie mit jQuery bind abonnieren:

• halloenabled: Wird ausgelöst, wenn eine bearbeitbare Datei aktiviert ist (bearbeitbar auf „true“ gesetzt)
  
• hallodisabled: Wird ausgelöst, wenn ein bearbeitbares Element deaktiviert ist (bearbeitbar auf „false“ gesetzt)
  
• hallomodifiziert: Wird immer dann ausgelöst, wenn der Benutzer den zu bearbeitenden Inhalt geändert hat. Der Inhalt des Ereignisdatenschlüssels enthält den HTML-Code.
  
• halloactivated: Wird ausgelöst, wenn der Benutzer einen bearbeitbaren Bereich aktiviert (normalerweise durch Anklicken)
  
• hallodeactivated: Wird ausgelöst, wenn der Benutzer einen bearbeitbaren Bereich deaktiviert

Plugin

• halloformat – Fügt der Symbolleiste Unterstützung für Fett, Kursiv, Durchgestrichen und Unterstrichen hinzu (Aktivieren/Deaktivieren mit Optionen: „formattings“: {„bold“: true, „italic“: true, „strikethrough“. ”: wahr, „unterstrichen“: falsch})
  
• halloheadings – Fügt Unterstützung für H1, H2, H3 hinzu. Sie können einen Überschriften-Optionsschlüssel übergeben, um anzugeben, was angezeigt werden soll (z. B. „formatBlocks“:[„p“, „h2“, "h3"])
  
• hallojustify – Fügt Unterstützung für die Ausrichtung links, zentriert und rechts hinzu
  
• Hallolisten – Fügt Unterstützung für geordnete und ungeordnete Listen hinzu (Auswahl mit Optionen: „Listen“: {„geordnet“: falsch, „ungeordnet“: wahr})
  
• halloreundo – Fügt Unterstützung für Rückgängigmachen und Wiederherstellen hinzu
  
• hallolink – Fügt Unterstützung zum Hinzufügen von Links zu einer Auswahl hinzu (funktioniert derzeit nicht)
  
• halloimage – Bilder hochladen, suchen, Vorschläge
  
• halloblacklist – Filtern unerwünschter Tags aus dem Inhalt
  

Schreiben Sie ein Plug-in

Das Hallo-Plug-in wird zum Schreiben regulärer jQuery-UI-Plug-ins verwendet.

Wenn Hallo lädt, werden auch alle aktivierten Plugins des Geräts geladen und ihnen einige zusätzliche Optionen übergeben:

• bearbeitbar: Die Hauptinstanz des Hallo-Widgets
• uuid: eindeutige Kennung der Hallo-Instanz, kann für Element-IDs verwendet werden
  

Ein einfaches Plugin sieht wie folgt aus:

#  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)

Das Obige ist eine detaillierte Einführung in den Hallo.js-Rich-Text-Editor. Ich hoffe, dass es für das Lernen aller hilfreich sein wird.