Texyla editor je, jak praví oficiální stránky, „javascriptový modulární přizpůsobitelný non-wysiwyg editor obsahu webových stránek specializovaný na Texy! syntaxi.“ Používáme ho i tady na Nullpointer.cz a chyběla nám funkce fullscreen editace obsahu. Ve výchozí verzi Texyla tuto možnost nenabízí, nezbývá tedy, než si ji dodělat.

V ideálním případě by výsledkem takového snažení měl být kód, který můžu poslat jako pull request autorovi texyly a ten by ji mohl začlenit do projektu. Texyla má dokonce přesně takovou issue (postarší). V takovém stadiu nicméně moje řešení není, v duchu sloganu tohoto webu jde zatím spíše o to dexempo. Dost řečí, jdeme na věc.

Vytvoření nového tlačítka

Texyla podporuje, alespoň podle dokumentace, jednoduchý způsob jak přidat tlačítko do menu editoru a to nějak takto…

$.texyla.addButton("fullscreen", function () {
        // our new button magic here
});

… s tím, že tlačítko zaregistrujeme do definice Texyly například tímto způsobem…

$("#frmpostForm-body").texyla({
    toolbar: [
        'h1', 'h2', 'h3', 'h4',
        null,
        "fullscreen"
    ],
});

… vytvoříme jazykový překlad – zatím stačí česky – do souboru cs.js přidáme …

btn_fullscreen: "Fullscreen editor",

… a nahrajeme tlačítku do adresáře texyla/icons nějakou tu ikonku.

Tlačí to?

V této fázi máme nové tlačítko a taky nový problém. Tlačítko totiž po stisknutí vyhazuje okno s varováním Function „fullscreen“ is not supported!. Což mi tak na hodinku dvě docela smotalo vousy. Long story short, jak se říká u nás, řešení jsem našel metodou pokus-omyl-díky Bohu a nachází se v souboru texyla.js uvnitř

Texyla.prototype.buttons={

Sem je třeba přidat:

fullscreen:function(){}

Tím máme v podstatě vyhráno, zbývá už jen našemu novému tlačítku dát nějaký smysluplný obsah. V mém případě zatím dělá práci zhruba toto:

$.texyla.addButton("fullscreen", function () {
    var isFullscreen = $('.texyla').hasClass('texyla-fullscreen');
    if(isFullscreen){
        $(".texyla").attr("style", "width: 832px;");
        $("#frmpostForm-body").attr("style", "");
        $(".ui-wrapper").attr("style", "height:100%;");
        $(".texyla").removeClass("texyla-fullscreen");
    } else{
        $(".texyla").attr("style", "");
        $(".preview-wrapper").attr("style", "");
        $("#frmpostForm-body").attr("style", "");
        $(".ui-wrapper").attr("style", "height:100%;");
        $(".texyla textarea").attr("style", "width: 100%;height:100% !important;");
        $(".texyla").addClass("texyla-fullscreen");
    }
});

Vytlačeno jest

A to je prozatím myslím vše, jestli se mi časem podaří udělat rozšíření přímo do Texyly, dám vědět. Pokud tento článek někdo vezme jako odrazový můstek pro totéž, taky dobře.

Komentáře

Přidat komentář

  • Můžete použít Texy syntaxi, HTML není povoleno
  • Například: *kurzíva*, **tučně**, "text odkazu":adresa