Vcera v noci jsem se zase docela trapil. Jsem si usmyslel ze uz nebudu pouzivat zadny prvek z Ajax Control Toolkit, protoze to je vsechno dost zmatene a porad jsem musel bojovat se konflikty nazvu css trid s jinymi CSS Frameworky hlavne.
Zacal jsem tedy hledat novy html editor – bylo mi jedno zda bude pouze v JS nebo kombinaci .NET/JS. Ale chtel jsem se hlavne vyhnout TinyMCE – jednoduse proto ze jsem se zase obaval konfliktu s CSS tridami a nastavovanim.
Nejjednodussi a zaroven docela neotrely se mi zdal tento: WYSIHTML5. Tak jsem ho nastavil podle instrukci , jenze nejen ze to bylo stejne jako u jinych html editoru ktere jsem jiz mel, ale jeste jsem musel bojovat s absolutnim pozicovanim – CSS totiz bylo uzpusobene pouze na stranku WYSIHTML5 , a kdyz jsem dal html editor dolu a chtel jsem vlozit odkaz nebo obrazek, tak se mi dialog zobrazil nahore a dole to zase bylo pruhledne atd.
Proste nedodelek a jiz spatny navrh, a sam osobne se snazim absolutni pozicovani nikdy nevolit. Pak jsem si rekl ze nebudu spolehat na cizi reseni a napisu si neco vlastniho na miru.
Prvni co me napadlo co jsem nevedel bylo jak zjistit text ktery je oznacen v editoru. Na to jsem si nasel knihovnu jquery.wrapSelection.js, sice starsi ale jinou jsem nenasel a pak nastal prvni problem – nesnasim javascript a jeho netypovost.
Snazil jsem se napsat na 781 radku te knihovny TypeScript Definition, ale nevedel jsem jake tridy a hlavne typy jejich promennych a metod tam jsou a tak jsem to musel vzdat.
Tim skoncil muj sen o vlastnim HTML editoru. A protoze u ostatnich HTML editoru nebylo na webu ani ukazka ve vetsine pripadu, nebo me i ta ukazka odradila, sel jsem nakonec do TinyMCE a rozhodne nelituji.
Nezavislost na jQuery, nevidane funkce, libivy design, a tridy jsou oznacovany treba .mce-btn takze nehrozi konflikt s jinymi tridami – v mem pripade treba Metro UI CSS FW.
Konfigurace je taky jednoducha az to snad ani neni mozne:
|
1 2 3 4 5 6 7 8 |
<script type = "text/javascript" > $(document).ready(function () { tinymce.init({ selector: '#tinymce', plugins: 'advlist,anchor,autolink,autoresize,autosave,bbcode,charmap,code,colorpicker,contextmenu,directionality,emoticons,example,example_dependency,fullpage,fullscreen,hr,image,importcss,insertdatetime,layer,legacyoutput,link,lists,media,nonbreaking,noneditable,pagebreak,paste,preview,print,save,searchreplace,spellchecker,tabfocus,table,template,textcolor,textpattern,visualblocks,visualchars,wordcount', toolbar: '' }); }); </script> |
V kodu jsou pripojene vsechny pluginy ktere se dodavaji ve standardnim zipu – nicmene na webu je seznam pluginu jeste rozsahlejsi.
A HTML kod je jeste jednodussi, primitivnejsi byt uz nemuze:
|
1 |
<textarea id="tinymce"> </textarea> |
Uz jen ho napojit na ASP.NET a priste uz nic jineho:).
PS: jen samozrejme nejsou uplne potreba tyto pluginy: example,example_dependency,bbcode. bbcode je dokonce v mem pripade nezadouci, protoze pak vam tinymce vraci misto html kodu bbcode syntaxi.