Editor visivo Modx. La mia personalizzazione dell'editor TinyMCE. Amichevole CKEditor con file manager KCFinder

Uno dei componenti aggiuntivi più popolari per MODX Revolution è redattore visivo TinyMCE.

Vono e zrozumilo, è raro che qualsiasi sito possa fare a meno di un buon editor richtext per i contenuti.

In questo articolo, si può vedere l'installazione e l'installazione Editor di TinyMCE.

Installato

Per installare è necessario scaricare il pacchetto dal repository (http://modx.com/extras/package/TinyMCE) e installarlo tramite la distribuzione "Packaging" del proprio sito.

Dopo aver installato il pacchetto, puoi aprire immediatamente qualsiasi risorsa per la modifica e riconsiderare quella in cui appare l'editor.

Puoi iniziare a scrivere in un nuovo testo, per una scrittura più comoda, si consiglia di cambiare l'editor.

La personalizzazione di TinyMCE include alcuni passaggi:

• Collegamento a un file di stile
• Aggiunta di pulsanti per lavorare con le tabelle

Connetti file con stili fino a TinyMCE

È necessario che l'editor visivo faccia apparire il testo uno a uno, come sul sito: carattere, dimensione e colore del testo, design delle immagini e vecchio aspetto tavolo.

Seleziona "Configurazione del sistema" e seleziona "Editor visivo" nel filtro:

A chi è stato dato un totale di 5 patch:

• Percorso del file CSS (editor_css_path)- specificare il percorso del file con stili di testo. Fai attenzione non all'ultimo file css del tuo sito, ma a un file okremy, in cui incolpare solo alcuni stili, che possono essere visti direttamente prima che il testo sia formattato (intestazioni h1-h6, paragrafo p, suffisso a table tables e altri). L'editor è più pratico e corretto.
• Vikoristati editor di testo(usa_editor)- puoi disabilitare l'editor alla volta per un'ora senza vederlo con TinyMCE.
• Editor (which_editor)- MODX Revolution ti consente di installare alcuni editor diversi sul sito, puoi passare da uno all'altro per il consumo. Prima del discorso, puoi modificare il prezzo per gli amministratori del sito, riconoscendo un diverso editor come tale grado per diversi amministratori.
• Editor di elementi (which_element_editor)- specificare l'editor per frammenti, plug-in, blocchi. Ad esempio, puoi utilizzare CodeMirror o Ace.

Aggiunta di pulsanti a TinyMCE per lavorare con le tabelle

TinyMCE, che si installa dal repository MODX Revolution, ha il lavoro di tabella abilitato per motivi di blocco. Hey, wee, puoi ovviamente passare alla modalità HTML e scrivere il codice manualmente, ma ci siamo! È piuttosto semplice mostrare 2 penne e accendere il supporto del tavolo.

Allo stesso tempo, dobbiamo regolare il sistema e nel primo filtro scegliamo tinymce:

Viene visualizzato un elenco di parametri disponibili. Noi tsіkavlyat 2:

• tiny.custom_plugins- Elenco dei plugin collegati a TinyMCS. Nell'ultimo elenco, è necessario aggiungere " tavolo", collegando il plug-in sim per lavorare con le tabelle. Il plug-in viene immediatamente da TinyMCE e non è necessario installarlo, è sufficiente attivarlo.
• tiny.custom_buttons3- Elenco dei pulsanti che compaiono sulla 3a riga. Entra lì " controlli tabella", avendo aggiunto la composizione dei pulsanti per lavorare con le tabelle. Mi sono reso conto che questi pulsanti possono essere posizionati su qualsiasi altra riga. Mentre ti stupisci delle altre righe, guarda l'elenco dei pulsanti incorporati, come annulla, ripeti, seleziona tutto e molti altri. Puoi "gratizzarli" disponendo i pulsanti in un ordine diverso.

Shvidshe per tutto dopo l'aggiornamento Sistemi MODX Evolution non usi l'editor di testo TinyMCE. L'asse dell'immagine dello yak che ho su tutti i siti aggiornati:

1. Aggiungi un plug-in da qui.

2. Rosaarchivio.

3. Compila la cartella ckeditor nella cartella asset/plugin/

4. Crea un plug-in ckeditor

5. Copia in una nuova posizione ckeditor.tpl

Inserisci le caselle di controllo nei sotto-pod di sistema OnRichTextEditorInit, OnRichTextEditorRegister e OnInterfaceSettingsRender

6. Abilita CKEditor

Puoi abilitare CKEditor in Strumenti>Configurazione>Interfaccia e dati, nella colonna " Editore:" Selezionare CK Editor

7. Entriamo in qualsiasi documento e Bachimo una tale immagine

8. Amichevole CKEditor con file manager KCFinder

Editore di Schob con competenza pratsyuvav z gestore di file KCFinder sostituisce questo codice in un file /assets/plugins/ckeditor/functions.php:

$mcpuk_path["base"] = MODX_BASE_URL . "gestore/media/browser/mcpuk/browse.php"; // . $cke_query; $mcpuk_path["image"] = $mcpuk_path["base"] . "?tipo=immagini"; $mcpuk_path["flash"] = $mcpuk_path["base"] . "?tipo=flash"; $mcpuk_path["link"] = $mcpuk_path["base"] . "?tipo=file";

9. Ho scelto la mia cartella dei pulsanti di cui ho bisogno

Nel file /assets/plugins/ckeditor/modx_config.js puoi cambiare la posizione, vedere o aggiungere pulsanti. Per me stesso, ho scelto questa combinazione.

Chi se ne frega, puoi sostituire una riga di codice:

Config.toolbar_modx = [["Fonte"], ["Grassetto","Corsivo","Sottolineato","Strike","-","Subscript","Superscript"], ["PasteText","PasteFromWord"] , ["Annulla","Ripeti","-","Trova","-","RimuoviFormato"], "/", ["ElencoNumerato","ElencoPuntitato","-","Rientro","Rientro ","Blockquote"], ["JustifyLeft","JustifyCenter","JustifyRight"], ["Link","Unlink","Anchor"], ["Image","Flash","Table","HorizontalRule " ","Smiley","SpecialChar"], "/", ["Format","Font","FontSize"], ["TextColor","BGColor"], ["Maximize", "ShowBlocks"," - ","Informazioni"] ];

Config.toolbar_simple = [["Source","-","Maximize","RemoveFormat"], ["PasteText","Find","Replace"], ["Link","Unlink"], ["Image ","SpecialChar"], ["Formato"], "/", ["Grassetto","Corsivo","Sottolineato","Strike","-","Subscript","Superscript"], ["TextColor ","BGColor"], ["NumberedList","BulletedList","-","Blockquote"], ["JustifyLeft","JustifyCenter","JustifyRight","JustifyBlock"]];

Qui ho inserito solo quanto segue: Codice di testo, Zbіshuvach (per scrivere più chiaramente), formattazione del testo, Inserisci solo testo, Cerca e modifica, Forza, Inserisci immagine, Simboli, Intestazioni, Attributi di testo, testo a colori e sfondo, paragrafi , cita quel vimic al testo.

Installazione di plug-in aggiuntivi

CKeditor ha un sacco di tutti i tipi di plugin. Puoi trovarli su Internet e sul sito ufficiale di CKeditor. Tutti i plugin sono installati nella cartella /manager/assets/components/ckeditor/ckeditor/plugins/.

Dali nelle "Impostazioni di sistema" seleziona "ckeditor" e nel campo plugin aggiuntivi ( extra_plugins) inserire il nome del plugin che si sta installando. E nel gruppo di pulsanti ( barra degli strumenti) è inserito nel campo obbligatorio "im'ya plug-in". Il componente aggiuntivo è installato e pronto per funzionare.

I frammenti di MODX Revolution vengono spediti vuoti e per far funzionare il sito, posso dire con una sicurezza del 99% che ti capita di installare un addendum se lo desideri. sacchetto di plastica. A zv'azku s tsim scrivo virishiv un piccolo elenco di pacchetti, come una fortuna per diventare un dio durante la creazione di siti su MODXRevo soluzione.

(articolo aggiornato il 02/11/2018)

Estensione dal repository modx principale

Asso- codice corrispondente per modelli di modifica dell'ora pid, blocchi, frammenti + risvegli emmet.

Editor di testo RTF TinyMCE- un bel editor visivo per i contenuti, ma può anche essere espanso per rahunok funzioni aggiuntive ammirare il sito Web del rivenditore.

filetranslit- passare al latino durante l'acquisizione di file dal cirillico (ad esempio: acquisizione di un'immagine con nomi (nome) modx-plugin.png(durante il trasferimento al sito, tali nomi di immagine cambieranno in capre e smetteranno di essere visualizzati), un file con i nomi verrà caricato nell'amministratore modx-plugin.png.

traslato– traslitterazione degli alias per le pagine (url) – richiesta per i file .

FormIt- lavorare con i moduli (costruzione di moduli di contatto, non importa quanto pieghevoli).

Collezioni- raggruppamento di documenti (risorse) - più grandi siti, de categorie ricche di documenti - aiuta ad espandere (accelerare) il pannello di amministrazione, perché Se hai un albero delle risorse più grande, è più difettoso.

simpleUpdater- Aggiorna Modex in 1 clic.

Professionista SEO- Assistente SEO! Revisione del campo dell'irrigazione: titolo, descrizione, aggiunta di focus parola chiave(parole chiave) e mostra come i lati sembrano un visualizzatore di ricerca.

Immagine SEO tag alt e title- invia automaticamente alt e titolo per l'immagine, poiché non è registrata. Zastosovuvati con attenzione su un sito di lavoro, puoi fermare i deak, se passi attraverso CODE

Galleria– gallerie di immagini

mix- Duzhe Cool River! Visualizzando un numero di canali TV nei contenuti, puoi creare uno slider, ad esempio una galleria, ecc.

ricerca semplice- Organizzazione di una ricerca sul sito.

Taggatore- Tag per record, tag hmara.

ClientConfig- Creazione del client nalashtuvan, yakі nadalі può essere modificato dai gestori. Tobto. tutto è aggiornato, tutto è spesso cambiato, o è solo che, ad esempio, contatti, indirizzi, slogan, ecc. - Shchob zamovnik zmіg tutto è minyati facile e veloce.

Eredita modello- Inserisci modello per elementi figli.

Versione X- un componente per tranquillo che vede siti per ulteriori liberi professionisti, forse anche nuovi arrivati. Assegnazioni per la creazione di backup locali di tutti gli elementi - (pezzi, frammenti, risorse). Puoi meravigliarti vecchia versione e per la necessità di chiarimenti її. Ti permetto anche di riconoscere chi ha apportato tali modifiche.

Consolle– consente di eseguire codice PHP dal back-end.

Ajax Manager- Prompt robot di amministrazione.

Captcha- Captcha per accedere al pannello di amministrazione - dodatkovy zakhist.

backupMODX- Creazione di backup da un sito funzionante in 1 clic.

logPageNotFound- log 404 grazie. Vіdmіnno pіdhodit per vіdstezhennya posilan.

cacheCancella – ti consente di eliminare tutte le cartelle /core/cache/ con un clic.

Aggiunta dal repository modstore.pro

A proposito di quelli, come collegare il repository addendum, leggi.

Forma Aiace- Applicazione dei moduli di contatto senza il coinvolgimento di terze parti, tramite Ajax. Vikoristovu FormIt, ma in realtà puoi inserire il tuo frammento.

DataAgo- Accetta la formattazione della data come CMS LiveStreet.

autoRedirector- Creo automaticamente un reindirizzamento 301, quindi puoi creare un reindirizzamento manualmente.

Biglietti- creazione di un blog, forma di un commento, osservazioni toschoo.

Jevix- a seconda del tipo di tipografo, viene installato sulla macchina da Tickets

mixedImage- Modificare il file allegato (sostituzione del campo aggiuntivo (per immagini, allegati e altro)

pdoTools- mietitrice tsiliy, al cui magazzino entrano i seguenti frammenti:
pdoResources- incarichi a noi davanti all'elenco delle risorse per la visualizzazione, ma in realtà, per ulteriore aiuto, puoi fare più di molte cose: una mappa del sito (per le persone), gallerie fotografiche, portfolio, anche una cassa di risorse .
pdoMenu- Creazione menù.
pdoPage- come e pdoRecources per visualizzare un elenco di risorse + creare una navigazione post-link, inclusa una selezione di altri frammenti.
pdoBriciole- per fare il pangrattato (briciole di pane)
pdoUsers- Vivedennya koristuvachіv
pdoSitemap- Creazione di sitemap.xml generato automaticamente
pdoNeighbours- visualizzare documenti di inoltro e inoltro (corretto per blog, articoli, ecc.)
pdoField- visualizzare il campo assegnato alla risorsa o yogo dad, comprensivo dei parametri TV.
pdoTitolo— incarichi per la visibilità visiva dei documenti dalla navigazione post-store.
pdoArchive— visualizzazione dell'archivio documenti presente sul sito con suddivisione per giorno, mese e anno
analizzatore- Modificare l'elaborazione dei tag sul lato.
Tse, forse, il pacchetto più necessario, senza un nuovo sito normale, non puoi ritirarlo. Lo stesso wine aggiunge il supporto del template engine Fenom, che è migliore del vecchio.

miniNegozio2- Creazione di un negozio online.

BannerY- Componente per la visualizzazione di banner (pubblicità). Per la nuova verità, basta vendere il cursore.

phpThumbOn- miniature per immagini (visualizzazione di immagini da ci vuole il rosmarino).

MinifyX– minimizzazione e incollaggio di script e stili in due file (css e js) – consente di modificare il numero di input e aumentare la velocità dei lati.

xPoller2- Esperienza multimodale.

AdminTools- Modificare combinazione di colori amministratori, selezionare elementi, note, autorizzazione nell'amministratore via e-mail o altro.

frontendManager— Modifica dei lati dal frontend.

dbAdmin – guardando l'elenco della tabella del database per il pannello di amministrazione di MODx Revo. Ti permette anche di esportare viroblyat come una tabella creme e tutte le basi. Puoi anche vedere e ripulire le tabelle (fai attenzione alle tue vittorie) e lavorare con diverse query SQL.

modDevTools – ricerca rapida e sostituzione di elementi in un blocco, frammenti.

debugParser – Cerca aree specifiche sul sito web.

tagElementPlugin – ti consente di modificare frammenti o blocchi per visualizzare il tuo tag e premere i tasti ctrl+invio.

controlErrorLog – aggiungi un'icona sulla barra dei menu in alto per avvisarti della disponibilità delle voci del diario di grazia.

Plugin universali

— stampando automaticamente le immagini su qualsiasi sito, il servizio è a pagamento, ma costoso, dall'inizio ti vengono dati 10 MB - puoi scaricare circa 500 immagini per stick - cosa ricamare per un biglietto da visita, quindi puoi aggiungere fino a 200 MB gratuitamente .

Provo a provare CKEditor come editor di codice visivo. La versione 4.0 ha un tema neutro in bianco e nero (adatto anche al pannello di amministrazione di MODx) e alcune novità (valutando l'inserimento di paragrafi nello spazio "importante").

Non puoi twittare come editor front-end.
Pratsuє Ctrl + S, così come l'inserimento di un messaggio o la creazione di risorse (iframe) e file (img, audio, video). Devi solo vedere il testo e lanciare l'editor nella risorsa/file richiesto.

Nelle personalizzazioni, puoi cambiare il colore dell'interfaccia utente, la skin, aggiungere i tuoi plug-in e modificare l'ordine e la composizione dei pulsanti del pannello.

Specifica le funzioni mancanti: cercherò di implementarle.

Installazione tramite gestore pacchetti.
Sul vіdminu con TinyMCE, più soldi

Piano fai da te:

Aggiungi trim ai parametri TV richtext
- Pulsante Vibrazione sul server in dialoghi di dialogo(Integrazione con Browser file MODX)
- Migliorato: extraPlugins, disableObjectResizing, keruvannya format posilan, select skin
- Menu per l'ora di trascinamento di file e risorse: Recupera oggetto | Inserisci messaggio | Inserisci il nome dell'oggetto
- Difendi i tag modx
- Nuovi pulsanti (inserisci tag, modifica anche gli attributi)
- Elenco delle classi dalle tabelle di stile analizzate.
- Pіdhoplennya sistemnye nalashtuvan z contesto, scho edit (problemi con i messaggi)
- Impostazioni della tastiera ogni giorno.
- Tipografia plug-in - zampe di scambio automatico, def_sіv solo al volo.
- Guarda altre immagini per aiuto copia / incolla e trascina "n" rilascia
- Tag modx di suggerimento automatico (analisi e visualizzazione), per quanto possibile e per quanto possibile (puoi utilizzare un widget marrone, che viene espanso dal team CKSource)
- Modifica in linea dal frontend.

Chet è un ottimo elenco di viishas. Devi cambiare le tue fantasie...

Istruzioni per l'installazione di plug-in aggiuntivi:
Conosciamo il plug-in richiesto, ad esempio, lo inseriamo in una cartella /manager/assets/components/ckeditor/ckeditor/plugins/, Idem in aggiustamento sistemico, viene scelto l'intervallo di nomi ckeditor, prescrivi il nostro plugin extra_plugins(attraverso il quale, come uno spratto), abbiamo dato ragione barra degli strumenti, inserendo un nuovo pulsante (come є). Aggiorna il modulo di modifica della risorsa: ricontrolla il risultato. Propago la condivisione con i plugin cіkavimy.

Plugin aggiuntivi (non inclusi prima del pacchetto):
oEmbed: consente di incorporare contenuti (video, foto, audio, frame) da server diversi, rendendolo ancora più difficile. Elenco di ottimi servizi, supportati da YouTube, Vimeo, Flickr, Instagram, GitHub, Twitter, JSFiddle e altri fottuti servizi.

Cronologia dei cambiamenti:

Editor CK 1.1.1

- Corretta la sommatoria di AjaxManager
- Aggiungi plugin: youtube, conteggio parole, correzione automatica
- Si è visto il menù, che si presenta per un'ora di tiraggio dall'albero. Ora la forza è semplicemente inserita. Basta trascinare l'immagine - inserire l'immagine.
- Supporta IE8

Editor CK 1.1.0
====================================
- Integrazione del browser File MODx
- Supporta la TV richtext
- Supporto per classi di risorse personalizzate (articoli per es.)
- Migliorato il trascinamento "n" drop. Ora puoi semplicemente trascinare le immagini dall'albero dei file per inserirle nel contenuto.
- dopo Ctrl+S
- Opzione extra_plugins (plugin aggiuntivi)
- Opzione skin (Cambia skin)