pen

Rédacteur en chef

• Démo en direct: http://sofish.github.io/pen
• Markdown est pris en charge
• Statut de construction:

---

---

0. Code source

Vous pouvez cloner le code source de GitHub ou utiliser Bower.

 bower install pen

1. Installation

1.1 INIT avec l'attribut ID

 var editor = new Pen ( '#editor' ) ; 

1.2 INIT avec un élément

 var editor = new Pen ( document . getElementById ( 'editor' ) ) ; 

1.3 INIT avec les options

 var options = {
  editor : document . body , // {DOM Element} [required]
  class : 'pen' , // {String} class of the editor,
  debug : false , // {Boolean} false by default
  textarea : '<textarea name="content"></textarea>' , // fallback for old browsers
  list : [ 'bold' , 'italic' , 'underline' ] , // editor menu list
  linksInNewWindow : true // open hyperlinks in a new windows/tab
}

var editor = new Pen ( options ) ; 

2. Configurer

L'objet suivant configure les paramètres par défaut de Pen:

 defaults = {
  class : 'pen' ,
  debug : false ,
  textarea : '<textarea name="content"></textarea>' ,
  list : [
    'blockquote' , 'h2' , 'h3' , 'p' , 'insertorderedlist' , 'insertunorderedlist' ,
    'indent' , 'outdent' , 'bold' , 'italic' , 'underline' , 'createlink'
  ] ,
  stay : true ,
  linksInNewWindow : false
}

Si vous souhaitez personnaliser la barre d'outils pour s'adapter à votre propre projet, vous pouvez instancier le constructeur Pen avec un objet options comme # 1.3: INIT avec options:

2.1 Fallback pour le vieux navigateur

Vous pouvez définir defaults.textarea sur un morceau de chaîne HTML, par défaut, c'est <textarea name="content"></textarea> 。Ce sera défini en tant innerHTML de votre #editor .

2.2 Modifier la classe Editor

Pen ajoutera .pen à votre éditeur par défaut, si vous souhaitez modifier la classe, assurez-vous de remplacer le nom de la classe pen à la vôtre dans src/pen.css .

2.3 Activer le mode de débogage

Si options.debug sont définies sur true , Pen publiera les journaux à la console de votre navigateur.

2.4 Personnalisez la barre d'outils

Vous pouvez définir options.list sur un Array , ajoutez les chaînes suivantes pour créer le vôtre:

• blockquote , h2 , h3 , p , pre : Créez une balise comme sa signification littérale
• insertorderedlist : Créez une liste ol>li
• insertunorderedlist : Créez une liste ul>li
• indent : Liste de retrait / bloc Blockquote
• outdent : Liste extérieure / bloc Blockquote
• bold : enveloppez la sélection de texte dans une balise b
• italic : enveloppez la sélection de texte dans une étiquette i
• underline : enveloppez la sélection de texte dans une balise u
• createlink : insérer un lien vers la sélection de texte
• inserthorizontalrule : insérer une balise hr
• insertimage : insérer une étiquette d'image ( img )

2.5 Ajouter des infractions aux icônes de la barre d'outils

Vous pouvez définir options.titles sur un objet avec des propriétés qui correspondent aux actions de la barre d'outils. La valeur de chaque propriété sera utilisée comme attribut de titre sur l'icône. La plupart des navigateurs afficheront l'attribut de titre en tant qu'infiltre lorsque la souris plane sur l'icône.

 options . title = {
    'blockquote' : 'Blockquote'
    'createlink' : 'Hyperlink'
    'insertimage' : 'Image'
}

Si vous utilisez Bootstrap ou JQueryUi, vous pouvez standardiser le style d'info-bulle en ajoutant $('i.pen-icon').tooltip() à votre javascript.

2.6 Empêcher la redirection de page dangereuse

Par défaut, Pen empêchera la redirection de la page dangereuse lors de l'édition, pour l'arrêter, options.stay spécifiques, passez à false .

Remarque: si defaults.debug est défini sur true et default.stay defaults.stay == !defaults.debug

2.7 Désactiver et réactiver l'éditeur

Vous pouvez désactiver l'éditeur Pen par Call destroy() Méthode de l'objet var pen = new Pen(options) . comme:

 var pen = new Pen ( '#editor' ) ;

pen . destroy ( ) ; // return itself

Et, il existe une méthode correspondante appelée rebuild() pour réactiver l'éditeur:

 pen . rebuild ( ) ; // return itself 

2.8 Contenu d'exportation en tant que Markdown

C'est une fonctionnalité expérimentale

 var pen = new Pen ( '#editor' ) ;

pen . toMd ( ) ; // return a markdown string 

3. Prise en charge de la syntaxe de Markdown

3.1 Installer

Le convertisseur de syntaxe sera activé automatiquement en liant markdown.js après `Pen.js:

 < script src =" src/pen.js " > </ script >
< script src =" src/markdown.js " > </ script > 

3.2 Utilisation

Pour l'utiliser, vous pouvez taper space key action cmd à un démarrage de ligne. comme:

 ### This will create a h3 tag

Les CMD suivants sont autorisés:

• Headings: Type 1 ~ 6 # à la ligne Start
• Liste non ordonnée: Type - ou *
• Liste commandée: Type 1.
• Bloc de code: Tapez ``
• Citation de bloc: Type >
• Règle horizontale: plus de 3 - , * , . Créera un <hr /> , comme ......

4. Licence

Licencié sous MIT.

5. Confiance par *