• hjem
  •  > 
  • Grafikk og design
  •  > 
  • Plugin for WordPress editor-utvidelse. Visuell redaktør WordPress TinyMCE Advanced, beskrivelse og innstillinger

Plugin for WordPress editor-utvidelse. Visuell redaktør WordPress TinyMCE Advanced, beskrivelse og innstillinger

Grensesnittspråk: engelsk russisk Type: Plugin

WordPress tekstredigerer er et enkelt å bruke og viktig verktøy for alle, enten det er en redaktør eller en webutvikler. Men etter hvert som versjonen forbedres tekstredigerer Med Brukererfaring for hver bruker?

WP Smart Editor tilbyr deg og dine kunder egen erfaring arbeide med muligheten til å filtrere verktøyene som er tilgjengelige for hver brukerrolle, eller til og med for hver bruker. I tillegg er plugin-modulen utstyrt med tidsbesparende verktøy som: table manager, filbehandler, tilpasset stil og knapperedigerer, punktlister og et summeringsverktøy.

Rollen til brukere og WordPress-profiler. WP Smart Editor tilbyr unike muligheter for hver innholdsskaper. Du har muligheten:

  • Opprett flere brukerprofiler;
  • Velg et sett med redigeringsverktøy som skal brukes på hver profil;
  • Bruk profiler til en eller flere brukere eller brukerroller;
  • Eksporter/importer brukerprofiler fra en nettside til en annen.

Utvalg av verktøy. WP Smart Editor kommer med et kraftig sett med redigeringsverktøy som er nyttige og tidsbesparende for redigering av innhold, inkludert:

  • Kolonnebehandling: Lag og tilpass kolonneoppsett uten å bruke HTML-kode;
  • Button manager: design, lagre og gjenbruk knappene dine fra editoren;
  • Listebehandling: Lag lister med ikoner, lagre og gjenbruk dem på nettstedet ditt;
  • Sammendrag: Lag automatisk innhold med lenker basert på innholdstittelstrukturen;
  • Verktøytipsbehandling: Legg til et AJAX-verktøytips i innholdet ditt.

Filbehandler. Administrer filer som f.eks PDF-filer eller ZIP-filer ved å bruke standard WordPress mediebehandling. WP Smart Editor inneholder lett versjon kraftig plugin WP-filopplastinger slik at du kan laste opp, administrere og oppdatere filer.

Bordsjef. Å lage en tabell i WordPress-editoren krever kunnskap om HTML/CSS, og det er nesten umulig å administrere tabellen i innholdseditorer. WP Smart Editor inkluderer en lett versjon av den kraftige WP Table Manager-pluginen, som lar deg lage, administrere og tilpasse tabeller fra redaktøren din akkurat som om du brukte Excel.

Spesiell HTML-stil for brukere. WP Smart Editor har et spesielt verktøy for å lage tilpassede CSS-stiler og gi dem til brukere. Som webdesigner, lag din egen stil iht WordPress-tema, navngi den og la innholdsredigereren bruke den når det er nødvendig.

Mal editor. Med malbehandlingsverktøyet kan du lagre layoutene dine, alt innholdet og HTML-strukturen du skrev inn i redigeringsprogrammet, og bruke dem senere på en annen side.

Forbedret koderedigering. WordPress inkluderer tekst/HTML-visninger som standard i redigeringsprogrammet. Vi har forbedret oss HTML-versjon med kodeutheving ved å bruke søke-/erstatt-funksjonen, søk etter et ord eller uttrykk og legg det til alt innholdet ditt.

WP Smart Editor-pluginen integreres perfekt med:

En liten person kan gjøre mye.

Hei kollegaer!

Det er to måter:

1. Installer plugin-modulen
2. Installere koden i functions.php-filen.

Hvis du ikke er sterk i kunnskap om php, html og css-stiler, da er det bedre å bruke klar plugin for å utvide mulighetene til WordPress-editoren.

Utvide funksjonene til WordPress-editoren med en plugin

Ultimate TinyMCE-plugin

Jeg har brukt Ultimate TinyMCE-pluginen i omtrent fire år nå, selv om den har færre nedlastinger enn lignende.

