medium editor
5.23.3
Si vous vouliez aider à maintenir l'un des éditeurs de texte WYSIWYG les plus réussis sur GitHub, faites-le nous savoir! (Voir numéro # 1503)
Ceci est une barre d'outils Clone of Medium.com en éditeur en ligne.
Measialdiator a été écrit à l'aide de JavaScript Vanilla, aucun cadre supplémentaire requis.
Demo : http://yabwe.github.io/medium-editor/
Via NPM:
Exécutez dans votre console: npm install medium-editor
Via Bower:
bower install medium-editor
Via un CDN externe
Pour la dernière 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 " >Pour un personnalisé:
< 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 " >Installation manuelle:
Téléchargez la dernière version et joignez des styles de styles de l'éditeur moyen sur votre page:
Trouvez les fichiers aux liens mentionnés ci-dessous dans le dossier DIST. (./Medium-editor/dist / ...)
< link rel =" stylesheet " href =" css/medium-editor.css " > <!-- Core -->
< link rel =" stylesheet " href =" css/themes/default.css " > <!-- or any other theme -->L'étape suivante consiste à référencer le script de l'éditeur
< script src =" js/medium-editor.js " > </ script >Vous pouvez désormais instancier un nouvel objet MediumdEditor:
< script > var editor = new MediumEditor ( '.editable' ) ; </ script >Le code ci-dessus transformera tous les éléments avec la classe. Editable en contenu modifiable HTML5 et ajoutera la barre d'outils de l'éditeur moyen.
Vous pouvez également transmettre une liste d'éléments HTML:
var elements = document . querySelectorAll ( '.editable' ) ,
editor = new MediumEditor ( elements ) ; MediaSeditor prend également en charge TextArea. Si vous fournissez un élément TextArea, le script créera un nouveau div avec contentEditable=true , masquez le TextArea et liera la valeur TextArea au contenu DIV HTML.
Les gens ont contribué des emballages autour de médiums pour s'intégrer à différents cadres et piles technologiques. Jetez un œil à la liste des emballages et intégrations existants qui ont déjà été écrits pour les médiums!
Affichez la documentation des options de médiums sur toutes les différentes options pour les médiums.
Les options pour personnaliser les éditeurs moyens sont passées comme deuxième argument au constructeur de médiums. Exemple:
var editor = new MediumEditor ( '.editor' , {
// options go here
} ) ;'medium-editor-button-active'false | «Fontawesome». Par défaut: false L'utilisation de 'fontawesome' car les ButtonLabels nécessitent la version 4.1.0 du Fontawesome CSS sur la page pour s'assurer que toutes les icônes seront affichées correctement
0falsefalsefalsefalsedocument.body{}truefalseLa barre d'outils de MeasialEditor est implémentée comme une extension intégrée qui s'affiche automatiquement chaque fois que l'utilisateur sélectionne du texte. La barre d'outils peut contenir n'importe quel ensemble de boutons intégrés définis, mais peut également maintenir tous les boutons personnalisés passés en extensions.
Les options pour la barre d'outils sont passées en tant qu'objet qui est un membre de l'objet Options externes. Exemple:
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 au lieu de absolute . Par défaut: nullfalsefalse static est utilisée:left | center | right - lorsque l'option statique est true , cela aligne la barre d'outils statique par rapport à l'élément d'éditeur moyen. Par défaut: centertrue , cela permet / désactive la barre d'outils "coller" à la fenêtre et restant visible à l'écran pendant que la page défile. Par défaut: falsetrue , cela permet / désactive la mise à jour de l'état des boutons de la barre d'outils même lorsque la sélection est effondrée (il n'y a pas de sélection, juste un curseur). Par défaut: false Pour désactiver la barre d'outils (qui désactive également l'extension d'ancrage-pré-vue), définissez la valeur de l'option de la toolbar sur false :
var editor = new MediumEditor ( '.editable' , {
toolbar : false
} ) ; Le comportement du bouton peut être modifié en passant un objet dans le tableau des boutons au lieu d'une chaîne. Cela permet de remplacer une partie du comportement par défaut des boutons. Les options suivantes sont quelques-unes des parties de base des boutons que vous pouvez remplacer, mais toute partie de MediumEditor.Extension.prototype peut être remplacée via ces options de bouton. (Consultez le code source des boutons pour voir ce que tout peut être remplacé).
MediumEditor.execAction() Lorsque le bouton est cliqué.<b> ou <strong> qui indique que le texte est déjà audacieux. Ainsi, le tableau de tagNames pour Bold serait: ['b', 'strong']useQueryState est défini sur true .'font-weight' définie sur 700 ou 'bold' , ce qui indique que le texte est déjà audacieux. Ainsi, l'objet de style pour Bold serait { prop: 'font-weight', value: '700|bold' }useQueryState est défini sur true .'|' )document.queryCommandState() pour déterminer si l'action a déjà été appliquée. Si l'action a déjà été appliquée, le bouton sera affiché comme «actif» dans la barre d'outilsdocument.queryCommandState('bold') qui reviendra vrai si le navigateur pense que le texte est déjà audacieux et faux sinon sinoninnerHTML pour mettre à l'intérieur du boutoninnerHTML à utiliser pour le contenu du bouton Si l'option ButtonLabels pour MeasialEditor est définie sur 'fontawesome' Exemple de boutons remplacés (ici, l'objectif est d'imiter le milieu en ayant des boutons H1 et H2 qui produisent respectivement des balises <h2> et <h3> ):
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'
]
}
} ) ; L'aperçu de l'ancrage est une extension intégrée qui affiche automatiquement une «infraction» lorsque l'utilisateur oscille sur un lien dans l'éditeur. L'info-bulle affichera le href du lien et, une fois cliqué, ouvrira le formulaire d'édition d'ancrage dans la barre d'outils.
Les options pour l'aperçu de l'ancrage «Info-toolt» sont passées en tant qu'objet qui est un membre de l'objet Options externes. Exemple:
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 Pour désactiver l'aperçu de l'ancrage, définissez la valeur de l'option anchorPreview sur false :
var editor = new MediumEditor ( '.editable' , {
anchorPreview : false
} ) ; toolbar: false ou l'attribut data-disable-toolbar ), l'ancrage-préview est automatiquement désactivé.Le gestionnaire de placement est une extension intégrée qui affiche le texte de l'espace réservé lorsque l'éditeur est vide.
Les options d'espace réservé sont passées en tant qu'objet qui est un membre de l'objet Options externes. Exemple:
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
}
} ) ; Texte : définit l'espace de place par défaut pour les contenus vides lorsque l'espace réservé n'est pas défini sur false. Vous pouvez l'écraser en définissant un attribut data-placeholder sur les éléments de l'éditeur. Par défaut: 'Type your text'
HideNClick : fait disparaître l'espace réservé dès que le champ accélère. Par défaut: true . Pour masquer l'espace réservé uniquement après avoir commencé à taper et pour le montrer dès que le champ est vide, définissez cette option sur false .
Pour désactiver l'espace réservé, définissez la valeur de l'option placeholder à false :
var editor = new MediumEditor ( '.editable' , {
placeholder : false
} ) ;Le formulaire d'ancrage est une extension de bouton intégrée qui permet à l'utilisateur d'ajouter / modifier / supprimer les liens à partir de l'éditeur. Lorsque «l'ancrage» est passé comme un bouton dans la liste des boutons, cette extension sera activée et peut être déclenchée en cliquant sur le bouton correspondant dans la barre d'outils.
Les options pour le formulaire d'ancrage sont passées en tant qu'objet qui est un membre de l'objet Options externes. Exemple:
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 . Par défaut: false'Paste or type a link'target du lien créé. Par défaut: false'Open in new window'Le gestionnaire de pâte est une extension intégrée qui tente de filtrer le contenu lorsque l'utilisateur colle. La façon dont le gestionnaire de pâte filtre est configurable via des options spécifiques.
Les options de gestion de la pâte sont passées en tant qu'objet qui est un membre de l'objet Options externes. Exemple:
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 ou lors de l'appel de la méthode d'assistance cleanPaste(text) . Ces remplacements sont exécutés avant les remplacements intégrés. Défaut: []true ou lors de l'appel de la méthode d'assistance cleanPaste(text) . Ces remplacements sont exécutés après les remplacements intégrés. Défaut: []true ou lors de l'appel des méthodes d'assistance cleanPaste(text) ou pasteHTML(html,options) . Par défaut: ['class', 'style', 'dir']true ou lors de l'appel des méthodes d'assistance cleanPaste(text) ou pasteHTML(html,options) . Par défaut: ['meta']true ou lors de l'appel des méthodes d'assistance cleanPaste(text) ou pasteHTML(html,options) . Défaut: []Le Handler des commandes du clavier est une extension intégrée pour mapper des combinaisons de clés vers des actions à exécuter dans l'éditeur.
Les options pour les commandes de clavier sont passées en tant qu'objet qui est un membre de l'objet Options externes. Exemple:
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() lorsque la combinaison de clé est utiliséefalse , le raccourci sera désactivé Pour désactiver les commandes du clavier, définissez la valeur de l'option keyboardCommands sur false :
var editor = new MediumEditor ( '.editable' , {
keyboardCommands : false
} ) ;Le gestionnaire de liaison automatique est une extension intégrée qui transforme automatiquement les URL entrées dans le champ de texte en balises d'ancrage HTML (similaire à la fonctionnalité de Markdown). Cette fonctionnalité est désactivée par défaut.
Pour activer la prise en charge intégrée de liaison automatique, définissez la valeur de l'option autoLink sur true :
var editor = new MediumEditor ( '.editable' , {
autoLink : true
} ) ;Le gestionnaire de glisser-ganglion d'image est une extension intégrée pour gérer les images de glisser et de laisser tomber les images dans le contenu. Cette fonctionnalité est allumée par défaut.
Pour désactiver la glissement d'image intégrée, définissez la valeur de l'option imageDragging sur false :
var editor = new MediumEditor ( '.editable' , {
imageDragging : false
} ) ; Pour cesser de prévenir les événements de glisser-déposer et de désactiver la glisser-déposer en général, fournissez une extension iMageDrag mangée factice.
var editor = new MediumEditor ( '.editor' , {
extensions : {
'imageDragging' : { }
}
} ) ;En raison de l'état de code dans 5.0.0, l'éditeur a toujours empêché toute actions de glisser-déposer. Nous aurons une meilleure façon de désactiver le fichier glisser dans 6. *
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'
}
} ) ; Par défaut, MeasdialDeditor prend en charge les boutons pour la plupart des commandes de document.execCommand() qui sont bien soutenues dans tous ses navigateurs pris en charge.
MediaSeditor, par défaut, affichera uniquement les boutons répertoriés ici pour éviter une énorme barre d'outils:
Ce sont tous les boutons intégrés pris en charge par des médiums.
Consultez la page Wiki pour une liste des thèmes disponibles: https://github.com/yabwe/medium-editor/wiki/themes
Affichez la documentation de l'API de l'objet MeasialEditor sur le wiki pour plus de détails sur toutes les méthodes prises en charge sur l'objet Measifadiator.
on()importSelection()exportSelection() )saveSelection() a été appelédocument.execCommand('createLink')document.execCommanddocument.queryCommandState(action) pour vérifier si une action spécifique a déjà été appliquée à la sélection.delayinnerHTML taillé de l'élément à indexinnerHTML à html de l'élément à indexIl est possible d'ajouter dynamiquement de nouveaux éléments à votre instance de support de support existant:
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')); Passer des éléments ou un tableau d'éléments à addElements(elements) :
this.elements .<textarea> Éléments:<textarea><div contenteditable=true> et ajoutez-le au tableau des éléments. Simple, appelez simplement removeElements avec l'élément ou le tableau d'éléments que vous souhaitez démolir. Chaque élément lui-même restera un contenu - il supprimera simplement tous les gestionnaires d'événements et toutes les références pour qu'il puisse le supprimer en toute sécurité de DOM.
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 ) ; Pour observer les modifications sur le contenudIT, utilisez l'événement 'editableInput' personnalisé exposé via la méthode subscribe() :
var editor = new MediumEditor ( '.editable' ) ;
editor . subscribe ( 'editableInput' , function ( event , editable ) {
// Do some work
} ) ; Cet événement est pris en charge dans tous les navigateurs pris en charge par MeasidAdordor (y compris IE9 + et Edge)! Pour aider avec les cas où une instance de suppléant de substitut surveille plusieurs éléments, le 2ème argument transmis au gestionnaire d'événements ( editable dans l'exemple ci-dessus) sera une référence à l'élément satisfaisable qui a réellement changé.
Ceci est pratique lorsque vous avez besoin de saisir toute modification de l'élément satisfaisable, notamment:
Pourquoi est-ce intéressant et pourquoi devriez-vous utiliser cet événement au lieu de simplement vous attacher à l'événement input sur l'élément satisfaistable?
Donc, pour la plupart des navigateurs modernes (Chrome, Firefox, Safari, etc.), l'événement input fonctionne très bien. En fait, editableInput n'est qu'un indicateur indirect de l'événement input dans ces navigateurs. Cependant, l'événement input n'est pas pris en charge pour des éléments satisfaisables dans IE 9-11 et est principalement pris en charge dans Microsoft Edge, mais pas entièrement.
Ainsi, pour soutenir correctement l'événement editableInput dans Internet Explorer et Microsoft Edge, MeasdialEdordor utilise une combinaison des événements selectionchange et keypress , ainsi que de surveiller les appels à document.execCommand .
Vérifiez la documentation afin d'apprendre à développer des extensions pour le support médial.
Une liste des extensions et des plugins existants, tels que des images et des intérêts de médias, des tables et des marques peut être trouvé ici.
Pour exécuter la démo localement:
npm install à partir de votre console à la racinenode index.js à partir de la racinehttp://localhost:8088/demo/index.html pour afficher la démoLes tâches de développement de médiums sont gérées par le grognement. Pour installer tous les packages nécessaires, il suffit d'invoquer:
npm installPour exécuter tous les tests et créer les fichiers DIST pour les tests sur des pages de démonstration, il suffit d'invoquer:
gruntCe sont les autres tâches de grognement disponibles:
Les fichiers source sont situés à l'intérieur du répertoire SRC . Assurez-vous d'apporter des modifications à ces fichiers et non à ces fichiers dans le répertoire DIST.
Tuez des bugs :)
git checkout -b my-new-feature )git commit -am 'Added some feature' ) sans fichiers du répertoire DIST .git push origin my-new-feature )Pour aider à créer un code d'aspect cohérent tout au long du projet, nous utilisons quelques outils pour nous aider. Ils ont des plugins pour les éditeurs / ides les plus populaires pour faire du codage pour notre projet, mais vous devriez également les utiliser dans votre projet!
Nous utilisons Jshint sur chaque version pour trouver des erreurs et des problèmes potentiels faciles à accélérer dans notre JS. Vous pouvez trouver nos paramètres jshint dans le fichier .jshintrc à la racine du projet.
Nous utilisons des JSC sur chaque version pour appliquer certaines règles de style de code que nous avons pour notre projet. Vous pouvez trouver nos paramètres JSCS dans le fichier .jscsrc dans la racine du projet.
Nous utilisons EditorConfig pour maintenir des styles de codage cohérents entre divers éditeurs et IDE. Vous pouvez trouver nos paramètres dans le fichier .editorconfig dans la racine du projet.
Vous cherchez quelque chose de simple pour une première contribution? Essayez de corriger un premier bogue facile!
https://github.com/yabwe/medium-editor/graphs/Contributeurs
Ajoutez votre organisation ici et nous pouvons vous ajouter à notre page de destination!
MIT: https://github.com/yabwe/medium-editor/blob/master/license
