Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Diskuze: WYSIWYG Editor pre databázu

Aktivity
Avatar
Marek Mozola
Člen
Avatar
Marek Mozola:6.1.2018 15:19

Zdravím , po menšom hľadaní na nete som sa rozhodol, že sa radšej informujem tu. Hľadám nejaký WYSIWYG editor(resp. editor v ktorom sa dá editovať obsah textu, v podstate by mi stačil editor podobný tomu, čo je tu).
Potrebujem ho v dvoch prípadoch (na dvoch weboch). V prvom prípade to bude niečo ako fórum, teda viac užívateľov, výstup sa ukladá do db a vypisuje sa taktiež z db.. V druhom prípade ide o CMS, v ktorom to upravuje v podstate jeden človek, výstup sa taktiež ukladá do db a vypisuje sa z db, rozdiel je však v tom že v tomto druhom prípade sa používa bootstrap(čo myslím že to nijak ovplyvňovať nebude). Ide mi hlavne o to, aby to bolo niečo ako formulár, a aby sa to dalo jednoducho cez POST odoslať. Vedel by mi niekto prosím s tým pomôcť? Za odpovede ďakujem.

 
Odpovědět
6.1.2018 15:19
Avatar
David Moškoř:6.1.2018 18:04

A chceš, aby to byl přímo WYSIWYG (něco, jako word), nebo aby se tučnost, kurzíva atd. vkládaly pomocí BBkódů ([B][/B]), něco jako tady, jenom místo BBkódů jsou tu hvězdičky atd...?

Nahoru Odpovědět
6.1.2018 18:04
Život je příliš krátký na to, abyste vymýšleli smysluplné názvy proměnných...
Avatar
David Moškoř:6.1.2018 18:10

Mužeš zkusit přeba Froalu: https://www.froala.com/wysiwyg-editor
Ukázka Froaly zde: https://codepen.io/…a/pen/PpgxGL

Akceptované řešení
+20 Zkušeností
+2,50 Kč
Řešení problému
Nahoru Odpovědět
6.1.2018 18:10
Život je příliš krátký na to, abyste vymýšleli smysluplné názvy proměnných...
Avatar
Petr Čech
Tvůrce
Avatar
Odpovídá na Marek Mozola
Petr Čech:6.1.2018 18:12

Já používám https://alex-d.github.io/Trumbowyg/
Případně tinymce community

Nahoru Odpovědět
6.1.2018 18:12
the cake is a lie
Avatar
jakubho
Člen
Avatar
jakubho:6.1.2018 22:17

TinyMCE je super, ale nevím jestli to pro tvoje potřeby není trochu overkill, jestliže říkáš že ti stačí v podstatě jen to co je tady na itnetworku.

Nahoru Odpovědět
6.1.2018 22:17
Chyba-Jediná jistota v životě programátora.
Avatar
Marek Mozola
Člen
Avatar
Marek Mozola:6.1.2018 23:20

Najviac sa mi páči asi ten Trumbowyg, len nikde som nenašiel nejaké demo kde je to celé funkčne ukázane s formulárom ktorý sa odosiela cez POST.. Našiel som iba nejakú starú verziu kde to je ako textarea, ale to je z roku pána. Inak bude možné potom spätne, z databáze vložiť formátovaný text do toho editora?

 
Nahoru Odpovědět
6.1.2018 23:20
Avatar
David Moškoř:6.1.2018 23:43

Ano bude, ale nejsem si jistý jestli dokážeš rozpoznat jestli je kód vygenerovaný editorem Trumbowyg nebo jestli uživatel napsal kód sám. To by potom bylo hodně nebezpečné, proto radši používám BBkódy...

Nahoru Odpovědět
6.1.2018 23:43
Život je příliš krátký na to, abyste vymýšleli smysluplné názvy proměnných...
Avatar
Marek Mozola
Člen
Avatar
Odpovídá na Marek Mozola
Marek Mozola:6.1.2018 23:46

