pen

Editor de caneta

• Demoção ao vivo: http://sofish.github.io/pen
• Markdown é suportado
• Status de construção:

---

---

0. Código -fonte

Você pode clonar o código -fonte do GitHub ou usar o Bower.

 bower install pen

1. Instalação

1.1 Init com atributo de identificação

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

1.2 Init com um elemento

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

1.3 Init com opções

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

O seguinte objeto configura as configurações padrão da caneta:

 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
}

Se você deseja personalizar a barra de ferramentas para se ajustar ao seu próprio projeto, você pode inserir o construtor Pen com um objeto options como #1.3: init com opções:

2.1 Fallback para o antigo navegador

Você pode definir defaults.textarea como uma parte da string html, por padrão, é <textarea name="content"></textarea> 。Este será definido como innerHTML do seu #editor .

2.2 Alterar a classe do editor

A caneta adicionará .pen ao seu editor por padrão, se você quiser alterar a classe, substitua a pen de nome da classe por sua própria no src/pen.css .

2.3 Ativar modo de depuração

Se options.debug estiver definido como true , a caneta produzirá logs no console do seu navegador.

2.4 Personalize a barra de ferramentas

Você pode definir options.list como uma Array , adicione as seguintes strings para criar o seu próprio:

• blockquote , h2 , h3 , p , pre : Crie uma tag como seu significado literal
• insertorderedlist : Crie uma lista ol>li
• insertunorderedlist : Crie uma lista de ul>li
• indent : Lista de Recadas / Blockquote Block
• outdent : Lista de Outsalhe / Blockquote Block
• bold : enrole a seleção de texto em uma b
• italic : enrole a seleção de texto em uma tag i
• underline : enrole a seleção de texto em uma tag u
• createlink : Insira o link para a seleção de texto
• inserthorizontalrule : Insira uma tag de hr
• insertimage : Insira uma tag de imagem ( img )

2.5 Adicione dicas de ferramentas aos ícones da barra de ferramentas

Você pode definir options.titles como um objeto com propriedades que correspondem às ações da barra de ferramentas. O valor de cada propriedade será usado como o atributo de título no ícone. A maioria dos navegadores exibirá o atributo de título como uma dica de ferramenta quando o mouse pairará sobre o ícone.

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

Se você estiver usando o Bootstrap ou Jqueryui, poderá padronizar o estilo da dica de ferramenta adicionando $('i.pen-icon').tooltip() ao seu JavaScript.

2.6 Evite o redirecionamento da página insegura

Por padrão, a PEN impedirá o redirecionamento da página insegura ao editar, para false -la, options.stay específicas.

NOTA: Se defaults.debug estiver definido como true e default.stay não estiver definido: defaults.stay == !defaults.debug .

2.7 Desativar e reativar editor

Você pode desativar o editor de caneta por Call destroy() do objeto var pen = new Pen(options) . como:

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

pen . destroy ( ) ; // return itself

E existe um método correspondente chamado rebuild() para reativar o editor:

 pen . rebuild ( ) ; // return itself 

2.8 Exportar o conteúdo como Marydown

É um recurso experimental

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

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

3. Suporte de sintaxe de marcação

3.1 Instale

O conversor de sintaxe será ativado automaticamente, vinculando markdown.js após `Pen.js:

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

3.2 Uso

Para usá -lo, você pode digitar action cmd + space key em um início de linha. como:

 ### This will create a h3 tag

Os seguintes CMDs são permitidos:

• Chefe: tipo 1 ~ 6 # no início da linha
• Lista não ordenada: Tipo - ou *
• Lista ordenada: Tipo 1.
• Bloco de código: digite `` `
• Citação de bloco: tipo >
• Regra horizontal: mais de 3 - , * , . criará um <hr /> , como ......

4. Licença

Licenciado sob o MIT.

5. Confiável por *