pen Download - pen herunterladen

pen

Andere Ressourcen

Last Release for ES5

Herunterladen

Stiftredakteur

Live -Demo: http://sofish.github.io/pen
Markdown wird unterstützt
Status erstellen:

0. Quellcode

Sie können den Quellcode von GitHub oder mit Bower klonen.

 bower install pen

1. Installation

1.1 Init mit ID -Attribut

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

1.2 init mit einem Element

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

1.3 Init mit Optionen

 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. Konfigurieren

Das folgende Objekt legt die Standardeinstellungen von PEN fest:

 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
}

Wenn Sie die Symbolleiste an Ihr eigenes Projekt anpassen möchten, können Sie Pen mit einem options wie #1.3: init mit Optionen einrichten:

2.1 Fallback für den alten Browser

Sie können defaults.textarea #editor innerHTML Stück HTML -Zeichenfolge einstellen <textarea name="content"></textarea>

2.2 Ändern Sie die Redakteurklasse

Pen pen standardmäßig src/pen.css Ihrem Editor .pen

2.3 Aktivieren Sie den Debug -Modus

Wenn options.debug auf true eingestellt ist, gibt Pen Protokolle für die Konsole Ihres Browsers aus.

2.4 Passen Sie die Symbolleiste an

Sie können options.list in ein Array festlegen und die folgenden Zeichenfolgen hinzufügen, um Ihre eigenen zu erstellen:

blockquote , h2 , h3 , p , pre : Erstellen Sie ein Tag als wörtliche Bedeutung
insertorderedlist : Erstellen Sie eine ol>li -Liste
insertunorderedlist : Erstellen Sie eine ul>li -Liste
indent : Einzugsliste / Blockquote -Block
outdent : Outdent -Liste / Blockquote -Block
bold : Wickeln Sie die Textauswahl in ein b -Tag ein
italic : Wickeln Sie die Textauswahl in ein i -Tag ein
underline : Wickeln Sie die Textauswahl in ein u -Tag ein
createlink : Link zur Textauswahl einfügen
inserthorizontalrule : Einfügen ein hr -Tag ein
insertimage : Einfügen ein Bild ( img ) einfügen

2.5 Fügen Sie den Symbolleistensymbolen Tooltips hinzu

Sie können options.titles an ein Objekt mit Eigenschaften festlegen, die den Symbolleistenaktionen entsprechen. Der Wert jeder Eigenschaft wird als Titelattribut auf dem Symbol verwendet. Die meisten Browser zeigen das Titelattribut als Tooltip an, wenn die Maus über das Symbol schwebt.

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

Wenn Sie Bootstrap oder JQueryui verwenden, können Sie den Tooltip-Stil durch Hinzufügen von $('i.pen-icon').tooltip()

2.6 Verhindern Sie die unsichere Seite Weiterleiten

Standardmäßig verhindert der Pen bei der Bearbeitung eine unsichere Seite umgeleitet, um sie false schließen, bestimmte options.stay .

HINWEIS: Wenn defaults.debug auf true und default.stay festgelegt wird defaults.stay == !defaults.debug

2.7 Redakteur deaktivieren und wiedererpflichtig

Sie können den Pen -Editor per Call destroy() des var pen = new Pen(options) -Objekts deaktivieren. wie:

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

pen . destroy ( ) ; // return itself

Und es gibt eine entsprechende Methode namens rebuild() um den Herausgeber erneut zu vermitteln:

 pen . rebuild ( ) ; // return itself

2.8 Inhalt als Markdown exportieren

Es ist ein experimentelles Merkmal

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

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

3. Support für Markdown -Syntax

3.1 Installieren

Der Syntax -Konvertor wird automatisch aktiviert, indem markdown.js nach `pen.js verlinkt:

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

3.2 Nutzung

Um dies zu verwenden, können Sie action cmd + space key bei einem Zeilenstart eingeben. wie:

 ### This will create a h3 tag

Die folgenden CMDs sind zulässig:

Überschriften: Typ 1 ~ 6 # am Start der Linie
Nicht ordnungsgemäße Liste: Typ - oder *
Bestellte Liste: Typ 1.
Codeblock: Geben Sie `` `ein
Block -Zitat: Typ >
Horizontale Regel: Mehr als 3 - , * , . Erstellt ein <hr /> wie ......