Diskuze: WYSIWYG Editor pre databázu

Marek Mozola

Člen

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

David Moškoř

Člen

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...

David Moškoř

Člen

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č

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...

Petr Čech

Tvůrce

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

jakubho

Člen

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.

Marek Mozola

Člen

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

David Moškoř

Člen

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...

Marek Mozola

Člen

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

David Moškoř

Člen

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...

Petr Čech

Tvůrce

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

Marek Mozola

Člen

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

Marek Mozola

Člen

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

David Moškoř

Člen

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...

Marek Mozola

Člen

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

Marek Mozola

Člen

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

David Moškoř

Člen

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...

Marek Mozola

Člen

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

David Moškoř

Člen

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...

David Moškoř

Člen

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...

Marek Mozola

Člen

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

David Moškoř

Člen

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...

Marek Mozola

Člen

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

David Moškoř

Člen

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...

Marek Mozola

Člen

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

Marek Mozola

Člen

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

Nejčastěji vyhledáváné

Diskuze: WYSIWYG Editor pre databázu