Nejak sa mi poradilo ho rozchodiť, len mi to funguje nejak divne. Trebarz tučný text môžem dať len vtedy, keď označím nejaký text a kliknem na to B, ale keď kliknem na to B a niečo napíšem tak sa to akoby neaktivuje. A keď už niečo označím tučným, tak všetok ďalší text je tučný a nedá sa to vypnúť. Je to chyba u mňa, alebo to tak má byť?

 
Nahoru Odpovědět
6.1.2018 23:46
Avatar
Odpovídá na Marek Mozola
David Moškoř:6.1.2018 23:53

Na té stránce si editor můžeš vyzkoušet, tak se podívej jestli se to děje i tam nebo pouze u tebe.

Nahoru Odpovědět
6.1.2018 23:53
Život je příliš krátký na to, abyste vymýšleli smysluplné názvy proměnných...
Avatar
Petr Čech
Tvůrce
Avatar
Odpovídá na David Moškoř
Petr Čech:7.1.2018 11:28

Jestli musíš řešit, jestli do toho napsal kód uživatel nebo jestli to vygeneroval editor, je něco špatně. Uživatelský vstup by měl být vždy neprůstřelně ošetřen. Je naprosto v pohodě přijímat HTML, jen se musíš ujistit, že to je OK.
Já na to používám tuhle knihovnu: http://htmlpurifier.org/

Nahoru Odpovědět
7.1.2018 11:28
the cake is a lie
Avatar
Marek Mozola
Člen
Avatar
Marek Mozola:7.1.2018 11:58

Tak som sa nakoniec rozhodol asi pre tú froalu, ale vysvetlí mi niekto, ako môžem cez post odoslať údaje z divu?

 
Nahoru Odpovědět
7.1.2018 11:58
Avatar
Marek Mozola
Člen
Avatar
Marek Mozola:7.1.2018 15:08

Podarilo sa mi to, všetko funguje, až na to, že defaultne je ten align nastavený na stred, proste idem písať a defaultne mi tam nastaví align na center. Dá sa to nejak zmeniť, aby mi to nedávalo na stred, ale na left?

  • Chcel by som zmazať to quick insert (to plusko ktorým sa dajú vložiť tabuľky atd)
Editováno 7.1.2018 15:10
 
Nahoru Odpovědět
7.1.2018 15:08
Avatar
David Moškoř:7.1.2018 15:35

To je zvláštní, zarovnání by mělo být normálně vlevo. Pošli kód.

Nahoru Odpovědět
7.1.2018 15:35
Život je příliš krátký na to, abyste vymýšleli smysluplné názvy proměnných...
Avatar
Marek Mozola
Člen
Avatar
Marek Mozola:7.1.2018 15:58
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/codemirror.min.css">
<link href="css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />
<link href="css/froala_style.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/codemirror.min.js"></script>
<script type="text/javascript" src="js/xml.min.js"></script>
<script type="text/javascript" src="js/froala_editor.pkgd.min.js"></script>
<section>
         <div id="head">
            <div class="line">
               <h1><?=Forum::zistiTopicnazov($idtopicu);?></h1>
            </div>
         </div>
         <div id="content">
            <div class="line">
               <div class="margin">
                  <form class="customform" action="reply" method="post" id="formular">
                        <!--<div class="s-12"><textarea placeholder="Vaša správa" name="sprava" rows="10"></textarea></div>-->
                        <div class="s-12">
                        <textarea id="txtEditor" name="txtEditor" form="formular"></textarea>
                        </div>
                        <input type="hidden" name="idtopic" value="<?=$idtopicu?>">
                        <div class="s-12 m-12 l-4"><button type="submit">Odpovedať</button></div>
                  </form>
               </div>
            </div>
<script>
$(function() {
    $('textarea#txtEditor').froalaEditor({
      toolbarButtons: ['bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', 'fontFamily', 'fontSize', '|', 'specialCharacters', 'color', 'paragraphStyle', '|', 'align', 'formatOL', 'formatUL', 'outdent', 'indent', '-', 'insertHR', 'insertLink', 'insertImage', '|', 'undo', 'redo', 'clearFormatting', 'selectAll', 'html', 'applyFormat', 'removeFormat'],
      pluginsEnabled: null
    })
  });
</script>
         </div>
</section>
 
Nahoru Odpovědět
7.1.2018 15:58
Avatar
Marek Mozola
Člen
Avatar
Marek Mozola:7.1.2018 17:46

