Rich Text Editor – viiteopas

SISÄLLYSLUETTELO

• Johdanto
• 1 Yleiskatsaus
• 2 Edellytykset ja vaatimukset
• 3 Aloittaminen
  • 3.1 Editorin käyttö
  • 3.2 Täydellisen työkalurivin avaaminen
• 4 Ominaisuudet ja toiminnot
  • 4.1 Tekstin muotoilutyökalut
  • 4.2 Tekstin tasaus ja rakenne
  • 4.3 Median integrointikuvakkeet
  • 4.4 Lisätoiminnot
  • 4.5 Näyttöasetukset
• 5 Vaiheittaiset työnkulut
  • 5.1 Mediasisällön upottaminen
  • 5.2 Taulukoiden lisääminen
  • 5.3 Äänen ja videon tallentaminen
  • 5.4 Matemaattisten kaavojen luominen
• 6 Asetukset ja mukauttaminen
  • 6.1 Kielen valinta
  • 6.2 Lähdekoodinäkymä
• 7 Tekniset tiedot
  • 7.1 Editorin versiot
  • 7.2 Linkkien upottamisen toiminta
  • 7.3 Tuetut mediatyypit
• 8 HTML- ja CSS-suodatus
  • 8.1 Sallitut HTML-koodin tasot
  • 8.2 Erittäin rajoitettu
  • 8.3 Rajoitettu
  • 8.4 Vähemmän rajoitettu
  • 8.5 CSS ja inline-tyylit
  • 8.6 Upotetut tyylitiedostot
  • 8.7 Mitä ei-tuetulle sisällölle tapahtuu
  • 8.8 Kuvien leveydet ja responsiiviset kuvat
  • 8.9 Testauksella vahvistetut lisähavainnot
  • 8.10 Mitä tämä tarkoittaa sisältösi kannalta
• 9 Vianmääritys
  • 9.1 Yleisiä ongelmia
  • 9.2 Puuttuvat työkalurivin toiminnot
• 10 Lisäresurssit

Johdanto

Rich Text Editor on sisällöntuotannon työkalu, jota käytetään kaikkialla itslearningissa tekstin muotoiluun ja median integrointiin. Käytä Rich Text Editoria luodessasi kurssisisältöä, tehtävänantoja, keskusteluja, ilmoituksia tai muuta tekstipohjaista materiaalia. Editori tarjoaa tekstinkäsittelytoimintojen lisäksi työkaluja videoiden upottamiseen, äänen tallentamiseen, matemaattisten kaavojen lisäämiseen ja kurssin resursseihin linkittämiseen.

1 Yleiskatsaus

Opettajat ja opiskelijat, joilla on asianmukaiset kurssioikeudet, voivat käyttää Rich Text Editoria luodessaan tai muokatessaan sisältöä. Editoria käytetään lukuisissa paikoissa alustalla, ja se näkyy joko täydellisenä tai supistettuna versiona sen mukaan, mistä se avataan.

2 Edellytykset ja vaatimukset

Vaadittavat käyttöoikeudet:

• Muokkausoikeudet kyseisellä kurssialueella (vaihtelee sijainnin mukaan)
• Median lataamista varten: riittävä tiedostojen tallennuskiintiö

Järjestelmä-/selainvaatimukset:

• Nykyaikainen selain (Chrome, Firefox, Safari, Edge)
• Mikrofonin käyttöoikeus (äänitallennusominaisuuksia varten)
• Kameran käyttöoikeus (videotallennusominaisuuksia varten)
• Vakaa internetyhteys median lataamista varten

3 Aloittaminen

3.1 Editorin käyttö

Rich Text Editor tulee näkyviin automaattisesti, kun luot tai muokkaat sisältöä itslearningissa. Törmäät siihen useissa paikoissa alustalla, mutta joissakin paikoissa saatat kohdata uudemman version, jossa on vähemmän vaihtoehtoja.

• Kurssin sisältösivut
• Tehtävänannon luominen
• Keskusteluviestit
• Ilmoitukset (uusi, yksinkertaistettu versio)
• Viestit (uusi, yksinkertaistettu versio)

3.2 Täydellisen työkalurivin avaaminen