Det plager meg ikke at det ikke har blitt oppdatert på mer enn to år. Fungerer utmerket og kommer ikke i konflikt med andre.
Jeg likte det fordi det hadde et alternativ som tillot deg å sette inn tekst på en annen fargebakgrunn. Men WordPress krevde at plugin-eieren skulle fjerne denne funksjonen.

Plugin er enkel å konfigurere og krever ikke mye kunnskap. Jeg håper du vet hvordan du installerer ny plugin fra wordpress kontrollpanel.

Sette opp Ultimate TinyMCE-plugin

Etter å ha aktivert plugin-en, på venstre side av konsollen, finn "Innstillinger"-fanen og klikk på "Ultimate TinyMCE".

Vil åpne lang side Med ulike knapper, ved hjelp av dette utvider vi mulighetene til WordPress-editoren. Skjermbildet viser bare en del av siden.

Legg til visuell innebygd editor WordPress nødvendig du fungerer og ikke glem å lagre endringene.

Jeg viste ikke hele siden, ta en titt selv. Det viktigste er å gjøre innstillingene riktig. I «Aktiver»-kolonnen merker du av i boksen ved siden av ønsket alternativ, og i kolonnen "Row Selection" angir redigeringsraden. Visuell redaktør WordPress kan bare ha fire linjer.

Eksperimenter og velg plasseringen av de ekstra WordPress-funksjonene som er praktisk for deg.

Hvis den standard innebygde editoren ser slik ut:

Etter å ha utvidet funksjonene til WordPress-editoren, vil det se annerledes ut:

Tiny MCE Advanced plugin

Denne plugin er lik den forrige, den eneste forskjellen er at den har stor kvantitet installasjoner og konstante oppdateringer.

Du kan installere den fra nettstedets administrasjonspanel i "Plugins"-fanen ==> "Legg til ny".

Aktiver installert plugin og i «Innstillinger»-fanen ==> « TinyMCE Advanced» gå til WordPress-redigeringsinnstillingene.

(Klikk på bildene for å forstørre.)

Alle innstillinger er på russisk. Bestem selv om du vil aktivere redigeringsmenyen eller ikke, velg deretter alternativene du trenger og sett dem inn i redigeringsprogrammet. Den inneholder også fire linjer. Lagre endringene dine og sjekk ut WordPress-redigeringsforbedringene.

Nikolai Ivanov var med deg.

VENNLIGST SKRIV DINE SPØRSMÅL I KOMMENTARENE

Jeg har et lite sett som trygt kan kalles " må ha"for hver blogger, det vil si obligatorisk for bruk. Hvis det er mulig, installerer jeg nesten den samme samlingen på alle bloggene mine, noe som gjør arbeidet med systemet mer produktivt, funksjonelt og praktisk for besøkende. Jeg tror at du i fremtiden vil finne anmeldelser av dem alle på sidene i denne bloggen. Jeg har allerede snakket om noen moduler, men de fleste av dem er ennå ikke kommet. I dag vi vil snakke om avansert tekstredigerer TinyMCE Advanced– tingen er veldig kul og praktisk.

Generelt, i et tekstredigeringsprogram, bruker du faktisk mest tid i Wordpress - publisere og formatere tekst, legge til tagger, sette inn bilder, noen ganger må du plassere tabeller osv. Generelt er det svært viktig å ha et funksjonelt verktøy av høy kvalitet for hånden. Standard i wordpress system Den har sin egen editor, men jeg vil likevel anbefale å installere TinyMCE Advanced. Slik ser det ut i aksjon nå i administrasjonsområdet til WordPress inside-bloggen:

Som du kan se, er det mer enn nok ikoner her for alle slags handlinger. Jeg vil ikke sammenligne den med standarden, siden jeg til og med har glemt hvordan den ser ut, vil jeg bare fortelle deg om noen detaljer i TinyMCE Advanced. På den første linjen har vi knapper:

  • formatering (fet, kursiv, understreket osv.)
  • lage vanlige og nummererte lister, samt innrykk for tekst
  • justering av tekst til kantene, midten og hele kolonnebredden
  • opprette og slette lenker
  • sette inn et bilde
  • css redigering
  • lage sitater
  • sette inn skilletegn på og neste side
  • aktivere stavekontroll, finne en linje i teksten
  • inkludering fullskjerm-modus, og også vise tilleggslinje funksjonstaster for TinyMCE Advanced tekstredigeringsprogram
  • den siste knappen er satt inn.

