Como fazer um editor visual no modx. Complementos (plugins, pacotes) para MODX Revolution. Somos amigos do CKEditor e do gerenciador de arquivos KCFinder

Hoje no canal de telegrama MODX eles escreveram que o TinyMCE Rich Text Editor não faz isso e não faz aquilo. Algumas pessoas não conseguiram configurá-lo, para outras produziu erros, etc. A questão de escolher um editor surgiu para mim assim que mudei para o MODX (o que, lembro, aconteceu há não muito tempo, cerca de 8 meses). A tarefa era apenas uma: criar um editor de conteúdo simples, conveniente e multifuncional. Brinquei com o TinyMCE normal, brinquei com o ckeditor, brinquei com o TinyMCE Rich Text Editor e decidi escolher o último.

Não quero começar um holivar sobre qual editor é melhor. estou compartilhando solução pronta editor funcional e multifuncional. E qual escolher, é claro, depende de você.

História

A configuração não demorou muito, a personalização do editor e a incorporação demoraram muito mais tempo; funções necessárias. Mas, felizmente, ainda sei pesquisar um pouco no Google e encontrei vários tópicos úteis entre os recursos em inglês, com a ajuda dos quais consegui implementar o editor que eventualmente obteremos.

A montagem ocorreu sem erros.

Instalação

1) Você pode baixar o instalador automático do meu repositório Git recém-criado.

2) O processo de instalação é muito simples - coloque o arquivo tinymcerte-1.0.0-beta.transport.zip em ../core/packages/ e procure o pacote localmente por meio do instalador. Em seguida, basta instalá-lo. O instalador automático definirá as configurações sozinho.

3) Na pasta /files/TinyMCERTE-settings/ você pode encontrar um pequeno readme.txt e o plugin typograf, que deve ser colocado na pasta de plugins do editor (leia sobre isso em readme.txt). Isso é tudo - o editor está pronto para uso.

Advertências e revisões

1) Testei este instalador automático em um site limpo e em um site sem editor instalado. Não sei como e o que acontecerá se você instalar em um site que já possui editor (Ace não conta).

2) Seria bom colocar automaticamente a pasta typograf em seção obrigatória, mas meu conhecimento não é suficiente para implementar essa ideia. Se alguém quiser ajudar, seria legal. Postarei as fontes deste instalador automático no mesmo repositório hoje, mas mais tarde à noite.

4) Para verificar a ortografia, o editor utiliza o serviço yandex.speller. Você pode encontrar as configurações do serviço no arquivo ../assets/components/tinymcerte/tinymcerte/js/external-config.json. O corretor ortográfico TinyMCE oferece suporte a um grande número de idiomas para verificação. Considerando que yandex.speller tem apenas 3 (russo, ucraniano, inglês).

Um dos complementos mais populares para Revolução MODX - editor visual TinyMCE.

Isso é compreensível; é raro um site funcionar sem um bom editor de richtext para conteúdo.

Este artigo aborda a instalação e configuração Editor TinyMCE.

Instalação

