TinyMCE na Joggerze

TinyMCE na Joggerze

Domyślny edytor treści notki na joggerze jest – jaki jest. Z jednej strony pozwala na dużo, bo mamy do dyspozycji pełen HTML, z drugiej strony klepanie tych samych tagów jest denerwujące i wybija z rytmu. 

Fajnie by było mieć tutaj jakiś graficzny edytor, od biedy tinymce lub jakiś inny zamiennik. Google niestety nie chce  podpowiedzieć żadnej skryptozakładki więc trzeba samemu takie coś napisać.

Gotowy efekt z guzikiem znajduje się tutaj: http://rashell.pl/tiny_mce/ Wystarczy otworzyć stronę, a link który się pokaże przeciągnąć na pasek zakładek. 

Działa z Chrome, innych przeglądarek nie testowałem 😉

Edytorek jest świadomy protokołu http/s, można go stosować w dowolnym CMSie, który nie jest zaopatrzony w graficzny edytor treści. 

Do ideału trochę brakuje, ze względu na cross-origin, nie można na joggerze uruchomić okienek do wstawiania grafik czy edytowania linków, a aby podejrzeć HTML trzeba się pozbyć tiny’ego ale to zawsze jakiś start 🙂

Jak sobie zrobić własnego tiny’ego? Proste!

Wgrać na serwer www pliki od tiny’ego i dodać index.html mniej więcej taki:

<html><head>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
var link=$("<a>TinyMce!</a>");
link.attr('href','javascript: var scriptT = document.createElement("script");'+
      'scriptT.src = "//rashell.pl/tiny_mce/tiny_mce.js";'+
      'scriptT.type = "text/javascript";'+
      'scriptT.onload = function(){'+
           'tinyMCE.init({'+
               'mode : "textareas",'+
               'theme_advanced_resizing : true,'+
               'entity_encoding : "raw",'+
               'apply_source_formatting : true,'+
               'document_base_url : document.location.protocol+"//rashell.pl/tiny_mce/",'+
               'plugins:"style,layer,table,contextmenu,paste,inlinepopups,lists,xhtmlxtras,fullscreen,advimage,advlink,advlist",'+
                'theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",'+
                                'theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime|,forecolor,backcolor",'+
                                'theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",'+
                                'theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak,restoredraft,visualblocks",'+
               'height:400,'+
               'theme : "advanced" });'+
        '};'+
      'document.body.appendChild(scriptT);')
      $("#tu").append(link);
})
</script>
</head><body>
<div id="tu"></div>
<textarea>demo</textarea>
</body></html>

A potem tylko go odpalić i przeciągnąć wyświetloną skryptozakładkę. Oczywiście trzeba zamienić adres mojego serwera na swój. Może się komuś przyda.

Edit: Zapomniałem o tym napisać. Podpinając tiny’ego do strony za SSLem istnieje ryzyko, że przeglądarka nie akceptuje certyfikatu serwera. By to obejść wystarczy otworzyć skryptozakładkę z https’a i potwierdzić certyfikat. Tak jest w przypadku mojej skryptozakładki – certyfikat nie jest przypisany do domeny więc przeglądarka się buntuje. Po jednokrotnym poinstruowaniu jej, że ma kontynuować – będzie grzecznie się słuchać.

  • TinyMCE nie ma, bo odstrasza to trolli i dzieci neo od joggera – taka jest oficjalna wersja. Gdyby tylko administracja przejmowała się jeszcze losem joggera to by cię tutaj zjechali 😉

  • btw, u mnie zaraz po użyciu tego przycisku na stronie demo wyświetla się „[object HTMLScriptElement]” czyżby efekt braku http w URLach?

  • Jaka przeglądarka? IE/FF? Nie testowałem.
    Wieczorem ogarnę. Chrome samo sobie dorabia protokół 😉
    A odstraszanie troli, cóż.. 10 lat temu może trzeba było. Dziś trolle i dzieci poszły na fejsiunia. Mimo to do pisania notek łatwiej użyć tiny’ego. Lub wordpressa, niestety.
    Sam myślę nad wyprowadzeniem się na własną platformę by robić sobie marketing zawodowy, ale chcę mieć miejsce gdzie mogę napisać trochę więcej. O takie jak ten jogger.

  • W projektach dla klientów, w których niestety bez WYSiWYGa ani rusz mam całą osobną klasę do usuwania śmieci z tego potworka. Powiem krótko: nie istnieje dobry WYSiWYG, bo wszystkie generują kod, od którego można dostać ataku serca, który nie działa jak powinien i który później generuje problemy.

    Co nie zmienia faktu, że skryptozakładka fajna. Przerób to na jakiś user.js i wrzuć na userscripts dla innych 🙂

  • @d4rky: podzielisz się na jakimś github?

    User.js nie przejdzie, tam jest za dużo skryptów które wymagają wiszenia na serwerze.

    Mam zgryz, bo niespecjalnie wiem co zrobić z doczytywaniem iframe’ów do edycji linków czy obrazków. W sumie możnaby je generować w locie ale to wymaga duuużej ilości zmian w plikach… I nie sądze by cross-origin policy było w stanie załatwić sprawę.

    Edit: nie jest w stanie załatwić sprawy. Niestety.