Den andre linjen er ikke mindre viktig og inneholder også en rekke interessante funksjoner:

  • velge en tekstfont og avsnittsformatering
  • lim inn tekst, lim inn fra Word, fjern all formatering
  • legge til et vilkårlig tegn til teksten og skrive ut
  • og bakgrunn, sette inn uttrykksikoner (for å vise dem, må du merke av i boksen ved siden av konverteringselementet i administratorinnstillingene i "Skriv"-menyen teksttegn for uttrykksikoner i bilder)
  • utheving av tekst som hevet og senket skrift
  • sette inn en mediefil
  • avbryte en handling og gjenoppta den, redigere attributter og hjelpe.

Dette tror jeg vil være nok til å forstå det TinyMCE-redaktør Advanced er rett og slett superfunksjonell. Forresten, dette er bare en del av dens evner; Jeg skal fortelle deg om andre litt lenger.

Installere og konfigurere TinyMCE Advanced

Du kan laste ned TinyMCE Advanced tekstredigering fra . Det skal bemerkes at for forskjellige versjoner wordpress (2.6, 2.7, 2.8+) må du bruke din egen distribusjon. I skrivende stund er siste versjon av plugin 3.2.7.

Standard installasjon– etter nedlasting, pakk den ut og last den opp til bloggens FTP i mappen wp-content/plugins. Deretter aktiverer vi TinyMCE Advanced fra administrasjonspanelet, hvoretter vi går til "Alternativer" -menyen - "TinyMCE Advanced", hvor du må konfigurere den. Det siste trinnet er å tømme nettleserbufferen.

Før du snakker om oppsettet, noen flere ord om funksjonaliteten til modulen. I følge beskrivelsen på den offisielle nettsiden inkluderer den så mange som 15 andre plugins: Advanced HR, Advanced Image, Advanced Link, Context Menu, Emotions (Smilies), Dato og Tid, IESpell, Layer, Nonbreaking, Print, Search and Replace, Style, Tabell, Visual Characters og XHTML Extras. Alt dette kan oppnås ved å installere bare én TinyMCE Advanced! I tillegg til engelsk, støtter plugin også noen andre lokaliseringer (tysk, fransk, italiensk, spansk, russisk, etc.). Generelt tvil brede muligheter det er ingen modul.

Sette opp TinyMCE Advanced gjøres i bloggadminpanelet i menyelementet med samme navn. Prosessen er ikke komplisert, snarere interessant. På siden vil du se 4 linjer i et tekstredigeringsprogram hvor du kan plassere ulike funksjonstaster:

Ser du hvor mye ting som fortsatt er lagret der? Du må fordype deg i detaljene selv, siden alle elementene er merket og ganske klare. Jeg ville nok fremhevet en egen blokk med funksjoner for å jobbe med tabeller - den lar deg raskt og enkelt lage og endre dem i teksten. Du kan også importere en tilpasset editor til TinyMCE Advanced css-fil stiler - kan også være nyttig. Generelt, som jeg sa helt fra begynnelsen av innlegget, er modulen et must!

Tillegg for TinyMCE Advanced

Det er et par artikler på bloggen som snakker om å utvide funksjonene til plugin:

  • ved å bruke TinyMCE Color Grid-modulen og mer. Denne avgjørelsen skaper en heftig fargepalett i editoren + legger til en til nyttig funksjon. Også i artikkelen finner du et hack for functions.php, som lar deg bytte ut basisfargene i TinyMCE Advanced med dine egne.
  • — Jeg vurderer oppgaven med å installere nytt tilpassede fonter i TinyMCE Advanced, i tillegg til å legge til Google Fonts gjennom vanlig CSS stiler.

Jeg tror disse notatene vil være nyttige for deg i arbeidet ditt. Hvis du har spørsmål, spør dem i kommentarene.