Para instalar, você precisa baixar o pacote do repositório (http://modx.com/extras/package/TinyMCE) e instalá-lo através da seção “Gerenciar Pacotes” do seu site.

Depois de instalar o pacote, você pode abrir imediatamente qualquer recurso para edição e certificar-se de que o editor apareça.

Você pode começar a escrever texto nele imediatamente, mas para um uso mais confortável, recomendamos configurar o editor.

A configuração do TinyMCE envolverá várias etapas:

• Conectando o arquivo de estilos
• Adicionando botões para trabalhar com tabelas

Conectando o arquivo de estilo ao TinyMCE

Isso é necessário para que no editor visual o texto fique exatamente igual ao do site: fonte, tamanho e cor do texto, desenho das imagens e aparência tabelas.

Abra “Configurações do sistema” e no filtro selecione “Editor Visual”:

Há um total de 5 configurações disponíveis nesta seção:

• Caminho para o arquivo CSS (editor_css_path)- especifique o caminho para o seu arquivo com estilos de texto. Observe que você não deve usar o arquivo CSS completo do seu site, mas arquivo separado, que contém apenas estilos diretamente relacionados ao design do texto (títulos h1-h6, parágrafos p, links a, tabelas tabelas e outros). O editor funcionará de forma mais rápida e correta.
• Use um editor de texto (use_editor)- você pode desativar o editor por um tempo, se necessário, sem excluir o TinyMCE.
• Editor (qual_editor)- MODX Revolution permite instalar vários editores diferentes em seu site, podendo alternar entre eles se necessário. A propósito, você pode substituir essa configuração para administradores de site, atribuindo assim editores diferentes a administradores diferentes.
• Editor para elementos (qual_element_editor)- especifique um editor para snippets, plugins, pedaços. Por exemplo, poderia ser CodeMirror ou Ace.

Adicionando botões ao TinyMCE para trabalhar com tabelas

No TinyMCE, que é instalado a partir do repositório MODX Revolution, por algum motivo o trabalho com tabelas está desabilitado por padrão. Não, claro que você pode mudar para o modo HTML e escrever o código manualmente, mas por quê! É muito mais fácil gastar 2 minutos e habilitar o suporte de mesa.

Então, abra as configurações do sistema, e no primeiro filtro selecione minúsculo:

Uma lista de opções disponíveis será aberta. Estamos interessados ​​em 2:

• tiny.custom_plugins- lista de plugins conectados ao TinyMCS. Você deve adicionar " mesa", conectando assim um plugin para trabalhar com tabelas. O plugin vem com o TinyMCE e não precisa ser instalado, basta habilitá-lo.
• minúsculo.custom_buttons3- lista de botões exibidos na 3ª linha. Indique aí " controles de mesa", adicionando assim um conjunto de botões para trabalhar com tabelas. É claro que esses botões podem ser colocados em qualquer outra linha. Se você olhar as outras linhas, verá uma lista de botões predefinidos como desfazer, refazer, selecionar tudo e muitos outros. Você pode “brincar” com eles colocando os botões em ordens diferentes.

Sugiro experimentar o CKEditor como um editor de código visual. A versão 4.0 tem um tema neutro em preto e branco (muito adequado para Administradores MODx) e algumas novidades (apreciei a inserção de parágrafos em locais de “difícil acesso”).

Não pode ser usado como editor front-end.
Ctrl+S funciona, além de inserir links ou incorporar recursos (iframe) e arquivos (img, áudio, vídeo). Você só precisa selecionar o texto e soltar o recurso/arquivo necessário no editor.

Nas configurações você pode alterar a cor da interface do usuário, a aparência, adicionar seus próprios plug-ins e alterar a ordem e o conjunto de botões do painel.

Indique as funções que faltam - tentarei implementá-las.

Instalação via gerenciador de pacotes.
Ao contrário do TinyMCE, é totalmente compatível com

Plano de ação:

Adicionar suporte para parâmetros de TV richtext
- Botão Selecionar no servidor em caixas de diálogo(integração com navegador de arquivos MODX)
- Configurações: extraPlugins, disableObjectResizing, controle de formato de link, seleção de skin
- Menu ao arrastar arquivos e recursos: Incorporar objeto | Inserir link | Insira o nome do objeto (seria legal se arrastar funcionasse tanto pela direita quanto pela botão esquerdo mouse (como no Windows))
- Proteção de etiqueta Modx
- Novos botões (inserir tags, editar atributos, etc.)
- Lista de classes da folha de estilo vaporizada.
- Escolher configurações do sistema do contexto editado (atualmente problemas com links)
- Atalhos de teclado personalizáveis.
- Plugin de tipografia - corrige automaticamente aspas, hifens, etc.
- Carregamento transparente de imagens via copiar/colar e arrastar e soltar
- Substituição automática (análise e saída) de tags modx, se possível e na medida do possível (o suporte ao widget que está sendo desenvolvido pela equipe CKSource pode ser útil)
- Edição inline desde o front-end.

É uma lista bem grande. Deveríamos moderar nossas fantasias...

Instruções para instalar plug-ins adicionais:
Encontramos o plugin necessário, por exemplo, coloque-o na pasta /manager/assets/components/ckeditor/ckeditor/plugins/, Vá para as configurações do sistema, selecione namespace editor, registre nosso plugin em plug-ins_extras(separados por vírgulas, se houver vários) e edite barra de ferramentas, inserindo um novo botão (se houver). Atualizamos o formulário de edição de recursos e verificamos o resultado. Sugiro compartilhar plugins interessantes.

Plug-ins adicionais (não incluídos no pacote):
oEmbed - Permite incorporar conteúdo (vídeo, foto, áudio, frames) de vários servidores com apenas um link. A lista de serviços é enorme, suportada por YouTube, Vimeo, Flickr, Instagram, GitHub, Twitter, JSFiddle e uma porrada de outros serviços.

Histórico de mudanças:

Editor CK 1.1.1

- Corrigida compatibilidade com AjaxManager (havia um bug ao arrastar e soltar)
- Plugins adicionados: youtube, contagem de palavras, correção automática
- Removido o menu que aparece ao arrastar da árvore. Agora o link está simplesmente inserido. Se você arrastar uma imagem, ela será inserida.
- Suporte IE8

Editor CK 1.1.0
====================================
- Integração com navegador de arquivos MODx
- Suporte para TV Richtext
- Suporte para classes de recursos personalizadas (artigos por exemplo)
- Arrastar e soltar aprimorado. Agora você pode simplesmente lançar imagens da árvore de Arquivos para inseri-las no conteúdo.
- Corrigido Ctrl+S
- Opção extra_plugins (plugins adicionais)
- Opção de pele

Quase todo webmaster usa um ou outro editor visual (WYSIWYG) para postar conteúdo no site. Os editores visuais não apenas permitem que você trabalhe com HTML como também com texto simples em editor de texto, mas também possuem funcionalidades que facilitam a vida do webmaster. No entanto, este último pode não só simplificar a vida, mas também complicá-la.

No MODX Revolution eu uso principalmente o editor TinyMCE, que é instalado como um pacote separado. Não vou falar sobre suas vantagens e desvantagens, mas hoje vou apenas abordar os pontos que utilizo para facilitar o trabalho.

Configurações padrão

Imediatamente após instalar o pacote TinyMCE, verifico o bloco tinymce nas configurações do sistema:

Tiny.forced_root_block torna-o vazio tiny.path_options deve estar vazio tiny.base_url deve estar vazio

Também alterei a opção convert_urls para Não nas configurações do plugin TinyMCE. Faço isso para que o editor não tente alterar os links que defini.

Conectando o arquivo de estilos

Nem sempre conecto, mas às vezes é útil e facilita o trabalho com o conteúdo. Isso é feito especificando a configuração do sistema editor_css_path na configuração do bloco de configurações do sistema do Editor Rich-Text Caminho para o arquivo CSS ou.

Etiquetas HTML5

Para ser sincero, não consegui incluir tags HTML5 e processá-las com sabedoria. Então segui o caminho de permitir qualquer tag adicionando ao arquivo core/components/tinymce/templates/script.tpl após linha após linha

Minúsculo.config =modx->toJSON($this->propriedades); ?>;

Tiny.config.valid_elements = "*[*]";

O que permite a passagem de quaisquer tags. Para quem quer ficar confuso, esta variável pode receber uma lista de todas as tags HTML possíveis, incluindo tags HTML5 do arquivo xconfig.js incluído no pacote.

Como o MODX Revolution vem inicialmente vazio e para que o site funcione, posso afirmar com 99% de certeza que você terá que instalar pelo menos um add-on - saco plástico. Nesse sentido, decidi escrever uma pequena lista de pacotes que serão úteis para muitos ao criar sites no MODx Revolution.

(artigo atualizado em 11/02/2018)

Adições do repositório modx principal

Ás- destaque de código ao editar modelos, pedaços, snippets + integrados emmet.

Editor de texto rico TinyMCE- bom editor visual de conteúdo, pode ser expandido com funções adicionais, consulte o site do desenvolvedor.

arquivotranslit- renomeia arquivos de cirílico para latim ao carregar (por exemplo: carregue uma imagem com um nome (título) modx-plugin.png(quando o site for transferido, esses nomes de imagens se transformarão em cabras e deixarão de ser exibidos)), um arquivo com o nome será carregado no painel de administração modx-plugin.png.

transliterado– transliteração de aliases para páginas (url) – necessária para .

FormIt- trabalhar com formulários (criando formulários de contato de qualquer complexidade).

Coleções- agrupamento de documentos (recursos) - mais para sites grandes onde existem muitos documentos em categorias - ajuda a desonerar (agilizar) o painel de administração, pois se você tiver uma enorme árvore de recursos, ela começará a apresentar falhas.

simplesUpdater- Atualização Modex em 1 clique.

Profissional de SEO- Assistente de SEO! Verifica o comprimento dos campos – título, descrição, adiciona foco palavra-chave(palavras-chave) e mostra como as páginas ficarão em resultados da pesquisa.

Tags de título e alt de SEO de imagem- substitui automaticamente alt e title pelas imagens se elas não forem especificadas. Use com cuidado em um site de produção, pois pode quebrar algumas saídas que passam pelo CODE

Galeria– galerias de imagens

migx- coisa muito legal! Exibindo várias TVs no conteúdo, você pode criar um controle deslizante, galeria, etc.

SimpleSearch– organização da pesquisa no site.

Marcador- tags para postagens, nuvem de tags.

Configuração do cliente– criação de configurações de cliente, que os gestores podem editar posteriormente. Aqueles. Entramos nele tudo o que muda com frequência, ou apenas algo, por exemplo, contatos, endereço, slogan, etc. – para que o cliente possa alterar tudo com facilidade e rapidez.

Herdar modelo— define o modelo para elementos filhos.

VersãoX– um componente para quem entrega sites de melhoria para freelancers, ou talvez até iniciantes. Projetado para criar backups locais de todos os elementos (pedaços, trechos, recursos). Você pode ver versão antiga e, se necessário, restaure-o. Também permite que você descubra quem fez determinadas alterações.

Console– permite que você execute código PHP do backend.

Gerenciador Ajax— aceleração do painel de administração.

Captcha– captcha para fazer login no painel de administração – proteção adicional.

backupMODX– criando backups de um site em funcionamento com 1 clique.

logPageNotFound– registrar erros 404. Ótimo para rastrear links quebrados.

limpar cache – permite que você exclua tudo da pasta /core/cache/ com um clique.

Adições do repositório modstore.pro

Leia sobre como conectar um repositório adicional.

Formulário Ajax- Envio de formulários de contato sem recarregar a página, via Ajax. Usa FormIt, mas na verdade você pode especificar seu próprio snippet.

Data atrás- Boa formatação de data como CMS LiveStreet.

redirecionador automático- cria redirecionamentos 301 automaticamente, você também pode criar redirecionamentos manualmente.

Ingressos- criar um blog, comentar formulários, avaliações, etc.

Jevix- algo parecido com um tipográfico, instalado na máquina de Tickets

imagem mista- upload de arquivo misto (substituição de um campo adicional (para fotos, anexos, etc.)

ferramentas pdo- uma combinação completa, que inclui os seguintes trechos:
recursos pdo- destina-se principalmente a exibir uma lista de recursos, mas na verdade você pode usá-lo para criar muitas coisas interessantes: um mapa do site (para pessoas), galerias de fotos, portfólios, casos de recursos, etc.
pdoMenu- criação de cardápio.
pdoPágina- como pdoRecources exibe uma lista de recursos + cria navegação na página, inclusive de uma seleção de outros trechos.
pdoCrumbs- para criar migalhas de pão
pdoUsers- saída do usuário
pdoMapa do site- criando um sitemap.xml gerado automaticamente
pdoNeighbours— exibe documentos anteriores e seguintes (úteis para blogs, artigos, etc.)
pdoField— exibe qualquer campo do recurso especificado ou de seu pai, incluindo parâmetros de TV.
pdoTítulo— projetado para distinguir visualmente documentos com navegação de página.
pdoArquivo— produção de um arquivo de documentos do site divididos em dias, meses e anos
Analisador— intercepta o processamento de tags na página.
Este é talvez o pacote mais necessário; sem ele você não pode construir um site normal. Além disso, adiciona suporte para o mecanismo de template Fenom, que é mais rápido que o integrado.

miniShop2- criação de uma loja online.

BannerY- Componente para gerenciamento de banners (publicitários). É essencialmente fácil implementar um controle deslizante nele.

phpThumbOn- miniaturas de imagens (exibindo imagens com os tamanhos necessários).

MinifyX– minificação e fusão de scripts e estilos em dois arquivos (css e js) – permite reduzir o número de solicitações e aumentar a velocidade de carregamento da página.

xPoller2— Pesquisas multilíngues.

Ferramentas de administração- mudança esquema de cores painéis de administração, elementos favoritos, notas, autorização no painel de administração via e-mail, etc.

frontendManager— Edição de páginas do frontend.

administrador de banco de dados – visualizando a lista de tabelas do banco de dados no painel de administração do MODx Revo. Também permite exportar uma única tabela e todo o banco de dados como um todo. Ele também pode excluir e limpar tabelas (tenha cuidado ao usá-lo) e produzir vários tipos de consultas SQL.

modDevTools – pesquisa rápida e substituição de elementos em pedaços e trechos.

debugParser – Encontrando gargalos no site.

tagElementPlugin – permite editar trechos ou pedaços destacando sua tag e pressionando as combinações de teclas ctrl+enter.

controlErrorLog – adiciona um ícone à barra de menu superior que indica a presença de entradas no log de erros.

Plug-ins universais

— compactação automática de imagens em qualquer site, o serviço é pago, mas não é caro, desde o início você recebe 10 MB - isso é suficiente para compactar cerca de 500 imagens - o que é suficiente para qualquer cartão de visita, você também pode obter 200 adicionais MB de graça.