TinyMCE na Joggerze - Another blog in the net

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

Share this:

Related