barra de ferramentas de formatação

Personalização Plugin
148

Acho que não seria capaz de fazer algo assim. Quando criei o plugin, não estávamos no FontAwesome5 e não encontrei um ícone legal para o recuo à direita. Se você tiver um

Mas, se quiser alterar o botão padrão, você tem duas soluções:

Esconda o botão de flutuação à esquerda com este CSS:

/* BOTÃO DE FLUTUAÇÃO À ESQUERDA */
.d-editor-button-bar .floatl_ui_button {
    display: none;
}

E importe um componente de tema que adicionará um botão floatr.

O que você pode fazer é baixar discourse-floatr.zip (1,2 KB).

É um componente de tema que acabei de criar no Discourse Theme para adicionar um botão floatr com o mesmo ícone que o antigo floatl.

https://theme-creator.discourse.org/theme/Steven/floatr

1 curtida
149

Steven! Você é um gênio! Muito obrigado pelo trabalho extra nisso :folded_hands:

Eu optei pela opção 2 porque não faço a menor ideia de como fazer um fork e modificar um plugin!

Tudo funcionou perfeitamente e agora aquele botão faz exatamente o que queremos!

1 curtida
150

Mais uma pergunta aqui… existe uma maneira fácil de mover botões específicos da barra principal e escondê-los no menu do ícone de engrenagem?

Por exemplo,

image
image956×417 105 KB

Adoro todas essas ferramentas deste plugin, mas acho que a maioria dos nossos usuários provavelmente não aproveitará as opções de formatação rica, então gostaria de simplificar para eles. Não me importo em ter um clique extra ao escrever posts, se isso resultar em uma experiência mais limpa e simples para nossos usuários.

151

De jeito simples, não. Seria necessária alguma modificação, como a do botão floatr.

Ou fazendo um fork e editando o plugin, ou ocultando-os e recriando-os na opção de menu de contexto da barra de ferramentas.

Você pode usar meu componente de tema como exemplo de como adicionar algumas opções nesse menu. Ou eu poderia editar o componente floatr que criei para adicionar esse botão nas opções do menu de contexto, e você pode terminar o trabalho facilmente depois disso.

https://github.com/iunctis/md-composer-extras

152

Primeiramente, OBRIGADO novamente pela ajuste no botão floatr. Já o usei meia dúzia de vezes e adoro não precisar alternar entre floatl e floatr! Muito obrigado!!!

Em algum momento, gostaria de aprender mais e saber como editar e criar plugins. Adoraria retribuir e contribuir com os grandes desenvolvimentos de pessoas como você, nesta comunidade.

Seria ótimo se você pudesse adicionar esses botões extras ao ícone de engrenagem do “menu pop-up”, para que haja menos opções visíveis para usuários comuns. Sou proficiente em CSS e em inspecionar elementos do navegador para descobrir quais classes/IDs quero modificar. Seria possível fazer o mesmo com o seu “componente”, para que eu pudesse examinar a sintaxe do código e decidir facilmente quais botões incluir no menu e/ou remover do menu e recolocar na barra? Ou é um pouco mais complexo que isso?

153

É mais complexo porque não usa o mesmo JavaScript.

Criei um exemplo rápido: se você quiser um botão de tachado no editor, precisa usar este JavaScript

api.onToolbarCreate(toolbar => {
    toolbar.addButton({
        id: "strike_button",
        group: "fontStyles",
        icon: "strikethrough",
	perform: e => e.applySurround('<s>', '</s>', 'strike_text')
    });
});

Mas para as opções do menu da barra de ferramentas, é totalmente diferente

api.addToolbarPopupMenuOptionsCallback(() => {
  return {
    action: "strike",
    icon: "strikethrough",
    label: "strike_button"
  };
});

api.modifyClass("controller:composer", {
  actions: {
    strike() {
      this.get("toolbarEvent").applySurround("<s>", "</s>", "strike_prompt");
    },
  }
});

Não adicionei as traduções necessárias para as opções da barra de ferramentas, etc. Mas você entendeu a ideia.

Não tenho o conhecimento para adicionar uma escolha entre a barra de ferramentas e as opções do menu, nem para adaptar o JavaScript. Minha tentativa de adicionar uma opção para ativar/desativar alguns botões funcionou por um tempo, mas quebrou recentemente e não sei exatamente como corrigir. Então, tive que fazer uma escolha para a maioria dos usuários.

De qualquer forma, se você quiser manter o BBCode, mas transferir os botões para as opções do menu, acho que a melhor maneira é manter o plugin, ocultar os botões via CSS e usar um componente de tema para adicionar o botão nas opções do menu. É totalmente viável, já que basicamente fizemos algo semelhante para o botão flutuante. Requer algum tempo, mas se você estiver perdido nesse assunto, posso te ajudar.

Para componentes de tema, o ideal é usar o Discourse Theme. Você pode adicionar configurações ao seu componente, traduções e o código, além de pré-visualizá-lo. É uma ferramenta realmente boa para criadores.

2 curtidas
154

Você é incrível, @Steven! Obrigado por essa resposta completa. Acredito que vou ver como a comunidade lida com todas as opções e, se eu perceber que está causando confusão, seguirei sua segunda abordagem aqui com os componentes do tema. Essa abordagem parece muito clara para mim.

Obrigado novamente pela sua ajuda e por apoiar esse plugin fantástico. Aliás… não consigo agradecer o suficiente por me ajudar a mudar o botão flutuante padrão para “direita”. Foi incrível!