Joissakin tapauksissa saatat aluksi nähdä editorista supistetun version, jossa kaikki toiminnot eivät näy.

Kaikkien editorin toimintojen käyttäminen:

1. Etsi työkaluriviltä "Lisää vaihtoehtoja" -painike.
2. Napsauta "Lisää vaihtoehtoja" laajentaaksesi piilotetut kuvakkeet.

Täydellinen työkalurivi näyttää sitten kaikki käytettävissä olevat muokkaustoiminnot.

4 Ominaisuudet ja toiminnot

Huomaa, että kaikki toiminnot eivät ole aina kaikkien käyttäjien käytettävissä. Tämä voi riippua itslearning-sivustosi asetuksista.

4.1 Tekstin muotoilutyökalut

Työkalurivin ensimmäinen osa sisältää tavalliset tekstin muotoilutoiminnot. Nämä symbolit ja toiminnot ovat todennäköisesti tuttuja muista tekstinkäsittelyohjelmista.

Käytettävissä olevat muotoiluvaihtoehdot:

• Fontin valinta
• Tekstin koko (normaali, otsikko jne.)
• Lihavointi, kursivointi, alleviivaus
• Tekstin väri
• Taustan väri
• Erikoismerkit (Ω)
• Tekstin tasaus (vasen, keskitetty, oikea, tasattu)

4.2 Tekstin tasaus ja rakenne

Seuraava osa sisältää työkaluja sisällön jäsentämiseen.

Rakenteen toiminnot:

• Alaindeksi (rivin alaosassa oleva teksti)
• Yläindeksi (rivin yläosassa oleva teksti)
• Lisää sisennystä
• Vähennä sisennystä
• Numeroidut luettelot
• Luettelomerkit
• Kielimääritelmä tekstiosioille

4.3 Median integrointikuvakkeet

Työkalurivillä on useita kuvakkeita erilaisten medioiden ja sisältöjen integrointiin.

Kuvake	Toiminto
	Ankkuri: Asettaa tekstiin merkin ("ankkurin"), johon voit viitata suoraan linkillä.
	Linkki: Lisää linkin, esimerkiksi toiseen verkkosivuun tai ankkuriin. Kun liität linkin, editori yrittää upottaa linkin takana olevan sisällön. On kolme mahdollista tulosta: Upotuskoodi voidaan hakea automaattisesti (Upota-toiminnon kautta). Linkin takana ei ole upotuskoodia, mutta editori voi luoda objektin sivun metatietojen perusteella. Objektia ei voida luoda, ja linkki lisätään tavallisena linkkinä.
	Taulu: Lisää taulukon.
	Hymiö: Avaa valikoiman hymiöitä lisättäväksi tekstiin.
	Puulinkki: Lisää linkin kurssin resurssiin, jossa olet.
	Tiedosto kohteesta "Omat verkkotiedostot": Asettaa linkin tiedostoon, joka sijaitsee henkilökohtaisessa tallennustilassasi itslearningissa.
	Kuva: Lisää kuvan tietokoneelta tai itslearningin tiedostoistasi.
	Äänitallennus: Täällä voit tallentaa ääntä tai ladata äänitiedoston.
	Videotallennus: Täällä voit tallentaa videon tai ladata videotiedoston.
	iMathEQ-kaavaeditori: Lisää matemaattisia symboleja ja kaavoja.
	Upota video: Täällä voit upottaa videon toiselta verkkosivulta.
	Teams-kokous: Täällä voit luoda kurssillesi Teams-kokouksen ja lisätä sen linkin tälle sivulle.
	Google Meet: Täällä voit luoda kurssillesi Meet-huoneen ja lisätä sen linkin tälle sivulle.
	Laajennuskirjasto: Täällä pääset käsiksi alustallesi käyttöön otettuihin lisätoimintoihin.

4.4 Lisätoiminnot

Työkalurivin seuraava osa sisältää:

• Kumoa (peruuta toimintoja editori-ikkunassa)
• Tee uudelleen (etene toiminnoissa)
• Leikkaa, Kopioi ja Liitä -pikanäppäimet

4.5 Näyttöasetukset