Hei alle sammen!. I dag skal vi snakke om stedet der du vil tilbringe stor mengde tid på å blogge. Dette stedet - ! Tross alt er det i den du skal skrive nye innlegg og publisere dem på bloggen din. WordPress tilbyr to versjoner av editoren - visuell og tekst. La oss se på funksjonene til hver av dem og lære hvordan du legger til ny funksjonalitet.

WordPress Visual Editor og Ultimate TinyMCE Plugin

WordPress visuelle editor ligner i utseende og Word funksjoner, som nesten alle er kjent med. Dessverre er funksjonaliteten som standard svært dårlig, noe som begrenser tekstformateringsalternativene dine betydelig. Dette problemet Utmerket løsning er Ultimate TinyMCE-plugin, som legger til et stort antall av alle slags nye knapper.

Plugin er installert som standard - last ned Ultimate TinyMCE, pakk ut arkivet og last opp mappen med plugin-filene til serveren i wp-content/plugins-katalogen. Aktiver og gå til innstillingene i delen "Alternativer" - "Ultimate TinyMCE".

Som standard er alle knappene i WordPress visuelle editor ordnet i to rader. For å vise den andre raden, bruk "Vis/skjul"-knappen ekstra panel" Du kan gjette funksjonaliteten til hver knapp ved hjelp av ikonet på den eller ved hjelp av verktøytipset som vises når du holder musen over den. Ultimate TinyMCE legger til omtrent 40 nye funksjoner og to ekstra rader med knapper.

Faktisk koker alle Ultimate TinyMCE-innstillingene ned til å merke knappene hvis funksjonalitet du trenger og velge en rad for dem. Beskrivelse i innstillinger engelske språk, men etter å ha lagt dem til i redaktøren, vil tipsene være på russisk. Selv om du i de fleste tilfeller kan finne ut av det uten noen hint i det hele tatt.

La oss bare vurdere flere alternativer, som presenteres helt nederst i innstillingene:

Endre fargen på editoren— endrer fargen på blokken med knapper i WordPress visuelle editor.

Aktiver NextPage (PageBreak)-knappen- legger til NextPage-funksjon for .

Legg til ID-kolonne til side-/innleggsadministratorlisten— en ny kolonne legges til WP admin-siden med lister over alle artikler og innlegg, som indikerer IDen til hvert blogginnlegg/side. Du kan lese.

Tillat kortkodebruk i widgettekstområder— lar deg bruke en "kortkode" i "Tekst"-widgeten. Shortcode er designet for raskt å legge til kode, NextGEN Gallery, og andre plugins i sideteksten.

Bruk PHP Text Widget - lar deg bruke php-kode V . Koden tolkes og resultatet av arbeidet vises på bloggsiden.

Aktiver linjeskiftkortkode - legger til " Korte koder» Break tag, som er ment å bli lagt til tom linje inn i teksten.

Aktiver kolonnekortkoder - legger til "Short Codes" et stort nummer av tagger som er ansvarlige for å danne tekstkolonner.

Aktiver Avansert Insert/Edit Link-knapp— legger til en avansert evne til å sette inn/redigere lenker.

Aktiver "Div Clear"-knapper - legger til Div Clear både, venstre og høyre knapper designet for å avbryte elementets flyte, som er satt ved hjelp av flyteegenskapen.

Fjern p- og br-tagger - deaktiverer automatisk innsetting av p (avsnitt) og br (linjeskift)-tagger. Hvis du ikke vil spesifisere p-taggen manuelt for hvert avsnitt, er det bedre å ikke berøre dette alternativet.

Legg til en Signoff Shortcode - du kan angi en ofte brukt setning og sette den inn i artikler ved å bruke Signoff-taggen fra Shortcode.

WordPress tekstredigerer og Post Editor-knapper og AddQuicktag-plugins

Mange anser koden som er opprettet i WordPress visuelle editor for å være skitten, det vil si at den inneholder unødvendige tagger og stiler som skal flyttes til stilfilen til WP-temaet som brukes. Gir deg mer kontroll over koden din tekstversjon WordPress redaktør. Der settes alle tagger inn manuelt, med unntak av avsnitt (p) og linjeskift (br) tagger, de legges til automatisk.

