logo   Om CKEditor




Quick Start Guide og dokumentation om opsætning kan ses her: x


CKEditor er en "tekstbehandler" (fås i 3 versioner), der ganske nemt installeres til at erstatte "textarea" felter.


CKE downloades herfra x (Vælg version). Standard synes at passe ganske godt til meddelelser på hjemmesider. Muligheden for at tilknytte billeder bør måske tages ud.


Gem zip-filen eller kør den med det samme. Ved udpak eller kør vælges webserverens rodmappe ( f.eks. c:/xampp/htdocs eller c:/wamp/www). Udpakningen sker til mappen "ckeditor" (der ikke skal være oprettet i forvejen).


I HEAD-delen på de sider der skal anvende CKEditor indsættes link til CKE-programmet:


<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>


Lige under det textarea der skal 'replaces' indsættes et lille script:


<tr><td colspan="2"><textarea id="tekstarea" name="traad_tekst" ROWS="10" COLS="70"></textarea>/lt;/td></tr>
<script type="text/javascript">
CKEDITOR.replace('tekstarea');
</script>


Scriptet linker til textareaet ved en (vilkårlig) ident i id-feltet og i replace funktionen.


CKE har her overskrevet "textarea"-feltet.


ckeditor




htmlentities() og html_entity_decode()


Tekster fra CKE, der er blevet behandlet med htmlentities() før overførsel til database:


$variabel01 = trim ($_POST['variabel01']);
$variabel01 = htmlentities ($variabel01,ENT_QUOTES, "utf-8");


skal pakkes ud med html_entity_decode() før visning:


$variabel01 = html_entity_decode($row['variabel01']);
echo "<tr><td>$variabel01</td></tr>";

eller

$variabel01 = html_entity_decode($variabel01);
echo $variabel01;




<br />


Linieskift "<br />" er i CKEditor godt skjult som SHIFT+ENTER.




Billeder


Selvom CKEditor har en knap til tilknytning af billeder, er den samlede funktionalitet bag den så tvivlsom, at den næppe er brugbar.


Skal der på en side vises både et billede og CKE-genereret tekst bør denne fremgangsmåde i stedet benyttes:


if ($antal == 1)
echo "<img class='billed-right'src='sti til billede/billednavn.jpg' alt=''/>";
$tekst01 = html_entity_decode($row['txt_tekst']);
echo $tekst01;
?>


På linien før indsættelse af CKE-teksten indsættes et link til billedet (fast eller databasestyret). Via CSS floates det til højre (eller venstre).


.billed-right{
float: right;
margin-left: 5px;
}


Metoden tillader kun indsættelse af billeder øverst i CKE-teksten.




Menu


Standard versionen af CKE indeholder default følgende knapper:


ckeKlipKlipper selekteret område til udklipsholder (Ctrl+X)
ckeKopierKopierer selekteret område til udklipsholder (Ctrl+C)
ckeIndsætIndsætter fra udklipsholder som almindelig tekst
ckeIndsæt som ikke-formatteret tekstIndsætter fra udklipsholder medbringnde HTML-formattering.
ckeIndsæt fra WordIndsætter Word-tekst fra udklipsholder uden Word-formattering.
ckeFortrydFortryd sidst indsatte tekst.
ckeAnnuller fortrydGenindsæt det fortrudte.
ckeABCMenu til styring a stavekontrol
ckeIndsæt / rediger hypertekstÅbner vindue til opbygning af klikbar URL, bogmærke eller mail-adresse.
ckeFjern hyperlinkSletter den interaktive kode knyttet til hyperteksten, med lader selve teksten blive tilbage.
ckeBogmærkeÅbner vindue til håndtering af bogmærke.
ckeBilledeÅbner vindue for angivelse af detaljer for og link til eksternt billede (ikke eget lan). Billedet vil blive hentet og vist hos bruger baseret på de angivne detaljer.
Bør ikke anvendes.
ckeTabelÅbner vindue for angivelse af diverse data til opbygning af tabel.
ckeIndsæt vandret stregIndsætter vandret streg.
ckeIndsæt symbolÅbner vindue med ca. 210 tal, bogstaver og symboler til indsættelse ved selektion.
ckeMaksimerToggle for at ændre CKE til fuld skærm og tilbage igen.
ckeKildeViser indlagte data som kildekode med HTML-tags m.v. Alle øvrige knapper er låst. Der kan indtastes direkte til kldekoden.
ckeFedÆndrer til skrivning med fed tekst og ændrer selekteret tekst til fed skrift.
ckeKursivÆndrer til skrivning med kursiv tekst og ændrer selekteret tekst til kursiv skrift.
ckeGennemstregetÆndrer til skrivning med gennemstregning af tekst og ændrer selekteret tekst til gennemstreget skrift.
ckeFjern formateringFjerner formattering fra selekteret område.
ckeTalopstillingOpretter ordnet liste.
ckePunktopstillingOpretter uordnet liste.
ckeFormindsk indrykningRykker listepunkter et listeniveau til venstre.
ckeForøg indrykningRykker andet og følgende listepunkt et niveau til højre.
ckeBlokcitatSætter selekteret tekst i "blockquote"-tag.
ckeTypografiMenu til valg blandt 17 forskellige slags typografi. Den aktuelle vises i stedet for 'Typografi' på knappen.
TypografiHTML-kode
Italic title<h2 style="font-style:italic;">dddd</h2>
Subtitle<h3 style="color:#aaa; font-style:italic">dddd</h3>
Special container<div style="background:#eee;border:1px solid #ccc;padding:5px 10px;">dddd</div>
Marker<span class="marker">dddd</span>
Big<big>dddd</big>
Small<small>dddd</small>
Typewriter<tt>dddd</tt>
Computer code<code>dddd</code>
Keyboard phrase<kbd>dddd</kbd>
Sample text<samp>dddd</samp>
Variable<var>dddd</var>
Deleted text<del>dddd</del>
Inserted text<ins>dddd</ins>
Cited work<cite>dddd</cite>
Inline quotation<q>dddd</q>
Language RTL<span dir="rtl">dddd</span>
Language LTR<span dir="ltr">abcd</span>
ckeNormalMenu til valg blandt 5 forskellige slags formatering. Den aktuelle vises i stedet for 'Typografi' på knappen.
FormateringHTML-kode
Normal<p>dddd</p>
Overskrift 1<h1>dddd</h1>
Overskrift 2<h2>dddd</h2>
Overskrift 3<h3>dddd</h3>
FormateretFormateret<pre>dddd</pre>
ckeom ckeeditorInfo om aktuel CKE version etc.




Ændring i opsætning


Der kan foretages adskillige modifikationer til CKE. Stedet at starte er i filen "config.js":


/**
* @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.html or http://ckeditor.com/license
*/

CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here.
// For complete reference see:
// http://docs.ckeditor.com/#!/api/CKEDITOR.config

// The toolbar groups arrangement, optimized for two toolbar rows.
config.toolbarGroups = [
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ] },
{ name: 'links' },
{ name: 'insert' },
{ name: 'forms' },
{ name: 'tools' },
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'others' },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
{ name: 'styles' },
{ name: 'colors' },
{ name: 'about' }
];

// Remove some buttons provided by the standard plugins, which are
// not needed in the Standard(s) toolbar.
config.removeButtons = 'Underline,Subscript,Superscript';

// Set the most common block elements.
config.format_tags = 'p;h1;h2;h3;pre';

// Simplify the dialog windows.
config.removeDialogTabs = 'image:advanced;link:advanced';
};
























x
x