Viimeiset kuvakkeet ovat:

• Painike "Koodi", joka näyttää sisältösi HTML-koodimuodossa
• Saavutettavuuden tarkistuspainike
• Koko näytön editori, erityisen hyödyllinen pienemmillä näytöillä

5 Vaiheittaiset työnkulut

5.1 Mediasisällön upottaminen

Tavoite: Lisää ulkoista videota tai mediasisältöä.

Vaiheet:

1. Kopioi videon tai mediasisällön URL-osoite.
2. Napsauta Linkki- tai Upota video -kuvaketta.
3. Liitä URL-osoite.
4. Editori yrittää upottaa sisällön automaattisesti.
5. Jos upottaminen epäonnistuu, linkki näkyy tavallisena hyperlinkkinä.

Tulos: Upotettu mediasisältö näkyy suoraan sivullasi, tai linkki ulkoiseen sisältöön.

5.2 Taulukoiden lisääminen

Tavoite: Luo jäsennelty taulukko tiedon esittämistä varten.

Vaiheet:

1. Napsauta Taulu-kuvaketta.
2. Valitse rivien ja sarakkeiden määrä.
3. Napsauta lisätäksesi taulukon.
4. Täytä sisältösi.
5. Käytä taulukon ominaisuuksia muotoilun säätämiseen tarpeen mukaan.

Tulos: Muotoiltu taulukko tiedon järjestämiseen.

5.3 Äänen ja videon tallentaminen

Tavoite: Luo tallennettua sisältöä suoraan itslearningissa.

Äänen tallentamista varten:

1. Napsauta Äänitallennus-kuvaketta.
2. Salli mikrofonin käyttöoikeus, jos sitä pyydetään.
3. Napsauta tallenna ja puhu.
4. Napsauta lopeta, kun olet valmis.
5. Tallenna tai lataa tallenteesi.

Videon tallentamista varten:

1. Napsauta Videotallennus-kuvaketta.
2. Salli kameran ja mikrofonin käyttöoikeus, jos sitä pyydetään.
3. Napsauta tallenna.
4. Napsauta lopeta, kun olet valmis.
5. Tallenna tai lataa tallenteesi.

Tulos: Suoraan itslearningissa luotu upotettu ääni- tai videosisältö.

5.4 Matemaattisten kaavojen luominen

Tavoite: Lisää matemaattista merkintää ja kaavoja.

Vaiheet:

1. Napsauta iMathEQ-kaavaeditorin kuvaketta.
2. Käytä kaavaeditorin käyttöliittymää yhtälösi rakentamiseen.
3. Napsauta Lisää, kun olet valmis.

Tulos: Ammattimainen matemaattinen merkintä sisällössäsi.

6 Asetukset ja mukauttaminen

6.1 Kielen valinta

Määritä, mitä kieltä käytetään tiettyjä tekstiosioita kirjoitettaessa. Tämä auttaa oikeinkirjoituksen tarkistuksessa ja saavutettavuustoiminnoissa.

Kielen asettaminen:

1. Valitse teksti.
2. Valitse kieli tasausosion kielivalikosta.
   
3. Oikeinkirjoituksen tarkistus käyttää valittua kieltä kyseiselle tekstille.

6.2 Lähdekoodinäkymä

Kokeneet käyttäjät voivat tarkastella ja muokata HTML-lähdekoodia suoraan.

Lähdekoodinäkymän avaaminen:

1. Napsauta "Koodi"-painiketta työkalurivin oikeassa reunassa.
2. Tarkastele tai muokkaa HTML-koodia.
3. Napsauta "Koodi" uudelleen palataksesi visuaaliseen muokkaustilaan.

Käyttötapaukset:

• Muotoilun hienosäätö
• Näyttöongelmien vianmääritys
• Puhtaan HTML-koodin kopiointi muualla käytettäväksi

7 Tekniset tiedot

7.1 Editorin versiot

Rich Text Editor voi näkyä supistettuna tai täydellisenä versiona itslearningin kontekstista riippuen. Supistettu versio näyttää perusmuotoilutoiminnot, kun taas täydellinen versio näyttää kaikki käytettävissä olevat työkalut.