Alt er bra, men igjen er det ikke nok funksjonalitet. For å takle dette problemet kan du bruke Post Editor Buttons-plugin.

Last ned den nyeste versjonen av Post Editor Buttons. Plugin er installert som standard. Plugin-innstillingene er plassert under "Parameters" - "Post Editor Buttons".

Alt er veldig enkelt der:

  • Bildetekst — navnet på knappen vi legger til;
  • Før - åpningsmerke;
  • Etter - avsluttende tag;
  • Slett - slett.

Beklager, på bloggen min Innleggsredigeringsknapper fungerer ikke. Knappene som er opprettet i den er rett og slett ikke lagt til. Var et utmerket alternativ AddQuicktag-plugin.

Last ned den nyeste versjonen av AddQuicktag. Programtillegget er installert som standard, innstillingene er plassert i delen "Innstillinger" med samme navn - "AddQuicktag". Lagt til fire nye alternativkolonner som jeg ikke engang bruker.

De viktigste er fortsatt de samme:

  • Knappetikett - navn;
  • Start Tag(er) - åpningstag;
  • Sluttmerke(r) - avsluttende tagg.

Takk for din oppmerksomhet! Det er alt. Ta vare på deg selv.

Hei alle sammen!

I dag vil jeg fortelle deg om Ultimate tinyMCE-plugin, som lar deg utvide funksjonene til standard WordPress visuelle editor betydelig.

Ved å bruke Ultimate tinyMCE-pluginen kan du velge riktig tekstfont, spesifisere dens dimensjoner og behandle bilder og videoer mer funksjonelt.

Når du skriver artikkelen, legg inn på de riktige stedene ulike uttrykksikoner og mye mer. Og selv om du ikke er tilhenger av unødvendige plugins, vil artikkelen i dette tilfellet være nyttig for deg, fordi i den vil jeg vise hvordan du implementerer noen av funksjonene ved hjelp av vanlige koder.

Så la oss begynne! Alle som jobber med wordpress-motor, de vet godt hvordan arbeidspanelet til en standard visuell editor ser ut:

Det inkluderer minimumssett funksjoner som lar webansvarlige skrive og publisere nyttig materiale på bloggen din. Personlig er jeg ganske fornøyd med standardsettet med funksjoner til WordPress-editoren, men ikke alle er fornøyd med det og foretrekker å bruke andre redaktører eller programmer.

Ultimate TinyMCE-plugin. Forbedre WordPress visuelle editor

Du kan laste ned Ultimate TinyMCE-plugin. Deretter installerer du den på bloggen din og aktiverer den. For de som ikke vet hvordan plugins installeres, . Etter å ha installert og aktivert plugin, administrativt panel en ekstra Ultimate TinyMCE-fane vises på ressursen din:

Ved å gå til fanen vil du se en imponerende liste over forskjellige knapper, som hver har spesifikk funksjon. Nå kan du oppgradere den visuelle editoren din med hvilken som helst av de manglende funksjonene som finnes i plugin-en.

Jeg vil ikke beskrive hver knapp, fordi... De fleste av dem er oversatt til russisk, og hver av dere vil kunne finne ut av dem på egen hånd. Det eneste som er verdt å nevne er deres implementering på bloggen.

For at en bestemt knapp skal vises i arbeidspanel visuell editor, nok i "Aktiver"-kolonnen, på motsatt side ønsket knapp merk av i boksen. I tillegg tilbyr plugin deg å velge plasseringen av knappene selv, noe som kan gjøres i kolonnen "Row Selection":

Som du sikkert har lagt merke til, er alle knappene i redigeringspanelet plassert i to linjer, men takket være Ultimate tinyMCE kan du øke antallet linjer til fire, men ikke mer. Dette forenkles av verdien "ROW", som betyr "Row".

Som standard er hvert element satt til "RAD 1". Hvis du lar alt være uendret, vil funksjonen i form av en knapp fortsette den første linjen i det visuelle redigeringspanelet og vises på slutten, tross alt standard funksjoner.

