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

Donald před 17 dny

I do trust all of the ideas you've presented in your post. They're very convincing and can certainly work. Nonetheless, the posts are very short for beginners. May just you please lengthen them a bit from next time? Thanks for the post.

reagovat

Donald před 17 dny

I do trust all of the ideas you've presented in your post. They're very convincing and can certainly work. Nonetheless, the posts are very short for beginners. May just you please lengthen them a bit from next time? Thanks for the post.

reagovat

Přidat komentář

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