7.2 Linkkien upottamisen toiminta

Kun liität URL-osoitteita, editori noudattaa tätä hierarkiaa:

1. Ensimmäinen yritys: Hae upotuskoodi automaattisesti.
2. Toinen yritys: Rakenna objekti sivun metatietojen perusteella.
3. Viimeinen vaihtoehto: Näytä tavallisena hyperlinkkinä.

Tämä toimintatapa varmistaa, että sisältö näkyy parhaalla mahdollisella tavalla, kun upottaminen on tuettu, ja säilyttää toiminnallisuuden silloin, kun se ei ole tuettu.

7.3 Tuetut mediatyypit

Editori tukee:

• Tavallisia verkkovideomuotoja upottamisen kautta
• Äänitallenteita yleisissä muodoissa (MP3, M4A)
• Videotallenteita yleisissä muodoissa (MP4, WebM)
• Kuvia (JPEG, PNG, GIF)
• Ulkoista sisältöä tuetuilta alustoilta (YouTube, Vimeo jne.)

8 HTML- ja CSS-suodatus

Muotoiltu tekstisisältö näytetään muille käyttäjille osana itslearningin käyttöliittymää. Rajoittamatonta HTML- ja CSS-koodia voitaisiin käyttää skriptien tai muun aktiivisen sisällön suorittamiseen, sisällön lataamiseen epäluotettavista ulkoisista lähteistä, sisällön asetteluun painikkeiden, linkkien tai muiden hallintaelementtien päälle, itslearningin käyttöliittymän osien piilottamiseen tai jäljittelyyn, sivun asettelun muuttamiseen tekijän sisältöalueen ulkopuolella, tai käyttäjien seurantaan ulkoisten resurssien kautta.

Tästä syystä itslearning tarkistaa HTML-elementit, attribuutit ja CSS:n sisältöä tallennettaessa. Suodatus koskee työkalurivillä luotua, lähdekoodinäkymässä syötettyä, toisesta sovelluksesta liitettyä tai toisesta järjestelmästä tuotua sisältöä.

8.1 Sallitut HTML-koodin tasot

Tasot ovat kumulatiivisia:

• Rajoitettu sisältää elementit, jotka ovat käytettävissä tasolla Erittäin rajoitettu.
• Vähemmän rajoitettu sisältää elementit, jotka ovat käytettävissä tasolla Rajoitettu.

8.2 Erittäin rajoitettu

Sallitut elementit:

Sallitut attribuutit: Ei mitään.

Tämä tarkoittaa, että Erittäin rajoitettu ei säilytä:

• Inline-tyylejä
• Luokkia tai tunnisteita
• Kieli- tai otsikkoattribuutteja
• Kuvien mittasuhteita
• Linkkejä tai linkkien kohteita
• Editorin sisäisiä data-attribuutteja

Kuvat, taulukot, otsikot, linkit, ääni, video ja upotetut kehykset poistetaan tällä tasolla.

8.3 Rajoitettu

Rajoitettu sisältää kaikki tason Erittäin rajoitettu elementit ja lisää seuraavat.

Media ja linkit:

oembed, video, audio, source, img, a

Teksti ja semanttinen rakenne:

abbr, address, article, aside, bdi, bdo, cite, code, del, details, dfn, figcaption, figure, ins, kbd, mark, meter, q, s, samp, section, summary, time, wbr, blockquote

Ruby-merkinnät:

ruby, rb, rp, rt, rtc

Taulukot:

table, caption, col, colgroup, thead, tbody, tfoot, tr, td, th

Luettelot:

ol, ul, dl, li, dt, dd

Säilöt, otsikot ja erottimet:

span, div, h1, h2, h3, h4, h5, h6, hr

Tekstin sijoittelu ja vanhat muotoilutavat:

sup, sub, big, small, font, align, vspace, hspace

Matemaattinen sisältö:

math, mrow, mo, mtable, mtr, mtd, mi, mtet, munder, mn, mtext, mfrac, msubsup, munderover, mover, msup, msub, msqrt, mroot

Sallitut attribuutit:

Media, linkit ja upotettu sisältö:

