CKEditorin käyttöohje

Laatinut Heikki Ojala

Tämä ohje kaipaa päivitystä -päivitän lähiaikoina.
 

CKEditorin käyttäminen

Käytämme Drupal sivustolla CKEditoria, jolla luodaan sivuille uutta sisältöä; kommentteja, blogeja, uusia sivuja… sillä kirjoitetaan, muotoillaan, lisätään kuvat, linkit jne. Editori toimii 'lähes' samalla tavalla kuin hyvät tekstinkäsittelyohjelmat. Normaalin tekstin kirjoitus siis sujuu ihan siitä vain. Käsittelen tässä ohjeessa yleisimpiä CKEditorin käytössä eteen tulevia asioita, kun haluat elävöittää kommenttia kuvalla, linkillä, lainauksella jne.

Tutustuminen CKEditorin pikapainikkeisiin

Editorin pikapainikkeisiin tutustumiseen kannattaa käyttää jonkin verran aikaa... näin pääsee sen kanssa nopeasti tutuksi... viemällä hiiren painikkeen päälle, tulee näkyviin ko. napin toiminnasta kertova teksti, esim 'kuva'.

Editorin toimintoja voi halutessaan harjoitella myös ohjelman Demo sivulla

Kielen saa siellä tarvittaessa suomeksi klikkaamalla Multi-language_interface painiketta ja  valitsemalla Select a language valikosta;  Finnish.



Kuvassa pikapainikkeet

Kuvan liittäminen kommenttiin

Kuvan liittämiseen kommenttiin on näillä sivuilla käytettävissa eseampia menetelmiä, joita käsittelen seuraavassa.

Kuvan tuominen toisesta URL osoitteesta, vaikkapa toisilta sivuilta.

Jos haluat siirtää kuvan kommenttiinsa jostain toisesta URLista, siis vaikka joiltakin toisita sivuilta, niin...

- Vie hiiren osoitin ko. sivuilta siirrettävän kuvan päälle -> paina hiiren oikeaa nappia ja aukeavasta valikosta valitse hiiren vasemmalla; Copy Image Location (Kopioi kuvan osoite).

- Seuraavaksi klikkaa editotin kuva painiketta ja aukeaa alempana olevassa kuvassa oleva Kuvan ominaisuudet ikkuna, vie hiiren osoitin ikkunan Osoite kenttään -> klikkaa hiiren oikealla ja valitse paste (liitä) ja kuvan osoite siirtyy ikkunan osoitekenttään.

- Sitten vain klikataan ikkunassa OK ja se on siinä.

Testasin kuvan tuomista omilta sivuilta, pastetin osoitteen Kuvan ominaisuudet ikkunan osoitekenttään ja tässä tulos;



Kuvan tuominen tiedostona

Jos tuot kuvan vaikkapa omalta tietarilta, niin toimi seuraavasti;

- Klikkaa kuva painiketta ja taas avautuu tuttu Kuvan ominaisuudet ikkuna



Koska olet tuomassa kuvaa palvelimelle tiedostona, niin

