medium editor
5.23.3
Se você estiver interessado em ajudar a manter um dos editores de texto Wysiwyg de maior sucesso no Github, informe -nos! (Veja a edição #1503)
Este é um clone da barra de ferramentas do editor em linha média.com.
O Mediumeditor foi escrito usando JavaScript de baunilha, não é necessário estruturas adicionais.
Demo : http://yabwe.github.io/medium-editor/
Via npm:
Execute em seu console: npm install medium-editor
Via Bower:
bower install medium-editor
Através de um CDN externo
Para a versão mais recente:
< script src =" //cdn.jsdelivr.net/npm/medium-editor@latest/dist/js/medium-editor.min.js " > </ script >
< link rel =" stylesheet " href =" //cdn.jsdelivr.net/npm/medium-editor@latest/dist/css/medium-editor.min.css " type =" text/css " media =" screen " charset =" utf-8 " >Para um personalizado:
< script src =" //cdn.jsdelivr.net/npm/[email protected]/dist/js/medium-editor.min.js " > </ script >
< link rel =" stylesheet " href =" //cdn.jsdelivr.net/npm/[email protected]/dist/css/medium-editor.min.css " type =" text/css " media =" screen " charset =" utf-8 " >Instalação manual:
Faça o download das últimas folhas de estilo de lançamento e anexe com o editor médio à sua página:
Encontre os arquivos para a ligação abaixo mencionada na pasta Dist. (./medium-editor/dist/...)
< link rel =" stylesheet " href =" css/medium-editor.css " > <!-- Core -->
< link rel =" stylesheet " href =" css/themes/default.css " > <!-- or any other theme -->O próximo passo é fazer referência ao script do editor
< script src =" js/medium-editor.js " > </ script >Agora você pode instanciar um novo objeto mediador:
< script > var editor = new MediumEditor ( '.editable' ) ; </ script >O código acima transformará todos os elementos com a classe editiva em conteúdo editável HTML5 e adicionará a barra de ferramentas do editor médio a eles.
Você também pode passar uma lista de elementos HTML:
var elements = document . querySelectorAll ( '.editable' ) ,
editor = new MediumEditor ( elements ) ; Mediumeditor também suporta textarea. Se você fornecer um elemento textarea, o script criará uma nova div com contentEditable=true , oculte a textareia e vincule o valor da textarea ao conteúdo DIV HTML.
As pessoas contribuíram com embalagens em torno do meioDitor para integrar com diferentes estruturas e pilhas de tecnologia. Dê uma olhada na lista de invólucros e integrações existentes que já foram escritos para o Mediumeditor!
Veja a documentação das opções médias sobre todas as várias opções para o Mediumeditor.
As opções para personalizar o editor médio são passadas como o segundo argumento para o construtor médio de medidas. Exemplo:
var editor = new MediumEditor ( '.editor' , {
// options go here
} ) ;'medium-editor-button-active'false | 'Fontawesome'. Padrão: false Usando 'fontawesome' como os ButtonLabels requer a versão 4.1.0 do CSS do Fontawesome para estar na página para garantir que todos os ícones sejam exibidos corretamente
0falsefalsefalsefalsedocument.body{}truefalseA barra de ferramentas para mediation é implementada como uma extensão interna que é exibida automaticamente sempre que o usuário selecionar algum texto. A barra de ferramentas pode conter qualquer conjunto de botões internos definidos, mas também pode conter os botões personalizados passados como extensões.
As opções para a barra de ferramentas são passadas como um objeto que é um membro do objeto de opções externas. Exemplo:
var editor = new MediumEditor ( '.editable' , {
toolbar : {
/* These are the default options for the toolbar,
if nothing is passed this is what is used */
allowMultiParagraphSelection : true ,
buttons : [ 'bold' , 'italic' , 'underline' , 'anchor' , 'h2' , 'h3' , 'quote' ] ,
diffLeft : 0 ,
diffTop : - 10 ,
firstButtonClass : 'medium-editor-button-first' ,
lastButtonClass : 'medium-editor-button-last' ,
relativeContainer : null ,
standardizeSelectionStart : false ,
static : false ,
/* options which only apply when static is true */
align : 'center' ,
sticky : false ,
updateOnEmptySelection : false
}
} ) ;true['bold', 'italic', 'underline', 'anchor', 'h2', 'h3', 'quote']0-10'medium-editor-button-first''medium-editor-button-last'relative a absolute . Padrão: nullfalsefalse static estiver sendo usada:left | center | right - quando a opção estática é true , isso alinha a barra de ferramentas estática em relação ao elemento de redemoinho médio. Padrão: centertrue , isso permite/desativa a barra de ferramentas "aderindo" na viewport e permanecendo visível na tela enquanto a página rola. Padrão: falsetrue , isso permite/desativa a atualização do estado dos botões da barra de ferramentas, mesmo quando a seleção é colapsada (não há seleção, apenas um cursor). Padrão: false Para desativar a barra de ferramentas (que também desativa a extensão da previsão de âncora), defina o valor da opção da toolbar como false :
var editor = new MediumEditor ( '.editable' , {
toolbar : false
} ) ; O comportamento do botão pode ser modificado passando um objeto na matriz de botões em vez de uma string. Isso permite substituir parte do comportamento padrão dos botões. As opções a seguir são algumas das partes básicas dos botões que você pode substituir, mas qualquer parte do MediumEditor.Extension.prototype pode ser substituída por essas opções de botão. (Confira o código -fonte dos botões para ver o que tudo pode ser substituído).
MediumEditor.execAction() quando o botão é clicado.<b> ou <strong> que indica que o texto já está em negrito. Portanto, a variedade de nomes de tags para negrito seria: ['b', 'strong']useQueryState estiver definido como true .'font-weight' definida como 700 ou 'bold' , isso indica que o texto já está em negrito. Portanto, o objeto de estilo para negrito seria { prop: 'font-weight', value: '700|bold' }useQueryState estiver definido como true .'|' )document.queryCommandState() Método para determinar se a ação já foi aplicada. Se a ação já tiver sido aplicada, o botão será exibido como 'ativo' na barra de ferramentasdocument.queryCommandState('bold') que retornará verdadeiro se o navegador achar que o texto já é ousado e falso caso contrárioinnerHTML padrão para colocar dentro do botãoinnerHTML a ser usado para o conteúdo do botão se a opção ButtonLabels para Mediumeditor estiver definida como 'fontawesome' Exemplo de botões de substituição (aqui, o objetivo é imitar o meio por ter botões H1 e H2 que realmente produzem tags <h2> e <h3> , respectivamente):
var editor = new MediumEditor ( '.editable' , {
toolbar : {
buttons : [
'bold' ,
'italic' ,
{
name : 'h1' ,
action : 'append-h2' ,
aria : 'header type 1' ,
tagNames : [ 'h2' ] ,
contentDefault : '<b>H1</b>' ,
classList : [ 'custom-class-h1' ] ,
attrs : {
'data-custom-attr' : 'attr-value-h1'
}
} ,
{
name : 'h2' ,
action : 'append-h3' ,
aria : 'header type 2' ,
tagNames : [ 'h3' ] ,
contentDefault : '<b>H2</b>' ,
classList : [ 'custom-class-h2' ] ,
attrs : {
'data-custom-attr' : 'attr-value-h2'
}
} ,
'justifyCenter' ,
'quote' ,
'anchor'
]
}
} ) ; A visualização âncora é uma extensão interna que exibe automaticamente uma 'dica de ferramenta' quando o usuário está pairando sobre um link no editor. A dica de ferramenta exibirá o href do link e, quando clicada, abrirá o formulário de edição de âncora na barra de ferramentas.
As opções para a visualização âncora 'ToolTip' são passadas como um objeto que é um membro do objeto de opções externas. Exemplo:
var editor = new MediumEditor ( '.editable' , {
anchorPreview : {
/* These are the default options for anchor preview,
if nothing is passed this is what it used */
hideDelay : 500 ,
previewValueSelector : 'a'
}
}
} ) ;500'a'falsetrue Para desativar a visualização da âncora, defina o valor da opção anchorPreview como false :
var editor = new MediumEditor ( '.editable' , {
anchorPreview : false
} ) ; toolbar: false ou atributo de data-disable-toolbar ), a previsão da âncora será desativada automaticamente.O manipulador de espaço reservado é uma extensão embutida que exibe texto de espaço reservado quando o editor está vazio.
As opções para o espaço reservado são aprovadas como um objeto que é um membro do objeto de opções externas. Exemplo:
var editor = new MediumEditor ( '.editable' , {
placeholder : {
/* This example includes the default options for placeholder,
if nothing is passed this is what it used */
text : 'Type your text' ,
hideOnClick : true
}
} ) ; Texto : define o espaço reservado padrão para o conteúdo vazio quando o espaço reservado não está definido como false. Você pode substituí-lo definindo um atributo data-placeholder para os elementos do editor. Padrão: 'Type your text'
HideOnClick : faz com que o espaço reservado desapareça assim que o campo ganha foco. Padrão: true . Para ocultar o espaço reservado somente após começar a digitar e mostrá -lo novamente assim que o campo estiver vazio, defina esta opção como false .
Para desativar o espaço reservado, defina o valor da opção placeholder como false :
var editor = new MediumEditor ( '.editable' , {
placeholder : false
} ) ;O formulário de âncora é uma extensão de botão embutida que permite ao usuário adicionar/editar/remover links do editor. Quando 'âncora' é passado como um botão na lista de botões, essa extensão será ativada e pode ser acionada clicando no botão correspondente na barra de ferramentas.
As opções para o formulário de âncora são passadas como um objeto que é um membro do objeto de opções externas. Exemplo:
var editor = new MediumEditor ( '.editable' , {
toolbar : {
buttons : [ 'bold' , 'italic' , 'underline' , 'anchor' ]
} ,
anchor : {
/* These are the default options for anchor form,
if nothing is passed this is what it used */
customClassOption : null ,
customClassOptionText : 'Button' ,
linkValidation : false ,
placeholderText : 'Paste or type a link' ,
targetCheckbox : false ,
targetCheckboxText : 'Open in new window'
}
}
} ) ;null'Button'encodeURI . Padrão: false'Paste or type a link'target do link criado. Padrão: false'Open in new window'O manipulador de pastas é uma extensão interna que tenta filtrar o conteúdo quando o usuário passa. Como os filtros de manipulador de pasta é configurável por meio de opções específicas.
As opções para o manuseio de pasta são passadas como um objeto que é um membro do objeto de opções externas. Exemplo:
var editor = new MediumEditor ( '.editable' , {
paste : {
/* This example includes the default options for paste,
if nothing is passed this is what it used */
forcePlainText : true ,
cleanPastedHTML : false ,
cleanReplacements : [ ] ,
cleanAttrs : [ 'class' , 'style' , 'dir' ] ,
cleanTags : [ 'meta' ] ,
unwrapTags : [ ]
}
} ) ;truefalsetrue ou ao chamar o método Helper cleanPaste(text) . Essas substituições são executadas antes de substituições incorporadas. Padrão: []true ou ao chamar o método Helper cleanPaste(text) . Essas substituições são executadas após substituições incorporadas. Padrão: []true ou ao chamar métodos cleanPaste(text) ou pasteHTML(html,options) . Padrão: ['class', 'style', 'dir']true ou ao chamar Métodos cleanPaste(text) ou pasteHTML(html,options) . Padrão: ['meta']true ou ao chamar métodos de cleanPaste(text) ou pasteHTML(html,options) . Padrão: []O manipulador de comandos do teclado é uma extensão interna para mapear as combinações de chaves para ações para executar no editor.
As opções para o KeyboardCommands são passadas como um objeto que é um membro do objeto de opções externas. Exemplo:
var editor = new MediumEditor ( '.editable' , {
keyboardCommands : {
/* This example includes the default options for keyboardCommands,
if nothing is passed this is what it used */
commands : [
{
command : 'bold' ,
key : 'B' ,
meta : true ,
shift : false ,
alt : false
} ,
{
command : 'italic' ,
key : 'I' ,
meta : true ,
shift : false ,
alt : false
} ,
{
command : 'underline' ,
key : 'U' ,
meta : true ,
shift : false ,
alt : false
}
] ,
}
} ) ;editor.execAction() quando a combinação de chaves é usadafalse , o atalho será desativado Para desativar os comandos do teclado, defina o valor da opção de keyboardCommands como false :
var editor = new MediumEditor ( '.editable' , {
keyboardCommands : false
} ) ;O manipulador de link automático é uma extensão interna que transforma automaticamente os URLs inseridos no campo de texto em tags de âncora HTML (semelhantes à funcionalidade do Markdown). Esse recurso está desativado por padrão.
Para ativar o suporte interno de ligação automática, defina o valor da opção autoLink como true :
var editor = new MediumEditor ( '.editable' , {
autoLink : true
} ) ;O manipulador de arrasto de imagem é uma extensão interna para manusear imagens de arrastar e soltar para o conteúdoedável. Esse recurso está ligado por padrão.
Para desativar o arrasto de imagem embutida, defina o valor da opção imageDragging como false :
var editor = new MediumEditor ( '.editable' , {
imageDragging : false
} ) ; Para parar de impedir eventos de arrasto e soltar e desativar o arrasto de arquivos em geral, forneça uma extensão de elaboração de imagens.
var editor = new MediumEditor ( '.editor' , {
extensions : {
'imageDragging' : { }
}
} ) ;Devido ao estado do código em 5.0.0, o editor sempre impedia qualquer ação de arrastar e soltar. Teremos uma maneira melhor de desativar o arrasto de arquivos 6.*
var editor = new MediumEditor ( '.editable' , {
delay : 1000 ,
targetBlank : true ,
toolbar : {
buttons : [ 'bold' , 'italic' , 'quote' ] ,
diffLeft : 25 ,
diffTop : 10 ,
} ,
anchor : {
placeholderText : 'Type a link' ,
customClassOption : 'btn' ,
customClassOptionText : 'Create Button'
} ,
paste : {
cleanPastedHTML : true ,
cleanAttrs : [ 'style' , 'dir' ] ,
cleanTags : [ 'label' , 'meta' ] ,
unwrapTags : [ 'sub' , 'sup' ]
} ,
anchorPreview : {
hideDelay : 300
} ,
placeholder : {
text : 'Click to edit'
}
} ) ; Por padrão, o MediumEDitor suporta botões para a maioria dos comandos para document.execCommand() que são bem apoiados em todos os seus navegadores suportados.
Mediumeditor, por padrão, mostrará apenas os botões listados aqui para evitar uma enorme barra de ferramentas:
Estes são todos os botões embutidos suportados pelo Mediumeditor.
Confira a página do Wiki para obter uma lista de temas disponíveis: https://github.com/yabwe/medium-editor/wiki/themes
Veja a documentação da API do objeto médio no wiki para obter detalhes sobre todos os métodos suportados no objeto médio.
on()importSelection()exportSelection() )saveSelection() foi chamadodocument.execCommand('createLink')document.execCommanddocument.queryCommandState(action) para verificar se uma ação específica já foi aplicada à seleção.delayinnerHTML aparado do elemento no indexinnerHTML como html do elemento no indexÉ possível adicionar dinamicamente novos elementos à sua instância existente do Mediumeditor:
var editor = new MediumEditor ( '.editable' ) ;
editor . subscribe ( 'editableInput' , this . _handleEditableInput . bind ( this ) ) ;
// imagine an ajax fetch/any other dynamic functionality which will add new '.editable' elements to the DOM
editor . addElements ( '.editable' ) ;
// OR editor.addElements(document.getElementsByClassName('editable'));
// OR editor.addElements(document.querySelectorAll('.editable')); Passar um elementos ou variedade de elementos para addElements(elements) será:
this.elements de elementos internos.<textarea> :<textarea><div contenteditable=true> e adicione -o à matriz de elementos. Em frente, basta ligar removeElements com o elemento ou a matriz de elementos que você deseja derrubar. Cada elemento em si permanecerá um conteúdo - ele apenas removerá todos os manipuladores de eventos e todas as referências a ele para que você possa removê -lo com segurança do DOM.
editor . removeElements ( document . querySelector ( '#myElement' ) ) ;
// OR editor.removeElements(document.getElementById('myElement'));
// OR editor.removeElements('#myElement');
// in case you have jQuery and don't exactly know when an element was removed, for example after routing state change
var removedElements = [ ] ;
editor . elements . forEach ( function ( element ) {
// check if the element is still available in current DOM
if ( ! $ ( element ) . parents ( 'body' ) . length ) {
removedElements . push ( element ) ;
}
} ) ;
editor . removeElements ( removedElements ) ; Para observar quaisquer alterações no conteúdo do evento, use o evento 'editableInput' personalizado exposto através do método subscribe() :
var editor = new MediumEditor ( '.editable' ) ;
editor . subscribe ( 'editableInput' , function ( event , editable ) {
// Do some work
} ) ; Este evento é suportado em todos os navegadores suportados pelo Mediumeditor (incluindo IE9+ e Edge)! Para ajudar nos casos em que uma instância do MediumEditor está monitorando vários elementos, o segundo argumento passou para o manipulador de eventos ( editable no exemplo acima) será uma referência ao elemento contentável que realmente mudou.
Isso é útil quando você precisa capturar quaisquer modificações no elemento contentável, incluindo:
Por que isso é interessante e por que você deve usar esse evento em vez de apenas anexar ao evento input no elemento contentável?
Portanto, para a maioria dos navegadores modernos (Chrome, Firefox, Safari, etc.), o evento input funciona muito bem. De fato, editableInput é apenas um proxy para o evento input nesses navegadores. No entanto, o evento input não é suportado para elementos contentáveis no IE 9-11 e é suportado principalmente no Microsoft Edge, mas não totalmente.
Portanto, para suportar adequadamente o evento editableInput no Internet Explorer e Microsoft Edge, o MediumEditor usa uma combinação dos eventos selectionchange e keypress , além de monitorar chamadas para document.execCommand .
Verifique a documentação para aprender a desenvolver extensões para o Mediumeditor.
Uma lista de extensões e plug -ins existentes, como imagens e mídias, tabelas e marcação pode ser encontrada aqui.
Para executar a demonstração localmente:
npm install do seu console na raiznode index.js da raizhttp://localhost:8088/demo/index.html para visualizar a demonstraçãoAs tarefas de desenvolvimento médio de medidas são gerenciadas pelo Grunt. Para instalar todos os pacotes necessários, basta invocar:
npm installPara executar todo o teste e construir os arquivos dist para testar em páginas de demonstração, basta invocar:
gruntEstas são as outras tarefas grunhidas disponíveis:
Os arquivos de origem estão localizados dentro do diretório SRC . Certifique -se de fazer alterações nesses arquivos e não arquivos no diretório Dist.
Mate alguns insetos :)
git checkout -b my-new-feature )git commit -am 'Added some feature' ) sem arquivos do diretório Dist .git push origin my-new-feature )Para ajudar a criar código de aparência consistente ao longo do projeto, usamos algumas ferramentas para nos ajudar. Eles têm plugins para os editores/IDEs mais populares para fazer codificação para o nosso projeto, mas você deve usá -los também em seu projeto!
Usamos o JSHINT em cada compilação para encontrar erros fáceis de capturar e problemas em potencial em nosso JS. Você pode encontrar nossas configurações de jshint no arquivo .jshintrc na raiz do projeto.
Usamos JSCs em cada compilação para aplicar algumas regras de estilo de código que temos para o nosso projeto. Você pode encontrar nossas configurações JSCs no arquivo .jscsrc na raiz do projeto.
Usamos o EditorConfig para manter estilos de codificação consistentes entre vários editores e IDEs. Você pode encontrar nossas configurações no arquivo .editorconfig na raiz do projeto.
Procurando algo simples para uma primeira contribuição? Tente consertar um primeiro bug fácil!
https://github.com/yabwe/medium-editor/graphs/contributores
Adicione sua organização aqui e podemos adicioná -lo à nossa página de destino!
MIT: https://github.com/yabwe/medium-editor/blob/master/license
