Forum komputerowe, forum informatyczne, naprawa laptpów , forum windows, forum linux, Hardware, Overclocking,
TinyMCE - genialny edytor WYSIWYG - Instalacja na witrynie - Wersja do druku

+- Forum komputerowe, forum informatyczne, naprawa laptpów , forum windows, forum linux, Hardware, Overclocking, (https://forum.pcmod.pl)
+-- Dział: Webmaster (https://forum.pcmod.pl/forum-38.html)
+--- Dział: Dla początkujących (https://forum.pcmod.pl/forum-39.html)
+--- Wątek: TinyMCE - genialny edytor WYSIWYG - Instalacja na witrynie (/thread-7325.html)



TinyMCE - genialny edytor WYSIWYG - Instalacja na witrynie - piotrvx - 2012-07-10

Instalacja na witrynie

<script type="text/javascript" src="/js/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
        // General options
        mode : "textareas",
        theme : "advanced",
        plugins : "autolink,lists,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions
        ,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality
        ,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
 
        // Theme options
        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,preview,|,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
        ,spellchecker,|,cite,abbr,acronym,del,ins,attribs
         ,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_statusbar_location : "bottom",
        theme_advanced_resizing : true,
 
        // Skin options
        skin : "o2k7",
        skin_variant : "silver",
 
        // Example content CSS (should be your site CSS)
        content_css : "css/example.css",
 
        // Drop lists for link/image/media/template dialogs
        template_external_list_url : "js/template_list.js",
        external_link_list_url : "js/link_list.js",
        external_image_list_url : "js/image_list.js",
        media_external_list_url : "js/media_list.js",
 
        // Replace values for the template plugin
        template_replace_values : {
                username : "Some User",
                staffid : "991234"
        }
});
</script>
 

Kilka ułatwień obsługi

Spolszczenie edytora

Aby używać polskich napisów i podpowiedzi powinniśmy ściągnąć nasz rodzimy język.

Możemy to zrobić pod adresem tinymce.moxiecode.com. Zaznaczamy na liście język polski i pobieramy.

Następnie wrzucamy wszystkie pliki z archiwum do naszej paczki TinyMCE.

Teraz pozostaje nam tylko wywołanie odpowiedniego języka.

Do skryptu w ramach head dodajemy:

language : "pl",

Poprawne kodowanie polskich znaków

Edytor TinyMCE źle zapisuje do bazy danych niektóre polskie znaki, kodując je za pomocą nielubianych 'krzaczków'.

Co zrobić aby tego uniknąć? Wystarczy posłużyć się kodem, który wklejamy do skryptu.

entity_encoding : "raw"

Źródło:  http://webroad.pl/html5-css3/351-tinymce-genialny-edytor-wysiwyg-na-twojej-stronie