Tak, zarovnanie na stred som vyriešil, problém bol v dive v ktorom je textarea.. Chcel by som však nejak odstrániť to "Quick insert". Ďalej ma trápi šírka textarei, defaultne to je jeden riadok a aj keď nastavím v html rows tak sa nezväčší

 
Nahoru Odpovědět
7.1.2018 17:46
Avatar
Odpovídá na Marek Mozola
David Moškoř:7.1.2018 22:55

Přidej za pluginsEnabled toto:

quickInsertButtons: null
Editováno 7.1.2018 22:55
Nahoru Odpovědět
7.1.2018 22:55
Život je příliš krátký na to, abyste vymýšleli smysluplné názvy proměnných...
Avatar
Marek Mozola
Člen
Avatar
Marek Mozola:8.1.2018 0:00

Keď to tam pridám, tak mi to vôbec nezobrazí, zobrazí iba čistú textareu. Vie niekto ako ešte upravím počet tých rows?

 
Nahoru Odpovědět
8.1.2018 0:00
Avatar
David Moškoř:8.1.2018 0:17

Asi jsi někde vynechal čárku zkopíruj si tento kod:

$(function() {
    $('textarea#txtEditor').froalaEditor({
      toolbarButtons: ['bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', 'fontFamily', 'fontSize', '|', 'specialCharacters', 'color', 'paragraphStyle', '|', 'align', 'formatOL', 'formatUL', 'outdent', 'indent', '-', 'insertHR', 'insertLink', 'insertImage', '|', 'undo', 'redo', 'clearFormatting', 'selectAll', 'html', 'applyFormat', 'removeFormat'],
      pluginsEnabled: null,
      quickInsertButtons: null
    })
  });
Nahoru Odpovědět
8.1.2018 0:17
Život je příliš krátký na to, abyste vymýšleli smysluplné názvy proměnných...
Avatar
Odpovídá na Marek Mozola
David Moškoř:8.1.2018 0:24

Výšku a šířku froaly nastavis taky v javascriptu. Příklad:

 <script>
  $(function() {
    $('textarea#txtEditor').froalaEditor({
      height: 300
    })
  });
</script>
Editováno 8.1.2018 0:25
Nahoru Odpovědět
8.1.2018 0:24
Život je příliš krátký na to, abyste vymýšleli smysluplné názvy proměnných...
Avatar
Marek Mozola
Člen
Avatar
Marek Mozola:8.1.2018 7:21

Všetko už funguje, až na to že ten quick insert sa mi tam stále zobrazuje. Po kliknutí naň sa už síce nič nedeje, ale stále sa tam zobrazí.

 
Nahoru Odpovědět
8.1.2018 7:21
Avatar
David Moškoř:8.1.2018 16:35

To je zvláštní, zkus ještě místo:

quickInsertButtons: null

napsat:

quickInsertButtons: []

A pokud to taky nepůjde tak:

quickInsertButtons: ['']
Nahoru Odpovědět
8.1.2018 16:35
Život je příliš krátký na to, abyste vymýšleli smysluplné názvy proměnných...
Avatar
Marek Mozola
Člen
Avatar
Marek Mozola:8.1.2018 20:00

Žiadna zmena, stále tam je, a keď chcem naň kliknúť pravým tlačítkom aby som zistil ako sa volá ten element, že ho nejak schovám, tak zmizne.

 
Nahoru Odpovědět
8.1.2018 20:00
Avatar
David Moškoř:8.1.2018 22:27

Poslední co me napadá je přidat:

quickInsertTags: ['']
Nahoru Odpovědět
8.1.2018 22:27
Život je příliš krátký na to, abyste vymýšleli smysluplné názvy proměnných...
Avatar
Marek Mozola
Člen
Avatar
Marek Mozola:9.1.2018 19:12

Stále sa tam zobrazuje, musí to ísť predsa nejak vymazať.

 
Nahoru Odpovědět
9.1.2018 19:12
Avatar
Marek Mozola
Člen
Avatar
Marek Mozola:9.1.2018 19:18

Vyriešil som to nakoniec jednoduchým display:none v css classe toho tlačítka :)

 
Nahoru Odpovědět
9.1.2018 19:18
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 25 zpráv z 25.