155

Pergunta rápida: O que precisamos alterar neste código api.onToolbarCreate do nosso tema para uma ação de botão diferente no editor?

Basicamente, queremos adicionar um novo botão no editor que envolva um bloco de código multilinha com este formato de Markdown:

```text

```

api.onToolbarCreate(toolbar => {
    toolbar.addButton({
        id: "code_button",
        group: "fontStyles",
        icon: "code",
        perform: e => e.applySurround('\n```text\n', '\n```\n', 'code_text')
    });
});

Para que o resultado envolva um bloco de código multilinha, em vez de aplicar nossa nova ação em cada linha?

Antes da ação do botão:

Screen Shot 2020-04-08 at 7.02.47 PM
Screen Shot 2020-04-08 at 7.02.47 PM860×209 11.8 KB

Depois da ação do botão:

Screen Shot 2020-04-08 at 7.02.53 PM
Screen Shot 2020-04-08 at 7.02.53 PM2048×858 130 KB

Suponho que exista um método diferente de e.applySurround que atue sobre um bloco de texto multilinha? Mas pesquisar no site e no Google não trouxe resultados, então, após 30 minutos de busca, decidi postar uma pergunta.

Também pesquisei em https://docs.discourse.org/ com várias palavras-chave e não tive sorte.

Obrigado,

156

Encontrei o método/parâmetro multiline: false com mais pesquisa no Google…

perform: e => e.applySurround('\n```text\n', '\n```\n', 'code_text', { multiline: false } )

});
api.onToolbarCreate(toolbar => {
    toolbar.addButton({
        id: "code_button",
        group: "fontStyles",
        icon: "code",
        perform: e => e.applySurround('\n```text\n', '\n```\n', 'code_text', { multiline: false } )
    });
});

Então, estou pronto. Obrigado.

157

Corrija-me se eu estiver errado, mas o bbcode oficial do Discourse já vem incluso na versão mais recente do Discourse. Se eu instalar este plugin, haverá conflito? A principal razão pela qual quero essa barra de ferramentas de formatação é ter a opção de alterar a cor do texto por meio de um botão.

158

Não há conflito algum.

159

O plugin BBCode do Discourse ainda parece ser um plugin externo, não incluído no núcleo.

Você tem duas opções:

  • Este plugin, que adiciona os bbcodes ao motor + alguns botões na barra de ferramentas
  • O plugin BBCode oficial + Extras do Composer (um componente de tema opcional que adiciona alguns botões na barra de ferramentas).

A segunda opção é a melhor se você preferir usar o plugin oficial; o componente de tema pode ser facilmente desativado caso precise de atualizações.

A barra de ferramentas de formatação não deve ser quebrada nem criar conflitos com o núcleo do Discourse.

1 curtida
160

Eu estava usando o componente de tema md composer com o plugin bbcode oficial antes. No entanto, não há um botão para alterar a cor do texto, que este plugin possui. Idealmente, seria bom ter um seletor de cores, mas não acho que seja possível.

161

Ah, entendi. O componente só usa elementos disponíveis no núcleo, e o bbcode de cor precisa de um plugin, como você sabe. Não é tão difícil editar um botão no componente (ou fazer um fork no GitHub), mas, no seu caso, você tem razão: este plugin é a melhor escolha.

Você pode instalar este plugin, mas recomendo que desinstale o plugin bbcode oficial ao mesmo tempo para evitar qualquer conflito no mecanismo de markdown.

Quanto ao seletor de cores, honestamente, não sou um bom programador. Apenas usei algumas ferramentas disponíveis para compartilhar com a comunidade. Aceitarei com prazer um pull request para melhorar este plugin.

1 curtida
162

Provavelmente estarei aprendendo a adicionar botões ao compositor, já que vou criar meu próprio plugin. No entanto, não tenho certeza se sou a pessoa certa para enviar um pull request para adicionar um seletor de cores, pois estou aprendendo o Discourse há pouco tempo.

E sim, desinstalei o plugin bbcode oficial. Também existe o Awesome BBCode, que possui autocompletar. No entanto, devido ao botão de cor, acho que essa opção é melhor para usuários comuns que são novos no Discourse e não estão familiarizados com bbcode.

163

image

Notei que este plugin inclui outro botão “inserir imagem”. Isso é realmente necessário, já que o original permite anexos ou um link de URL? Gosto dos botões de formatação, de resto. Só estou perguntando porque parece estranho ter dois ícones de imagem no editor. Se não puder ser removido, terei que voltar a usar o editor md + bbcode oficial.

1 curtida
164

Você pode facilmente usar CSS para ocultar qualquer botão ou item que deseje esconder na barra de ferramentas do editor.

Ou, outra alternativa:

Você pode facilmente modificar o plugin para remover qualquer botão que não deseje exibir na barra de ferramentas do editor.

165

Foi adicionado principalmente para uso com o botão flutuante ou o alinhamento dos fóruns, que dependem muito de links externos. Se você usa principalmente imagens carregadas internamente, pode ocultá-lo.

166

Se eu comentar as linhas, isso será suficiente para remover esse botão?

https://github.com/iunctis/discourse-formatting-toolbar/blob/master/assets/javascripts/discourse/initializers/formattingtlb-ui.js.es6#L18L25

167

É melhor adicionar algum CSS no seu tema

/* BOTÃO DE IMAGEM */
.d-editor-button-bar .addimg_ui_button {
    display: none;
}
1 curtida