TinyEditor, o editor html wysiwyg simples e fácil de usar

Alguns dias atrás, apresentei um editor doméstico do XHTML para você. Hoje eu quero recomendar Tinyeditor para você. É um editor HTML Wysiwyg simples e fácil de usar que acaba de ser lançado pelo Leigeber.com, um conhecido blog de web design estrangeiro.

• Está escrito em JavaScript e não depende de outras bibliotecas
• Este é um editor leve, e os arquivos a serem chamados são apenas 8kb
• Ele pode lidar com a maioria dos requisitos de formatação HTML, e as funções internas tornam as tags geradas o mais simples possível
• O pequeno ícone usado no editor usa a tecnologia CSS Sprite, reduzindo as conexões HTTP
• Passe de teste em navegadores convencionais
• Pode ser usado em projetos pessoais ou comerciais, após a licença do Creative Commons

1. Referenciar os arquivos JS e CSS fornecidos pelo TinyEditor em arquivos de página da web
2. Adicionar as tags exigidas pelo editor ao arquivo da página da web é na verdade uma textarea, como segue

    <textarea id = estilo de entrada = largura: 400px; Altura: 200px> </sexttarea>

   Observe que o comprimento e a largura definidos no Textarea são do tamanho do editor.

3. Inicialize o editor por meio de scripts e configure vários parâmetros da seguinte forma:

    new TINY.editor.edit('editor',{id:'input', // (must) the idwidth:584 of the textarea defined in the second step above, // (optional) Editor width height:175, // (optional) Editor height cssclass:'te', // (optional) Editor class, used to control style controlclass:'tecontrol', // (optional) Button ClassRowclass: 'teheader', // (opcional) Button Button Line ClassDividerClass: 'Tedivider', // (opcional) Button Style Controls: ['Bold', 'itálico', 'sublinhado', 'striquedList', 'subscript', 'subld', 'subld' | 'Indent', '|' ',' leftalign ',' CentenIng ',' Rightalign ',' Blockjustify ',' | ',' Unfformat ',' | // (requerido) Adicionar controles de botão ao editor, conforme necessário, onde '| xhtml: true, // (opcional) O editor gera etiqueta xhtml ou html cssfile: 'style.css', // (opcional) arquivo css externo a ser anexado ao editor / css: 'conteúdo', // (opcional) definido no conteúdo inicial da área de edição, css: '{' {'{// (opcional) define o conteúdo inicial da área de edição, css:' {'{' {'{// (opcional) definir o conteúdo inicial da área de edição, CSS:' {'{' {'{// (opcional) definir o conteúdo inicial da área de edição, css:' {'{' {// (// (opcional). Área de edição Bomenid BodyId: 'Editor', // (Opcional) Defina a área de edição IdFoeterclass: 'tefooter', // (opcional) Defina o classtoggle inferior do editor: {text: 'código -fonte', ActiveText: 'Visualization', CSSClass: 'Toggle'}, // (opcional), defina o código -fonte do código -fonte ', alternando o código -fonte'}, // (opcional). ClassResize: {csSclass: 'redimensiona'} // (opcional) Defina a classe de botão de ajuste do tamanho do editor});

   Pode -se dizer que é altamente configurável e os itens de configuração são relativamente claros.

Na aplicação real do TinyEditor, deve -se notar que, antes de enviar o conteúdo do editor, a função instance.post () deve ser chamada para garantir que o conteúdo visual mais recente na área de edição seja convertido em texto de tag.

Exemplo de Exemplo: http://sandbox.leigeber.com/tinyeeditor/