medium editor
5.23.3
Wenn Sie daran interessiert sind, einen der erfolgreichsten Wysiwyg -Textredakteure auf GitHub beizubehalten, lassen Sie es uns wissen! (Siehe Ausgabe Nr. 1503)
Dies ist ein Klon von Medium.com Inline -Editor -Symbolleiste.
Der Mediumeditor wurde mit Vanille -JavaScript geschrieben, keine zusätzlichen Frameworks erforderlich.
Demo : http://yabwe.github.io/medium-editor/
Via npm:
Führen Sie in Ihrer Konsole aus: npm install medium-editor
Via Bower:
bower install medium-editor
Über eine externe CDN
Für die neueste Version:
< script src =" //cdn.jsdelivr.net/npm/medium-editor@latest/dist/js/medium-editor.min.js " > </ script >
< link rel =" stylesheet " href =" //cdn.jsdelivr.net/npm/medium-editor@latest/dist/css/medium-editor.min.css " type =" text/css " media =" screen " charset =" utf-8 " >Für eine benutzerdefinierte:
< script src =" //cdn.jsdelivr.net/npm/[email protected]/dist/js/medium-editor.min.js " > </ script >
< link rel =" stylesheet " href =" //cdn.jsdelivr.net/npm/[email protected]/dist/css/medium-editor.min.css " type =" text/css " media =" screen " charset =" utf-8 " >Manuelle Installation:
Laden Sie die neueste Version herunter und fügen Sie Ihre Seite mit den Stylesheets des Mediumeditors an: Ihre Seite:
Suchen Sie die Dateien nach unten genannten Verknüpfungen im DIST -Ordner. (./medium-editor/dist/...)
< link rel =" stylesheet " href =" css/medium-editor.css " > <!-- Core -->
< link rel =" stylesheet " href =" css/themes/default.css " > <!-- or any other theme -->Der nächste Schritt besteht darin, auf das Skript des Editors zu verweisen
< script src =" js/medium-editor.js " > </ script >Sie können jetzt ein neues MediumDitor -Objekt instanziieren:
< script > var editor = new MediumEditor ( '.editable' ) ; </ script >Der obige Code verwandelt alle Elemente mit der Eeditable -Klasse in HTML5 -editable Inhalt und füge ihnen die mittlere Editor -Symbolleiste hinzu.
Sie können auch eine Liste von HTML -Elementen übergeben:
var elements = document . querySelectorAll ( '.editable' ) ,
editor = new MediumEditor ( elements ) ; Mediumeditor unterstützt auch TextArea. Wenn Sie ein Textbereichselement angeben, erstellt das Skript ein neues DIV mit contentEditable=true , verbergte die textarea und verknüpft den Textbereichswert mit dem DIV -HTML -Inhalt.
Die Menschen haben Wrapper in den Mediumeditor zur Integration in verschiedene Frameworks und Tech -Stapel beigetragen. Schauen Sie sich die Liste der vorhandenen Wrapper und Integrationen an, die bereits für Mediumeditor geschrieben wurden!
Sehen Sie sich die Dokumentation mit mittlerer Optionen für alle verschiedenen Optionen für mittelschwerer an.
Optionen zum Anpassen von Medium-Editor werden als zweites Argument an den Konstruktor mit Mediumeditor übergeben. Beispiel:
var editor = new MediumEditor ( '.editor' , {
// options go here
} ) ;'medium-editor-button-active'false | 'fontAwesome'. Standard: false Mit 'fontawesome' , da die ButtonLabels von Version 4.1.0 des Fontawesome -CSS auf der Seite erforderlich sind, um sicherzustellen, dass alle Symbole korrekt angezeigt werden
0falsefalsefalsefalsedocument.body{}truefalseDie Symbolleiste für mittelschwerer wird als integrierte Erweiterung implementiert, die automatisch angezeigt wird, wenn der Benutzer einen Text auswählt. Die Symbolleiste kann alle festgelegten integrierten Tasten enthalten, können jedoch auch alle benutzerdefinierten Tasten als Erweiterungen halten.
Optionen für die Symbolleiste werden als Objekt übergeben, das das äußere Optionsobjekt ist. Beispiel:
var editor = new MediumEditor ( '.editable' , {
toolbar : {
/* These are the default options for the toolbar,
if nothing is passed this is what is used */
allowMultiParagraphSelection : true ,
buttons : [ 'bold' , 'italic' , 'underline' , 'anchor' , 'h2' , 'h3' , 'quote' ] ,
diffLeft : 0 ,
diffTop : - 10 ,
firstButtonClass : 'medium-editor-button-first' ,
lastButtonClass : 'medium-editor-button-last' ,
relativeContainer : null ,
standardizeSelectionStart : false ,
static : false ,
/* options which only apply when static is true */
align : 'center' ,
sticky : false ,
updateOnEmptySelection : false
}
} ) ;true['bold', 'italic', 'underline', 'anchor', 'h2', 'h3', 'quote']0-10'medium-editor-button-first''medium-editor-button-last'relative anstelle von absolute positioniert. Standard: nullfalsefalse static Option verwendet wird:left | center | right - Wenn die statische Option true , richtet sich dies die statische Symbolleiste relativ zum Medium -Editor -Element aus. Standard: centertrue ist, ermöglicht/deaktiviert dies die Symbolleiste "kleben" zum Ansichtsfenster und bleibt auf dem Bildschirm sichtbar, während die Seite scrolls. Standard: falsetrue ist, ermöglicht/deaktiviert dies das Aktualisieren des Status der Symbolleistenschaltflächen, selbst wenn die Auswahl zusammenbricht (es gibt keine Auswahl, nur einen Cursor). Standard: false Um die Symbolleiste zu deaktivieren (die auch die Erweiterung der Ankerpräview deaktiviert), setzen Sie den Wert der toolbar -Option auf false :
var editor = new MediumEditor ( '.editable' , {
toolbar : false
} ) ; Das Tastenverhalten kann geändert werden, indem ein Objekt anstelle einer Zeichenfolge in das Schaltflächen -Array weitergegeben wird. Dies ermöglicht das Überschreiben einiger des Standardverhaltens von Schaltflächen. Die folgenden Optionen sind einige der grundlegenden Teile von Schaltflächen, die Sie überschreiben können, aber jeder Teil des MediumEditor.Extension.prototype kann über diese Schaltflächenoptionen überschrieben werden. (Schauen Sie sich den Quellcode für Schaltflächen an, um zu sehen, was alles überschrieben werden kann).
MediumEditor.execAction() wenn die Schaltfläche klickt.<b> oder <strong> -Tag befindet, das angibt, dass der Text bereits fett ist. Die Auswahl an Schamnamen für Bold wäre also: ['b', 'strong']useQueryState auf true eingestellt ist.'font-weight' auf 700 oder 'bold' liegt, zeigt an, dass der Text bereits fett ist. Das Stilobjekt für BOLD wäre also { prop: 'font-weight', value: '700|bold' }useQueryState auf true eingestellt ist.'|' getrennt werden)document.queryCommandState() -Methode, um festzustellen, ob die Aktion bereits angewendet wurde. Wenn die Aktion bereits angewendet wurde, wird die Schaltfläche in der Symbolleiste als "aktiv" angezeigtdocument.queryCommandState('bold') was true zurückgibt, wenn der Browser der Meinung ist, dass der Text bereits fett und ansonsten falsch istinnerHTML zum Einstellen in die SchaltflächeinnerHTML die für den Inhalt der Schaltfläche verwendet werden soll, wenn die Option ButtonLabels für mittelschwerer auf 'fontawesome' eingestellt ist Beispiel für übergeordnete Tasten (hier ist das Ziel, Medium durch H1- und H2 -Tasten nachzuahmen, die tatsächlich <h2> bzw. <h3> -Tags erzeugen):
var editor = new MediumEditor ( '.editable' , {
toolbar : {
buttons : [
'bold' ,
'italic' ,
{
name : 'h1' ,
action : 'append-h2' ,
aria : 'header type 1' ,
tagNames : [ 'h2' ] ,
contentDefault : '<b>H1</b>' ,
classList : [ 'custom-class-h1' ] ,
attrs : {
'data-custom-attr' : 'attr-value-h1'
}
} ,
{
name : 'h2' ,
action : 'append-h3' ,
aria : 'header type 2' ,
tagNames : [ 'h3' ] ,
contentDefault : '<b>H2</b>' ,
classList : [ 'custom-class-h2' ] ,
attrs : {
'data-custom-attr' : 'attr-value-h2'
}
} ,
'justifyCenter' ,
'quote' ,
'anchor'
]
}
} ) ; Die Ankervorschau ist eine integrierte Erweiterung, in der automatisch ein "Tooltip" angezeigt wird, wenn der Benutzer über einen Link im Editor überläuft. Der Tooltip zeigt den href des Links an und öffnet beim Klicken das Ankerbearbeitungsformular in der Symbolleiste.
Optionen für die Ankervorschau 'Tooltip' werden als Objekt über das Objekt der äußeren Optionen übergeben. Beispiel:
var editor = new MediumEditor ( '.editable' , {
anchorPreview : {
/* These are the default options for anchor preview,
if nothing is passed this is what it used */
hideDelay : 500 ,
previewValueSelector : 'a'
}
}
} ) ;500'a'falsetrue Um die Ankervorschau zu deaktivieren, legen Sie den Wert der anchorPreview -Option auf false fest:
var editor = new MediumEditor ( '.editable' , {
anchorPreview : false
} ) ; toolbar: false oder data-disable-toolbar Attribut), wird die Ankerpräview automatisch deaktiviert.Der Platzhalterhandler ist eine integrierte Erweiterung, in der der Platzhaltertext angezeigt wird, wenn der Editor leer ist.
Optionen für Platzhalter werden als Objekt über das Element des äußeren Optionsobjekts verabschiedet. Beispiel:
var editor = new MediumEditor ( '.editable' , {
placeholder : {
/* This example includes the default options for placeholder,
if nothing is passed this is what it used */
text : 'Type your text' ,
hideOnClick : true
}
} ) ; Text : Definiert den Standard -Platzhalter für leere Inhalte, wenn der Platzhalter nicht auf false festgelegt ist. Sie können es überschreiben, indem Sie ein data-placeholder -Attribut auf den Editorelementen festlegen. Standard: 'Type your text'
HideonClick : Der Platzhalter verschwindet, sobald der Feld in den Fokus gewinnt. Standard: true . Um den Platzhalter erst zu verbergen, nachdem er angefangen hat, einzugeben, und ihn erneut zu zeigen, sobald das Feld leer ist, setzen Sie diese Option auf false .
Um den Platzhalter zu deaktivieren, legen Sie den Wert der placeholder auf false fest:
var editor = new MediumEditor ( '.editable' , {
placeholder : false
} ) ;Das Ankerformular ist eine integrierte Schaltfläche, mit der der Benutzer Links aus dem Editor hinzufügen/bearbeiten/entfernen kann. Wenn 'Anker' in der Liste der Schaltflächen als Schaltfläche übergeben wird, wird diese Erweiterung aktiviert und kann durch Klicken auf die entsprechende Schaltfläche in der Symbolleiste ausgelöst werden.
Optionen für das Ankerformular werden als Objekt übergeben, das das äußere Optionsobjekt ist. Beispiel:
var editor = new MediumEditor ( '.editable' , {
toolbar : {
buttons : [ 'bold' , 'italic' , 'underline' , 'anchor' ]
} ,
anchor : {
/* These are the default options for anchor form,
if nothing is passed this is what it used */
customClassOption : null ,
customClassOptionText : 'Button' ,
linkValidation : false ,
placeholderText : 'Paste or type a link' ,
targetCheckbox : false ,
targetCheckboxText : 'Open in new window'
}
}
} ) ;null'Button'encodeURI . Standard: false'Paste or type a link'target des erstellten Linkes ändert. Standard: false'Open in new window'Der Paste-Handler ist eine integrierte Erweiterung, mit der versucht wird, den Inhalt zu filtern, wenn der Benutzer feststellt. Wie der Paste -Handlerfilter über bestimmte Optionen konfigurierbar ist.
Optionen für die Paste -Handhabung werden als Objekt über das Objekt der äußeren Optionen übergeben. Beispiel:
var editor = new MediumEditor ( '.editable' , {
paste : {
/* This example includes the default options for paste,
if nothing is passed this is what it used */
forcePlainText : true ,
cleanPastedHTML : false ,
cleanReplacements : [ ] ,
cleanAttrs : [ 'class' , 'style' , 'dir' ] ,
cleanTags : [ 'meta' ] ,
unwrapTags : [ ]
}
} ) ;truefalsetrue sind oder beim Aufrufen von Helfer -Methoden cleanPaste(text) . Diese Ersetzungen werden vor dem Bau von Austausch ausgeführt. Standard: []true sind oder beim Aufrufen von Helfer -Methoden cleanPaste(text) . Diese Ersetzungen werden nach erbautem Austausch ausgeführt. Standard: []true ist oder beim Aufrufen von cleanPaste(text) oder pasteHTML(html,options) Helfermethoden. Standard: ['class', 'style', 'dir']true ist oder beim Aufrufen von cleanPaste(text) oder pasteHTML(html,options) Helfermethoden. Standard: ['meta']true ist oder wenn Sie cleanPaste(text) oder pasteHTML(html,options) Helfer -Methoden aufrufen. Standard: []Der Handler der Tastaturbefehle ist eine integrierte Erweiterung für die Zuordnung von Schlüsselkombinationen zu Aktionen, die im Editor ausgeführt werden sollen.
Optionen für KeyboardCommands werden als Objekt über das Objekt der äußeren Optionen übergeben. Beispiel:
var editor = new MediumEditor ( '.editable' , {
keyboardCommands : {
/* This example includes the default options for keyboardCommands,
if nothing is passed this is what it used */
commands : [
{
command : 'bold' ,
key : 'B' ,
meta : true ,
shift : false ,
alt : false
} ,
{
command : 'italic' ,
key : 'I' ,
meta : true ,
shift : false ,
alt : false
} ,
{
command : 'underline' ,
key : 'U' ,
meta : true ,
shift : false ,
alt : false
}
] ,
}
} ) ;editor.execAction() wenn die Schlüsselkombination verwendet wirdfalse definiert ist, wird die Verknüpfung deaktiviert Um die Tastaturbefehle zu deaktivieren, legen Sie den Wert der Option keyboardCommands auf false fest:
var editor = new MediumEditor ( '.editable' , {
keyboardCommands : false
} ) ;Der Auto-Link-Handler ist eine integrierte Erweiterung, die automatisch URLs, die in das Textfeld eingegeben wurden, in HTML-Anker-Tags (ähnlich der Funktionalität von Markdown) verwandelt. Diese Funktion ist standardmäßig ausgeschaltet.
Setzen Sie den Wert der autoLink -Option auf true :
var editor = new MediumEditor ( '.editable' , {
autoLink : true
} ) ;Der Bildschlepperhandler ist eine integrierte Erweiterung zum Umgang mit Ziehen und Ablegen von Bildern in das inhaltliche. Diese Funktion ist standardmäßig eingeschaltet.
Um das integrierte Bildschlepper zu deaktivieren, setzen Sie den Wert der Option für imageDragging auf false :
var editor = new MediumEditor ( '.editable' , {
imageDragging : false
} ) ; Um keine Drag & Drop -Ereignisse zu verhindern und das Ziehen von Dateien im Allgemeinen zu deaktivieren, geben Sie eine Dummy -Imagging -Erweiterung an.
var editor = new MediumEditor ( '.editor' , {
extensions : {
'imageDragging' : { }
}
} ) ;Aufgrund des Codestaates in 5.0.0 verhinderte der Herausgeber immer alle Drag & Drop -Aktionen. Wir werden einen besseren Weg haben, um das Datei einzuziehen.*
var editor = new MediumEditor ( '.editable' , {
delay : 1000 ,
targetBlank : true ,
toolbar : {
buttons : [ 'bold' , 'italic' , 'quote' ] ,
diffLeft : 25 ,
diffTop : 10 ,
} ,
anchor : {
placeholderText : 'Type a link' ,
customClassOption : 'btn' ,
customClassOptionText : 'Create Button'
} ,
paste : {
cleanPastedHTML : true ,
cleanAttrs : [ 'style' , 'dir' ] ,
cleanTags : [ 'label' , 'meta' ] ,
unwrapTags : [ 'sub' , 'sup' ]
} ,
anchorPreview : {
hideDelay : 300
} ,
placeholder : {
text : 'Click to edit'
}
} ) ; Standardmäßig unterstützt Mediumeditor Schaltflächen für die meisten Befehle für document.execCommand() , die über alle unterstützten Browser gut unterstützt werden.
Standardmäßig zeigt der Mediumeditor nur die hier aufgeführten Schaltflächen an, um eine riesige Symbolleiste zu vermeiden:
Dies sind alle eingebauten Tasten, die vom Mediumeditor unterstützt werden.
In der Wiki-Seite finden Sie eine Liste der verfügbaren Themen: https://github.com/yabwe/medium-editor/wiki/themes
Sehen Sie sich die Dokumentation von API -Dokumentation mittelgroßer Objektdokumentation auf dem Wiki an, um Einzelheiten zu allen auf dem mittelgrosen Objekt unterstützten Methoden zu finden.
on() angehängt wurdeimportSelection() angewendet werden kannexportSelection() zurückgegeben wird))saveSelection() aufgerufen wurdedocument.execCommand('createLink')document.execCommand ausdocument.queryCommandState(action) zur Überprüfung, ob bereits eine bestimmte Aktion auf die Auswahl angewendet wurde.delay ausgeführt wirdinnerHTML des Elements beim indexinnerHTML auf html des Elements am index festEs ist möglich, Ihrer vorhandenen MediumDitor -Instanz dynamisch neue Elemente hinzuzufügen:
var editor = new MediumEditor ( '.editable' ) ;
editor . subscribe ( 'editableInput' , this . _handleEditableInput . bind ( this ) ) ;
// imagine an ajax fetch/any other dynamic functionality which will add new '.editable' elements to the DOM
editor . addElements ( '.editable' ) ;
// OR editor.addElements(document.getElementsByClassName('editable'));
// OR editor.addElements(document.querySelectorAll('.editable')); Das Übergeben einer Elemente oder einer Reihe von Elementen an addElements(elements) wird:
this.elements .<textarea> Elemente:<textarea><div contenteditable=true> Element und fügen Sie es dem Element -Array hinzu. Rufen Sie einfach removeElements mit dem Element oder einer Reihe von Elementen an, die Sie abreißen möchten. Jedes Element selbst bleibt ein zufriedenes - es wird nur alle Ereignishandler und alle Verweise darauf entfernt, damit Sie es sicher aus DOM entfernen können.
editor . removeElements ( document . querySelector ( '#myElement' ) ) ;
// OR editor.removeElements(document.getElementById('myElement'));
// OR editor.removeElements('#myElement');
// in case you have jQuery and don't exactly know when an element was removed, for example after routing state change
var removedElements = [ ] ;
editor . elements . forEach ( function ( element ) {
// check if the element is still available in current DOM
if ( ! $ ( element ) . parents ( 'body' ) . length ) {
removedElements . push ( element ) ;
}
} ) ;
editor . removeElements ( removedElements ) ; Verwenden Sie für die Beobachtung von Änderungen am inhaltlichem Bereich das benutzerdefinierte Ereignis 'editableInput' , das über die Methode subscribe() ausgesetzt ist:
var editor = new MediumEditor ( '.editable' ) ;
editor . subscribe ( 'editableInput' , function ( event , editable ) {
// Do some work
} ) ; Diese Veranstaltung wird in allen Browsern unterstützt, die von Mediumeditor (einschließlich IE9+ und Edge) unterstützt werden! Um bei Fällen zu helfen, wenn ein Instanz von Mediumeditor mehrere Elemente überwacht, ist das zweite Argument, das an den Ereignishandler weitergegeben wird (im editable Beispiel), ein Verweis auf das inhaltliche Element, das sich tatsächlich geändert hat.
Dies ist praktisch, wenn Sie Änderungen an dem inhaltlichen Element erfassen müssen, einschließlich:
Warum ist das interessant und warum sollten Sie dieses Ereignis verwenden, anstatt nur an das input im inhaltlichen Element anhängen?
Für die meisten modernen Browser (Chrom, Firefox, Safari usw.) funktioniert das input gut. Tatsächlich ist editableInput nur ein Proxy für das input in diesen Browsern. Das input wird jedoch nicht für zufriedene Elemente im IE 9-11 unterstützt und wird hauptsächlich in Microsoft Edge unterstützt, jedoch nicht vollständig.
Um das editableInput -Ereignis in Internet Explorer und Microsoft Edge ordnungsgemäß zu unterstützen, verwendet Mediumeditor eine Kombination aus selectionchange und keypress -Ereignissen sowie Überwachung von Aufrufen auf document.execCommand .
Überprüfen Sie die Dokumentation, um zu erfahren, wie Sie Erweiterungen für Mediumeditor entwickeln.
Eine Liste vorhandener Erweiterungen und Plugins wie Bilder und Medieneinbettungen, Tabellen und Markdowns finden Sie hier.
Die Demo vor Ort führen:
npm install von Ihrer Konsole am Stammnode index.js aus dem Stammhttp://localhost:8088/demo/index.html um die Demo anzuzeigenAufgaben zur Entwicklung mittelgroßer Entwicklungen werden von Grunn verwaltet. Um alle erforderlichen Pakete zu installieren, rufen Sie einfach auf:
npm installUm alle Tests auszuführen und die DIM -Dateien zum Testen auf Demo -Seiten zu erstellen, rufen Sie einfach auf:
gruntDies sind die anderen verfügbaren Grunzaufgaben:
Die Quelldateien befinden sich im SRC -Verzeichnis. Stellen Sie sicher, dass Sie Änderungen an diesen Dateien und nicht an Dateien im DIST -Verzeichnis vornehmen.
Töte ein paar Fehler :)
git checkout -b my-new-feature ).git commit -am 'Added some feature' ) ohne Dateien aus dem DIST -Verzeichnis .git push origin my-new-feature )Um während des gesamten Projekts einen konsequenten Code zu erstellen, verwenden wir einige Tools, um uns zu helfen. Sie haben Plugins für die beliebtesten Redakteure/IDEs, um das Codieren für unser Projekt vorzunehmen, aber Sie sollten sie auch in Ihrem Projekt verwenden!
Wir verwenden JSHINT für jeden Build, um einfach zu kennzeichnende Fehler und potenzielle Probleme in unserem JS zu finden. Sie finden unsere JSHINT -Einstellungen in der .jshintrc -Datei im Root des Projekts.
Wir verwenden JSCs für jeden Build, um einige Code -Stilregeln durchzusetzen, die wir für unser Projekt haben. Sie finden unsere JSCS -Einstellungen in der .jscsrc -Datei im Stamm des Projekts.
Wir verwenden EditorConfig, um konsistente Codierungsstile zwischen verschiedenen Redakteuren und IDEs aufrechtzuerhalten. Sie finden unsere Einstellungen in der .editorconfig -Datei im Stamm des Projekts.
Suchen Sie nach etwas Einfachem für einen ersten Beitrag? Versuchen Sie, einen einfachen ersten Fehler zu beheben!
https://github.com/yabwe/medium-editor/graphs/contributors
Fügen Sie Ihre Org hier hinzu und wir können Sie zu unserer Zielseite hinzufügen!
MIT: https://github.com/yabwe/medium-editor/blob/master/license
