ckeditor demo

by Petr Haluza

HTML

<script src="https://cdn.ckeditor.com/4.5.1/full/ckeditor.js"></script>
<textarea name="editor1" id="editor1" rows="10" cols="80">
HOTOVO - upraveny tlačítka    /editor.config.removeButtons<br><br>
HOTOVO - test vlastní tlačítka s vlastním HTML kódem (bloky popisu - červená tlačítka na konci druhé řady)    /editor.ui.addButton + editor.ui.addButton<br><br>
HOTOVO - zapnut spellcheck (funkční jen v prohlížeči?)    /editor.config.disableNativeSpellChecker<br><br>
HOTOVO - externí css pro popis (test na <span class="red">class=red</span>)    /editor.config.contentsCss<br><br>
<br>
<br>
Probíhá: <br>
Šablony (pokus přes editor.addTemplates)<br>
<br>
<br>

ZBÝVÁ:<br>
CKfinder<br>


</textarea>

CSS

/* DEMO */
@media all and (min-width: 600px) {
.HAP-obr-vlevo { display: flex; }
}

JavaScript

let editor = CKEDITOR.replace("editor1", {
        height: 400,
      });
      editor.config.allowedContent = true;
      editor.config.contentsCss = 'https://www.img4.cz/megadescription/megadescription.css';
      editor.config.disableNativeSpellChecker = false;
      editor.config.removeButtons = 'NewPage,Print,Flash,Smiley,Language,Form,Button,Select,Checkbox,Radio,ImageButton,TextField,HiddenField,Textarea,Blockquote,Font,FontSize,TextColor,BGColor,About';

      editor.ui.addButton('muj_button1', {
        label: 'HAP-obr-vlevo',  command: 'muj_button1',  toolbar: "insert", icon: "https://avatars1.githubusercontent.com/u/5501003"
      });

      editor.addCommand('muj_button1', {
        exec: function(edt) {
          edt.insertHtml("<div class='HAP-obr-vlevo'><div><img src='https://picsum.photos/100'></div><div><h5>Já jsem nadpis</h5><p>Já jsem obyčejný text</p></div></div> <style>@media all and (min-width: 600px) {.HAP-obr-vlevo { display: flex; }}</style> ");
        }
      });
      
      editor.ui.addButton('muj_button2', {
        label: 'HAP-obr-vpravo',  command: 'muj_button2',  toolbar: "insert", icon: "https://avatars1.githubusercontent.com/u/5501004"
      });

      editor.addCommand('muj_button2', {
        exec: function(edt) {
          edt.insertHtml("<div class='HAP-obr-vpravo'><div><h5>Já jsem nadpis</h5><p>Já jsem obyčejný text</p></div><div><img src='https://picsum.photos/100'></div></div> <style>@media all and (min-width: 600px) {.HAP-obr-vpravo { display: flex; }}</style> ");
        }
      });      
      
      
      
      
// NEFUNKČNÍ  Register a templates definition set named "default".
editor.addTemplates( 'default1', {
    // The name of sub folder which hold the shortcut preview images of the
    // templates.
    imagesPath: CKEDITOR.getUrl( CKEDITOR.plugins.getPath( 'templates' ) + 'templates/images/' ),

    // The templates definitions.
    templates: [ {
        title: 'Test šablony',
        image:...