Včera v noci jsem se zase docela trápil. Jsem si usmyslel že už nebudu používat žádný prvek z Ajax Control Toolkit, protože to je všechno dost zmatené a pořád jsem musel bojovat se konflikty názvů css tříd s jinými CSS Frameworky hlavně.
Začal jsem tedy hledat nový html editor – bylo mi jedno zda bude pouze v JS nebo kombinaci .NET/JS. Ale chtěl jsem se hlavně vyhnout TinyMCE – jednoduše proto že jsem se zase obával konfliktu s CSS třídami a nastavováním.
Nejjednodušší a zároveň docela neotřelý se mi zdál tento: 👻 Odkaz je mrtvější než Flash Player.Tak jsem ho nastavil podle instrukcí , jenže nejen že to bylo stejné jako u jiných html editorů které jsem již měl, ale ještě jsem musel bojovat s absolutním pozicováním – CSS totiž bylo uzpůsobené pouze na stránku WYSIHTML5 , a když jsem dal html editor dolů a chtěl jsem vložit odkaz nebo obrázek, tak se mi dialog zobrazil nahoře a dole to zase bylo průhledné atd.
Prostě nedodělek a již špatný návrh, a sám osobně se snažím absolutní pozicování nikdy nevolit. Pak jsem si řekl že nebudu spoléhat na cizí řešení a napíšu si něco vlastního na míru.
První co mě napadlo co jsem nevěděl bylo jak zjistit text který je označen v editoru. Na to jsem si našel knihovnu jquery.wrapSelection.js, sice starší ale jinou jsem nenašel a pak nastal první problém – nesnáším javascript a jeho netypovost.
Snažil jsem se napsat na 781 řádků té knihovny TypeScript Definition, ale nevěděl jsem jaké třídy a hlavně typy jejich proměnných a metod tam jsou a tak jsem to musel vzdát.
Tím skončil můj sen o vlastním HTML editoru. A protože u ostatních HTML editorů nebylo na webu ani ukázka ve většině případů, nebo mě i ta ukázka odradila, šel jsem nakonec do TinyMCE a rozhodně nelituji.
Nezávislost na jQuery, neviděné funkce, líbivý design, a třídy jsou označovány třeba .mce-btn takže nehrozí konflikt s jinými třídami – v mém případě třeba Metro UI CSS FW.
Konfigurace je taky jednoduchá až to snad ani není možné:
<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 kódu jsou připojené všechny pluginy které se dodávají ve standardním zipu – nicméně na webu je seznam pluginů ještě rozsáhlejší.
A HTML kód je ještě jednodušší, primitivnější být už nemůže:
<textarea id="tinymce"></textarea>Už jen ho napojit na ASP.NET a příště už nic jiného:).
PS: jen samozřejmě nejsou úplně potřeba tyto pluginy: example, example_dependency, bbcode. bbcode je dokonce v mém případě nežádoucí, protože pak vám tinymce vrací místo html kódu bbcode syntaxi.