Rich Text Editor – viiteopas (kaikki käyttäjät)

SISÄLLYSLUETTELO

• Johdanto
• 1 Yleiskatsaus
• 2 Edellytykset ja vaatimukset
• 3 Aloittaminen
  • 3.1 Editorin avaaminen
  • 3.2 Täydellisen työkalurivin laajentaminen
• 4 Ominaisuudet ja toiminnot
  • 4.1 Tekstin muotoilutyökalut
  • 4.2 Tekstin tasaus ja rakenne
  • 4.3 Median lisäämiseen tarkoitetut kuvakkeet
  • 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 rivinsisäinen tyylittely
  • 8.6 Upotetut tyylitiedostot
  • 8.7 Mitä tapahtuu tuetun sisällön ulkopuoliselle sisällölle
  • 8.8 Kuvien leveydet ja responsiiviset kuvat
  • 8.9 CSS:n ja elementtien lisätoiminta
  • 8.10 Mitä tämä tarkoittaa sisällöllesi
• 9 Vianmääritys
  • 9.1 Yleisiä ongelmia
  • 9.2 Puuttuvat työkalurivin toiminnot

Johdanto

Rich Text Editor on sisällöntuotannon työkalu, jota käytetään kaikkialla itslearningissa tekstin muotoiluun ja median liittämiseen. 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 / kouluttajat ja oppijat, 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ä- ja 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 avaaminen

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 laajentaminen

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" -painiketta 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-toimipaikkasi 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 lisäämiseen tarkoitetut kuvakkeet

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

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ä.
	Taulukko: Lisää taulukon.
	Hymiö: Avaa valikoiman hymiöitä lisättäväksi tekstiin.
	Puulinkki: Lisää linkin siihen 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:

• Koodi-painike, 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 tietojen esittämistä varten.

Vaiheet:

1. Napsauta Taulukko-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 tietojen 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 tallennuspainiketta ja puhu.
4. Napsauta lopetuspainiketta, 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 tallennuspainiketta.
4. Napsauta lopetuspainiketta, kun olet valmis.
5. Tallenna tai lataa tallenteesi.

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

5.4 Matemaattisten kaavojen luominen

Tavoite: Lisää matemaattisia merkintöjä ja kaavoja.

Vaiheet:

1. Napsauta iMathEQ-kaavaeditorin kuvaketta.
2. Rakenna yhtälösi kaavaeditorin käyttöliittymän avulla.
3. Napsauta Lisää, kun olet valmis.

Tulos: Ammattimaiset matemaattiset merkinnät 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"-painiketta 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ä järjestystä:

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

Rich Text Editorilla luotu sisä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 asettamiseen painikkeiden, linkkien tai muiden ohjausobjektien 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ä:

• Rivinsisäisiä tyylejä
• Luokkia tai tunnisteita
• Kieli- tai otsikkoattribuutteja
• Kuvan mitat
• 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 rivinsisäiset tyylit

Erittäin rajoitettu poistaa koko style-attribuutin.

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

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

Seuraavan tyyppiset arvot 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

Poistettavat CSS-ominaisuudet:

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

Kun kaikki rivinsisäisen tyylin 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ä tapahtuu tuetun sisällön ulkopuoliselle sisällölle

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ä rivinsisäisestä 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 syöttää prosentuaalisia leveyksiä lähdekoodinäkymässä. Tasoilla Rajoitettu ja Vähemmän rajoitettu tuettuja tapoja ovat:

• Prosenttipohjaiset leveysattribuutit
• Prosenttipohjainen rivinsisäinen 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 CSS:n ja elementtien lisätoiminta

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

Tuettuja ovat myös:

• Nimetyt CSS-värit (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 (pikseliarvojen, prosenttien ja näkymän leveysyksiköiden lisäksi)

Muut 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" -painiketta 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 koulusi / organisaatiosi tekemää käyttöönottoa alustatasolla.

Ratkaisu: Ota yhteyttä hallinnoijatasoiseen käyttäjään ja tarkista, mitkä ominaisuudet on otettu käyttöön alustallasi.

Lisää ohjeresursseja

Onko sinulla lisää kysymyksiä? Aloita kysymällä koulusi / organisaatiosi järjestelmänvalvojalta.

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/