pen

Editor de bolígrafo

• Demo en vivo: http://sofish.github.io/pen
• Markdown es compatible
• Estado de construcción:

---

---

0. Código fuente

Puede clonar el código fuente de GitHub o usar Bower.

 bower install pen

1. Instalación

1.1 init con atributo de identificación

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

1.2 init con un elemento

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

1.3 init con opciones

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

El siguiente objeto establece la configuración predeterminada de la pluma:

 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 desea personalizar la barra de herramientas para que se ajuste a su propio proyecto, puede instanciar el constructor Pen con un objeto options como #1.3: Init con opciones:

2.1 Fuera para el navegador antiguo

Puede establecer defaults.textarea en una pieza de cadena HTML, de forma predeterminada, es <textarea name="content"></textarea> 。 Esto se establecerá como innerHTML de su #editor .

2.2 Cambiar la clase del editor

Pen agregará .pen a su editor de forma predeterminada, si desea cambiar la clase, asegúrese de reemplazar la pen de nombre de clase a la suya en src/pen.css .

2.3 Habilitar el modo de depuración

Si options.debug se establece en true , PEN emitirá registros a la consola de su navegador.

2.4 Personalizar la barra de herramientas

Puede establecer options.list a una Array , agregue las siguientes cadenas para hacer las suyas:

• blockquote , h2 , h3 , p , pre : crear una etiqueta como significado literal
• insertorderedlist : cree una lista ol>li
• insertunorderedlist : cree una lista ul>li
• indent : lista de sangría / bloque de bloques
• outdent : Lista de aire libre / Blockquote Block
• bold : envuelva la selección de texto en una etiqueta b
• italic : envuelva la selección de texto en una etiqueta i
• underline : envuelva la selección de texto en una etiqueta u
• createlink : inserte el enlace a la selección de texto
• inserthorizontalrule : inserte una etiqueta hr
• insertimage : inserte una etiqueta de imagen ( img )

2.5 Agregar información sobre herramientas a los iconos de la barra de herramientas

Puede establecer options.titles en un objeto con propiedades que coinciden con las acciones de la barra de herramientas. El valor de cada propiedad se utilizará como atributo de título en el icono. La mayoría de los navegadores mostrarán el atributo de título como una información sobre herramientas cuando el mouse se cierne sobre el icono.

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

Si está utilizando Bootstrap o jQueryui, puede estandarizar el estilo de información sobre herramientas agregando $('i.pen-icon').tooltip() a su JavaScript.

2.6 Evitar la redirección de la página insegura

De false predeterminada, PEN evitará que la redirección de página insegura al editarlo, apague, options.stay específicas.

Nota: Si defaults.debug se establece en true y default.stay no está configurado: defaults.stay == !defaults.debug .

2.7 Desactivar y volver a habilitar Editor

Puede deshabilitar el método del editor de lápiz por Call destroy() del objeto var pen = new Pen(options) . como:

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

pen . destroy ( ) ; // return itself

Y, hay un método correspondiente llamado rebuild() para volver a habilitar el editor:

 pen . rebuild ( ) ; // return itself 

2.8 Contenido de exportación como Markdown

Es una característica experimental

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

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

3. Soporte de sintaxis de Markdown

3.1 Instalar

El convertidor de sintaxis se habilitará automáticamente vinculando markdown.js después de `pen.js:

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

3.2 Uso

Para usarlo, puede escribir la tecla action cmd + space key en un inicio de línea. como:

 ### This will create a h3 tag

Se permiten los siguientes CMD:

• Encabezados: tipo 1 ~ 6 # en la línea Start
• Lista desordenada: Tipo - o *
• Lista ordenada: Tipo 1.
• Bloque de código: escriba `` `` ``
• Cita de bloque: Tipo >
• Regla horizontal: más de 3 - , * , . creará un <hr /> , como ......

4. Licencia

Licenciado bajo MIT.

5. Confiado en *