controls, loop, preload, autoplay, muted, frameborder, sandbox, target, src, type, alt, title, allowfullscreen, mozallowfullscreen, webkitallowfullscreen

Mitat, suunta, taulukot ja luettelot:

hspace, width, height, align, vspace, border, dir, valign, colspan, cellspacing, cellpadding, rowspan, start

Tyylit ja kieli:

color, style, lang

Editorin ja sisällön sisäiset attribuutit:

data-link-id, data-link-target-element-id, data-richtextfile-id, data-richtextfile-tempfile-filerepoid, data-plugin-settings, data-mathml, data-tex

Linkkikohteet, joissa käytetään attribuuttia href säilytetään myös. Linkkikohteita käsitellään erillään rajallisesta attribuuttiluettelosta, ja niihin voidaan soveltaa lisäksi URL-osoitteiden turvatarkistuksia.

8.4 Vähemmän rajoitettu

Vähemmän rajoitettu sisältää kaiken tason Rajoitettu sisällön ja sallii lisäksi upotetut kehykset elementillä iframe.

Se lisää myös seuraavat attribuutit:

class, id, size, face, font, data-slideshow-settings

Tämä sallii:

• Luokkia ja tunnisteita säilytetylle sisällölle
• Lisäksi vanhaa fonttimuotoilua
• Tuetun editoritoiminnon luomia diaesitysasetuksia
• Upotettuja kehyksiä

8.5 CSS ja inline-tyylit

Erittäin rajoitettu poistaa koko inline style -attribuutin.

Rajoitettu ja Vähemmän rajoitettu säilyttävät inline-tyylit, mutta sisältö kulkee erillisen CSS-turvasuodattimen läpi.

Vahvistetut säilytettävät CSS-ominaisuudet:

color, background-color, font-size, font-family, text-align, margin, margin-left, padding, border, border-collapse, border-spacing, width, height, max-width

Nykyinen testaus vahvistaa myös, että seuraavat arvotyypit säilytetään tarvittaessa:

• Pikseliarvoja
• Kokonaislukuina ja desimaaleina ilmaistuja prosentteja
• Näkymän leveysyksiköitä (vw)
• Automaattinen korkeus
• Lasketut leveyslausekkeet (calc)
• Useita margin- ja padding-arvoja
• Heksadesimaaliväriarvoja

Esimerkkejä responsiivisesta kuvien tyylittelystä, joka säilyy tasoilla Rajoitettu ja Vähemmän rajoitettu:

• Prosentuaalinen leveys
• Enintään 100 prosentin leveys
• 100 prosentin leveys
• Automaattinen korkeus

Poistetut CSS-ominaisuudet:

display, position, top, left, z-index, opacity, object-fit, aspect-ratio

Kun kaikki inline style -tyylin sisällä olevat määritykset hylätään, elementille voi jäädä tyhjä style-attribuutti.

8.6 Upotetut tyylitiedostot

Upotettuja tyylitiedostoja ja style-elementtejä ei tueta tasoilla Erittäin rajoitettu, Rajoitettu tai Vähemmän rajoitettu.

8.7 Mitä ei-tuetulle sisällölle tapahtuu

Lopputulos riippuu suodatettavan sisällön tyypistä:

• Ei-tuettu säilöelementti poistetaan yleensä, mutta sen sisältämä teksti säilyy.
• Ei-tuettu kuva tai muu elementti, jolla ei ole sisältämää tekstiä, saattaa hävitä kokonaan.
• Ei-tuetut attribuutit poistetaan muutoin tuetusta elementistä.
• Ei-tuetut CSS-määritykset poistetaan muutoin säilytettävästä inline-tyylistä.
• HTML-kommentit poistetaan.
• Attribuuttien järjestys, tyhjätila ja tyhjät totuusarvoattribuutit voidaan normalisoida sisältöä tallennettaessa.

8.8 Kuvien leveydet ja responsiiviset kuvat

Täydellisen editorin Kuvan ominaisuudet -valintaikkuna hyväksyy numeerisia leveys- ja korkeusarvoja. Se ei tarjoa vaihtoehtoa prosentuaaliselle leveydelle.