Hvis du for eksempel velger verdien “RAD 3” fra listen, vil knappen med funksjonen flyttes til tredje linje. Jeg synes det er klart! Aktiverer alt tilleggsfunksjoner(Jeg telte 53) og spredte dem langs linjene, fikk jeg dette bildet:

Imponerende, ikke sant? Og jeg glemte å nevne at når du legger til eller fjerner en funksjon, ikke glem å klikke på "Oppdater knapper-alternativer" -knappen helt nederst i plugin-en for å lagre innstillingene.

Hvordan utvide funksjonaliteten til WordPress visuelle editor ved hjelp av kode

Så hvilke funksjoner kan du legge til ved hjelp av kode, og hvordan gjør du det?

1. Du kan legge til «Font Family», dvs. du kan velge fonten du trenger fra listen og skrive et helt innlegg eller et kort utdrag med det. For å implementere denne funksjonen, åpne functions.php-filen for redigering (sti til fil: /wp-content/themes/navn på temaet (mal)/functions.php).

OBS: før du redigerer functions.php-filen, sørg for å gjøre det for å unngå feil handlinger!

Etter å ha åpnet filen, finn taggen helt på slutten: ?> og rett før den setter inn denne koden:

add_filter("mce_buttons_2" , "add_fontselect_row_2" ); function add_fontselect_row_2( $mce_buttons ) ( $pastetext = array_search ( "pastetext" , $mce_buttons ); $pasteword = array_search ( "pasteword" , $mce_buttons ) ; $removeformat = array_search_button ($fjern) s [ $pastetext ] ); deaktiver ( $mce_buttons [ $pasteword ] ); deaktiver ( $mce_buttons [ $removeformat ] ); array_splice ( $mce_buttons , $pastetext , 0 , "fontselect" ); returner $mce_buttons " , "restrict_font_choices" ); funksjon restrict_font_choices( $initArray ) ( $initArray [ "theme_advanced_fonts" ] = "Andale Mono=andale mono, ganger;". "Arial=arial,helvetica,sans-serif;". "Arial Black = arial black, avant garde;". "Book Antiqua=bok antiqua, palatino;". "Comic Sans MS=comic sans ms,sans-serif;". "Courier New=courier new,courier;". "Georgia=georgia,palatino;" . "Helvetica=helvetica;" . "Impact=impact,chicago;" . "Symbol=symbol;" . "Tahoma=tahoma, arial, helvetica, sans-serif;". "Terminal=terminal,monaco;" . "Times New Roman = Times New Roman, Times;". "Trebuchet MS=trebuchet ms,geneve;". "Verdana=verdana,geneve;" . "Webdings=webdings;" . "Wingdings=wingdings,zapf dingbats". "" ; returner $initArray ; )

Lagre filen og flytt den tilbake til bloggtema-mappen din, og erstatte den gamle.

2. Legg til knapper for horisontal skilletegn, hevet og senket skrift, skriftstørrelse, endring av stiler og bakgrunnsfarge. For å gjøre dette, alt i den samme functions.php-filen, før den samme taggen?> legg til følgende kodebit:

function add_more_buttons($buttons) ( $buttons = "hr" ; $buttons = "del" ; $buttons = "sub" ; $buttons = "sup" ; $buttons = "fontselect" ; $buttons = "fontsizeselect" ; $ buttons = "cleanup" ; $buttons = "styleselect" ; $buttons = "backcolor" ; return $buttons ; ) add_filter("mce_buttons_3" , "add_more_buttons");

Etterpå lagrer du filen igjen og flytter den tilbake til serveren, og erstatter den gamle. Vi oppdaterer siden med den visuelle editoren og ser hva vi fikk:

Det var alt for meg, og nå vet du også hvordan du legger til funksjonsknapper inn i WordPress-editoren, og dermed utvide den standard funksjoner! Jeg ønsker alle lykke til! Hei og se deg snart!

Hvordan liker du artikkelen? Kanskje du vet om andre alternativer for å forbedre standardfunksjonene til WordPress visuelle editor? Del dem med blogglesere som kommentarer til dette innlegget.