- klikkaa ikkunassa olevaa Selaa palvelinta ikkunaa ja näkyviin tulee File Browser (kuva alla). (Jos et mahdollisesti ole jo aikaisemmin tuonut haluamaasi kuvaa palvelimelle, niin tuo se nyt...



Tuonti tapahtuu yksinkertaisesti klikkaamakka File Browserissa Siirrä nappia, jolloin aukeaa alla olevassa kuvassa näkyvä Browse ikkuna. Klikkaa Browse nappia ja pääset valitsemaan omalta masiinaltasi haluamasi kuvatiedoston.

- Klikkaa kansiossasi po. tiedostoa ja sitten sitten Avaa, jolloin valitun tiedoston nimi ilmestyy Browse ikkunan File kenttään.

- Sitten klikkaa Siirrä nappia ja kuva siirtyy Spamforumin palvelimella olevaan omaan kansioosi ja näkyy palvelimelle tuomiesi tiedostojen valikossa.

- Tämän jäkeen kaksoisklikkaa  File Browser valikossasi haluamaasi kuvatiedostoa, niin se tukee ensin jo tuttuun Kuvan oinaisuudet ikkunaan,

- Sitten vain klikkaat sen ikkunan OK painiketta, niin kuva ilmestyy kommenttiisi sille paikalle, mihin olet 'hoputtimen' asettanut.

Kommentissa jo olevan kuvan kokoa voi editorilla muuttaa;
- Klikkaa hiiren vasemmalla kuvaa aktivoidaksesi sen
- Klikkaa aktivoitua kuvaa hiiren oikealla
- Valitse aukeavasta valikosta Kuvan ominaisuudet, niin avautuu tuttu Kuvan ominaisuudet ikkana, jossa muutat kovan korkeus / leveys arvot halutuksi
- Sitten klikkaa OK ja muutos on valmis



Toinen tapa kuvatiedoston tuomiseen palvelimelle

- Klikkaa Liitetiedostot linkkiä

- Avautuu alla olevan kuvan mukainen ikkuna

- Klikkaa Browse nappia

- Valitse koneelta kansiosta hakuamasi kuvatiedosto ja

- Klikkaa Avaa ja tiedoson nimi ilmestyy Drowsen kenttään

- Sen jälkeen klikkaa Liitä ja tiedosto siirtyy palvelimelle osoitteeseen, joka...



... näkyy tällä menetelmällä tuotujen tiedostojen, jokaisen alapuolella (kuva alla)

- Klikkaa editorin Kuva painiketta ja tuttuun tyyliin avautuu Kuvan ominaisuudet-ikkuna

- Vie tuo tiedoston alla oleva osoite Copy-Paste (Kopioi-liitä) menetelmällä Kuvan Ominaisuudet ikkunan Osoite kenttään

- Klikkaa ikkunan OK nappia ja kuva siirtyy kommentiisi paikalle johon olet 'hoputtimen' kohdistanut.





Tässä menetelmässä nuo tiedostojen nimet jäävät yleensä linkeiksi kommenttisi alaosaan.

Omakohtaisesti suosin ensiksi esittämääni kuvatiesoston tuontitapaa... siinä kuvatiedostot menevät omaan henkilökohtaiseen kansioon.

Linkin liittäminen kommenttiin

CKEditor laittaa automaattisesti linkiksi, jos kirjoittaa sivuston täydellisen osoitteen esim. http://www.datatuki.net/html/welcome.php.

Editori tukee myös vapaasti nimettyjä linkkejä. Vaikkapa jos haluaa kirjoittaa; kelloverstas ja saada toimimaan sen linkkinä haluamalleen sivustolle, se onnistuu näin;

- Maalaa sana kelloverstas (tai mikä se sinulla onkaan) ja klikkaa editorin Linkki näppäintä...

- Avautuu Linkki-ikkuna

- Valitse siitä Linkkityyppi; Osoite

- Kirjoita Linkki-ikkunaan sivuston osoite... helpoiten se ehkö onnistuu menemällä ko. sivuille ja Copy-Pastettamalla sivuston osoitekentästä osoite Linkki-ikkunan osoite kenttään.

- Klikkaa vielä Linkki-Ikkunassa OK ja linkki on valmis.

Halutessaan voi CKEditorilla tehdä linkin haluamaansa osoitteeseen myös kuvasta;

- Aktivoi kuva klikkaamalla sitä

- Klikkaa Linkki painiketta ja Linkki-ikkuna tulee esiin

- Kirjoita haluamasi osoite Linkki-ikkunan osoitekenttään

- Klikkaa Linkki-ikkunassa OK ja se on siinä


Linkin avautuminen uuteen ikkunaan

Oletuksena linkit avautuvt samaan ikkunaan. Linkin saa halutessaan avautumaan myö uuteen ikkunaan, kun valitsee Linkki-ikkanan ylävalikosta Kohde ja valitsee kohteeksi 'Uusi ikkuna (_blank), alla olevan kuvan mukaisesti.

Lainaus

Jos haluat lainata kommenttiisi teksitiä, menettele näin;

- Klikkaa työkalupainikerivistön lainaus-nappia (nappi jossa on lainausmerkki " )

Copy-pasteta lainattu teksti, lainattu teksti siirtyy alkamaan sisemmältä,  lainatun tekstin liittämisen jälkeen lisää enterillä tyhjä rivi ja paina uudelleen lainausnappia

näin lainaus päättyy ja teksti alkaa taas normaalista paikasta.

Tällä sisustolla lainauksen alkuun sekä loppuun tulee iso  " kainausmarkki, lainattu teksti muuttuu automaattisesti kursiivoiduksi (vinoksi) ja lainauksen päättämisen jälkeen teksti muuttuu normaaliksi.

Liittäessäsi kopioimaasi lainaustekstiä kommenttiin, aukeaa yleensä alla olevassa kuvassa näkyvä Liitä ikkuna,



Noudata ikkunan ohjetta ja kopioimasi teksti liittyy kommenttiisi.

 

Sivun alkuun

Drupal ohjeita valintasivulle

9.7.2011