CKEditorin käyttö.

Sivuston tekstialueita varten järjestelmään on asennettu CKEditor WYSIWYG -editori. Sen ansiosta syötettävää tekstiä on mahdollista muokata erilaisilla tavoilla. On mahdollista muuttaa fontin kokoa, kirjasinta tai väriä. On myös mahdollista luoda linkkejä, listoja tai lisätä kuvia tekstialueelle. 

Leikkaa, kopioi, liitä

Editorin ylimmällä rivillä vasemmalla on Source nappi, tämä vaihtaa editorin lähdekoodi-tilaan. Sen kautta on mahdollista nähdä millaista HTML-koodia editori luo. Normaaliin tilaan palataan painamalla source nappia toisen kerran.

Seuraavana rivillä on leikkaa, kopioi, liitä ja liitä tekstinä. Kopionti ja leikkaus ovat usein pois käytöstä, mikä johtuu selaimen tietoturva-asetuksista, jotka eivät salli tekstin vientiä javascript elementistä leikepöydälle.

Liitä ja liitä tekstinä -toiminnoilla on mahdollista tuoda tekstiä leikepöydältä editoriin. Liitä toiminto ottaa mukaansa lähteestään liitettävän tekstin lisäksi myös tekstin muotoilut, esim fontin väri, koko ja kirjasin tai taustaväri. Tämän vuoksi on usein syytä käyttää liitä tekstinä -toimintoa, joka vie editori ikkunaan ainastaan tekstisisällön.

Etsi ja korvaa, poista muotoilut

Seuraavana ylimmällä rivillä ovat editorin etsi sekä etsi ja korvaa -toiminnot, sanojen tai merkkien etsimistä tekstistä. Korvaa-toiminnolla voi löydettyjen sanojen paikalle voi kirjoittaa muita sanoja.

Seuraavana rivillä on valitse kaikki ja poista muotoilut -toiminnot. Liitettäessä tekstiä toisesta selain-ikkunasta tai Wordista, saattaa huolimattomalla liittämisellä seurata myös tekstin muotoilut. Poista muotoilut -toiminnolla voidaan poistaa muotolutiedot valitusta tekstialueesta.

Lisää kuvia tauluja tai erikoismerkkejä

Viimeisenä ylärivillä ovat toiminnot kuvien, taulujen ja erikoismerkkien lisäämiselle. Painettaessa Image-nappia avautuu työkalu, jolla on mahdollista liittää kuva tekstin joukkoon. 

Kuva voi olla paikallisella palvelimella tai voidaan linkittää myös toisesta verkkosivusta antamalla Image properties ikkunan URL kenttään kuvan osoite. Kuva voidaan tässä yhteydessä myös hakea paikalliselta palvelimelta tai ladata palvelimelle Browse server-napin avulla.

Browse server -nappi avaa uuden ikkunan, jonka kautta voidaan tuoda palvelimelle ladattu kuva image-työkaluun. Jos kuvaa ei ole vielä ladattu, se voidaan viedä palvelimelle upload-toiminnon kautta.

Kun haluttu kuva on löydetty ja valittu tai ladattu palvelimelle, painetaan insert file -nappia, jolloin kuvan tiedot siirtyvät CKEditorin Image-työkaluun.

Noudettu kuva näkyy esikatselu ikkunassa. Kuvalle voidaan määrittää leveys ja korkeus sekä kehys. Hspace ja Vspace määrittävät kuvan marginaalit vaaka- ja pystysuunnassa. Align-kohdistus voi olla joko oikealla tai vasemmalla, jolloin kuvan voi "upottaa" kirjoitettavaan tekstiin. Kun asetukset ovat valmiit, ne hyväksytään painamalla Ok-nappia.

Kuvan asetuksia voi muokata myöhemmin painamalla kuvan päällä oikeaa hiiren nappia ja valitsemalla Image properties.

Tekstin muotoilut

Keskimmäiselllä rivillä voi asettaa valitun tekstin lihavoiduksi, kursiiviksi, alle- tai yliviivatuksi. Tekstin voi myös asettaa alaindeksiin tai yläindeksiin. Lisäksi on mahdollista luoda numeroituja tai numeroimattomia listoja. Tekstin sisennystä voidaan kasvattaa tai pienentää. Tekstin tasaukseen oikealle, keskelle tai vasemmalle on myös mahdollista vaikuttaa.

Alimmalta riviltä voi valita tekstin automaattisen muotoilun. Teksti voi olla normaalia kappaletekstiä tai automaattisesti muotoiltu esimerkiksi otsikoiksi.

Linkit

Keskimmäisen rivin lopusta löytyy linkkityökalu, jolla voidaan luoda valitusta tekstistä hyperlinkki toiselle sivulle omalla sivustolla. Linkki voi myös osoittaa kokonaan toiselle sivustolle.

Linkitettäessä tekstiä toiseen sivustoon on protokollaksi valittava "http://" ja osoitekenttään annettava sivun osoite.

Linkitettäessä toiseen sivuun omalla sivustolla asetetaan Protokolla -valikkoon asetus "<muu>" ja osoitteeksi paikallinen polku. Kuvan esimerkissä luodaan linkki paikalliselle sivulle, jonka koko osoite on http://www.matine.fi/mainosmallit/galleria. Tästä osoitteesta tarvitaan siis ainoastaan osa: "/mainosmallit/galleria"