Kokeneet käyttäjät voivat asettaa prosentuaalisia leveyksiä lähdekoodinäkymän kautta. Vahvistettuja tuettuja tapoja tasoilla Rajoitettu ja Vähemmän rajoitettu ovat:

• Prosenttipohjaisia leveysattribuutteja
• Prosenttipohjainen inline-leveys
• Enintään 100 prosentin leveys
• 100 prosentin leveys automaattisella korkeudella

Erittäin rajoitettu ei säilytä kuvia.

Lopulliseen näkyvään kokoon voi vaikuttaa myös ympäröivän sivun asettelu ja tuotteen tyylitiedosto.

8.9 Testauksella vahvistetut lisähavainnot

Vahvistetut lisäksi säilytettävät CSS-ominaisuudet:

Myös vahvistettu:

• Nimettyjä CSS-värejä (esimerkiksi tomato, lightyellow), ei pelkästään heksadesimaaliarvoja
• currentColor
• rgba() ja hsla(), mukaan lukien alfakanava (läpinäkyvyys)
• Lisää pituusyksiköitä: em, rem, pt, cm, ch (jo aiemmin vahvistettujen pikseliarvojen, prosenttien ja näkymän leveysyksiköiden lisäksi)

Vahvistetut lisäksi poistettavat CSS-ominaisuudet:

Elementtien ja attribuuttien käyttäytymistä koskevat huomautukset:

8.10 Mitä tämä tarkoittaa sisältösi kannalta

Yllä olevat osiot kuvaavat suodatinta teknisin termein. Tämä osio kääntää samat havainnot yksinkertaisiksi kysymyksiksi siitä, mitä voit todella luoda, ilman että sinun tarvitsee lukea koodia.

9 Vianmääritys

9.1 Yleisiä ongelmia

Ongelma: Editorin työkalurivi on puutteellinen tai siitä puuttuu toimintoja

Ratkaisu:

1. Etsi "Lisää vaihtoehtoja" -painike.
2. Napsauta "Lisää vaihtoehtoja" laajentaaksesi piilotetut kuvakkeet.
3. Jos toiminnot eivät edelleenkään ole käytettävissä, tarkista käyttöoikeutesi sisältöalueelle.

Ongelma: Liitetty sisältö näkyy odottamattomasti muotoiltuna

Ratkaisu:

1. Tarkastele HTML-koodia lähdekoodinäkymässä.
2. Harkitse liittämistä ensin pelkkänä tekstinä ja muotoile sen jälkeen uudelleen.
3. Käytä Kumoa-toimintoa (Ctrl+Z / Cmd+Z), jos muotoilu menee pieleen.

Ongelma: Videota ei voi upottaa ulkoisesta lähteestä

Ratkaisu:

1. Tarkista, että videon URL-osoite on oikein.
2. Tarkista, että ulkoinen alusta tukee upottamista.
3. Jos upottaminen epäonnistuu, linkki toimii silti tavallisena hyperlinkkinä.
4. Vaihtoehto: lataa videotiedostot suoraan, jos upottaminen ei ole käytettävissä.

9.2 Puuttuvat työkalurivin toiminnot

Ongelma: Laajennuskirjaston tai integraatioiden (Teams, Google Meet) kuvakkeet eivät näy

Syy: Nämä ominaisuudet edellyttävät oppilaitoksesi tekemää käyttöönottoa alustatasolla.

Ratkaisu: Ota yhteyttä itslearning-hallinnoijaasi ja tarkista, mitkä ominaisuudet on otettu käyttöön alustallasi.

10 Lisäresurssit

Lisää ohjeresursseja
Onko sinulla lisää kysymyksiä? Aloita kysymällä oppilaitoksesi hallinnoijalta.

Tuotepäivitykset
Pysy ajan tasalla itslearningin uusimmista julkaisuista: https://itslearning.com/product-updates

Palvelun tila
Tarkista itslearning-palveluiden nykyinen tila: https://status.itslearning.com/

Ideaportaali
Jaa ideasi ja auta muovaamaan itslearningin tulevaisuutta: https://ideas.itslearning.com/

Roadmap
Tutustu roadmapiimme: https://itslearning.com/global/roadmap/