{"id":184,"date":"2008-11-15T15:49:19","date_gmt":"2008-11-15T14:49:19","guid":{"rendered":"http:\/\/eriz.pcinside.pl\/weblog\/tinymce-faq-184.html"},"modified":"2009-06-08T20:03:30","modified_gmt":"2009-06-08T19:03:30","slug":"tinymce-faq","status":"publish","type":"post","link":"https:\/\/eriz.pcinside.pl\/weblog\/tinymce-faq-184.html","title":{"rendered":"TinyMCE &#8211; FAQ"},"content":{"rendered":"<p>Zauwa\u017cy\u0142em, \u017ce moje wcze\u015bniejsze notki dotycz\u0105ce <a href=\"http:\/\/eriz.pcinside.pl\/weblog\/instalacja-tinymce-krotki-manual-48.html\">instalacji<\/a> i <a href=\"http:\/\/eriz.pcinside.pl\/weblog\/instalacja-tinymce-krotki-manual-48.html\">polonizacji<\/a> TinyMCE jednak si\u0119 przyda\u0142y. <img src=\"https:\/\/eriz.pcinside.pl\/weblog\/wp-includes\/images\/smilies\/e_wink.png\" alt=\";)\" class=\"wp-smiley\" style=\"height: 1em; max-height: 1em;\" \/> Chcia\u0142bym dzisiaj napisa\u0107 par\u0119 s\u0142\u00f3w na temat najcz\u0119\u015bciej zadawanych pyta\u0144, kt\u00f3re zadali\u015bcie w komentarzach oraz na <a href=\"http:\/\/forum.php.pl\">Forum PHP.pl<\/a>.<\/p>\n<p><!--more--><\/p>\n<p><small>(pytania zbli\u017cone do orygina\u0142\u00f3w)<\/small><\/p>\n<ol>\n<li><strong>A na jakiej licencji jest ten edytor? Mozna go wykorzystywac w celach komercyjnych?<\/strong>\n<p>Oczywi\u015bcie, \u017ce tak pod warunkiem, i\u017c zachowujesz postanowienia <a href=\"http:\/\/tinymce.moxiecode.com\/license.php\">LGPL<\/a>. Wi\u0119cej na <a href=\"http:\/\/tinymce.moxiecode.com\/license.php\">stronie<\/a> producenta.<\/p>\n<\/li>\n<li><strong>Co zrobic, by w obszarze obj\u0119tym TinyMCE (w textarea) wykonywa\u0107 operacje JavaScript, np. alert po naci\u015bni\u0119ciu klawisza?<\/strong>\n<p>Na forum TinyMCE zosta\u0142o ju\u017c zadane <a href=\"http:\/\/tinymce.moxiecode.com\/punbb\/viewtopic.php?id=1321\">podobne pytanie<\/a>. Wszystko sprowadza si\u0119 do dodania zdarze\u0144 nie dla zwyk\u0142ego <em>&lt;textarea\/&gt;<\/em>, a do sekcji inicjuj\u0105cej edytor:<\/p>\n<p><code lang=\"javascript\">tinyMCE.init({<br \/>\n    mode : ...,<br \/>\n    ...,<br \/>\n    setup : function (ed) {<br \/>\n        ed.onKeyPress.add(<br \/>\n            function (ed, evt) {<br \/>\n                alert(\"Editor-ID: \"+ed.id+\"\\nEvent: \"+evt);<br \/>\n                \/\/ Do some great things here...<br \/>\n            }<br \/>\n        );<br \/>\n    },<br \/>\n    ...<br \/>\n});<\/code><\/p>\n<p><a href=\"http:\/\/www.w3schools.com\/jsref\/jsref_events.asp\">Nazwy zdarze\u0144<\/a> s\u0105 identyczne jak w implementacjach JavaScript z t\u0105 r\u00f3\u017cnic\u0105, \u017ce zapisywane w sk\u0142adni &#8222;wielb\u0142\u0105da&#8221; (wielka litera co wyraz). <a href=\"http:\/\/wiki.moxiecode.com\/index.php\/TinyMCE:Configuration\/setup\">Opis funkcji <em>setup<\/em><\/a> w wiki producenta.<\/p>\n<\/li>\n<li>\n<strong>Witam. Jak mo\u017cna zmusi\u0107 ten edytor aby akceptowa\u0142 mo\u017cliwo\u015b\u0107 przekre\u015blenia i podkre\u015blania tekstu\u2026<\/strong><\/p>\n<p>Do sekcji inicjuj\u0105cej dodaj w\u0142asno\u015b\u0107 <a href=\"http:\/\/wiki.moxiecode.com\/index.php\/TinyMCE:Configuration\/extended_valid_elements\">extended_valid_elements<\/a> i podaj w niej interesuj\u0105ce Ci\u0119 tagi, np:<\/p>\n<p><code lang=\"javascript\">extended_valid_elements: \"s[class|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown|onkeypress|onkeyup\"\n  +\"|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|style|title],\"\n+\"u[class|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown|onkeypress|onkeyup\"\n  +\"|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|style|title]\",\ntheme_advanced_buttons1 : \"bold,italic,underline,strikethrough\"<\/code><\/p>\n<p>Ale lepiej utworzy\u0107 sw\u00f3j styl w CSS. <img src=\"https:\/\/eriz.pcinside.pl\/weblog\/wp-includes\/images\/smilies\/e_wink.png\" alt=\";)\" class=\"wp-smiley\" style=\"height: 1em; max-height: 1em;\" \/><\/p>\n<\/li>\n<li><strong>Mam pytanie jest to okno do komentowania\u2026 nie ma opcji aby zatwierdzi\u0107 (doda\u0107) to co si\u0119 napisa\u0142o\u2026<\/strong>\n<p>O ile dobrze zrozumia\u0142em pytanie, to chodzi o mo\u017cliwo\u015b\u0107 zapisania danych z edytora poprzez klikni\u0119cie odpowiedniej opcji na pasku narz\u0119dzi. Wystarczy uaktywni\u0107 <a href=\"http:\/\/wiki.moxiecode.com\/index.php\/TinyMCE:Plugins\/save\">wtyczk\u0119 <em>save<\/em><\/a> i problem z g\u0142owy. <img src=\"https:\/\/eriz.pcinside.pl\/weblog\/wp-includes\/images\/smilies\/e_wink.png\" alt=\";)\" class=\"wp-smiley\" style=\"height: 1em; max-height: 1em;\" \/><\/p>\n<\/li>\n<li><strong>Pytanie: nie mam zdefiniowanego id dla textarea w kt\u00f3rych ma pojawia\u0107 si\u0119 tiny, czyli generealnie przypisywany jest do wszystkich mo\u017cliwych. Czy istnieje mo\u017cliwo\u015b\u0107 wy\u0142\u0105czenia po id niekt\u00f3rych textarea tak \u017ceby tiny si\u0119 tam nie wy\u015bwietla\u0142?<\/strong>\n<p>Oczywi\u015bcie. Dodaj do <em>&lt;textarea \/&gt;<\/em> klas\u0119 <em>mceNoEditor<\/em>. W skr\u00f3cie wygl\u0105da to tak:<\/p>\n<p><code lang=\"html\"><textarea class=\"mceNoEditor\"><\/textarea><\/code>\n<\/li>\n<li><strong>Czy da si\u0119 zablokowa\u0107 cz\u0119\u015b\u0107 tre\u015bci w edytorze kt\u00f3ra jest zaimportowana zablokowa\u0107?<\/strong>\n<p><a href=\"http:\/\/tinymce.moxiecode.com\/examples\/example_10.php\">Jeden z przyk\u0142ad\u00f3w<\/a> u\u017cycia na stronie producenta prezentuje t\u0105 funkcjonalno\u015b\u0107. Wystarczy blokowanym elementom nada\u0107 odpowiedni\u0105 klas\u0119:<\/p>\n<p><code lang=\"html\"><textarea><\/p>\n<p>Tre\u015b\u0107 edytowalna.<\/p>\n<p class=\"mceNonEditable\">Tre\u015b\u0107 zablokowana.<\/p>\n<p><\/textarea><\/code>\n<\/li>\n<li><strong>Mam problem z formatowaniem kodu przez tinymce, a konkretnie o to,\u017ce przy kopiowaniu tekstu z worda kopiowane s\u0105 r\u00f3wnie\u017c style to powoduje niemo\u017cno\u015b\u0107 wy\u015bwietlenia strony w ie.<\/strong>\n<p>TinyMCE obs\u0142uguje mo\u017cliwo\u015b\u0107 wklejania sformatowanego w Wordzie tekstu. C\u00f3\u017c, czasem to irytuje, powoduje, \u017ce w formatowaniu panuje swoisty \u015bmietnik. Przyda\u0142aby si\u0119 opcja na wz\u00f3r <em>wklej specjalnie<\/em>, <em>zwyk\u0142y tekst<\/em>. Ot\u00f3\u017c istnieje taka mo\u017cliwo\u015b\u0107. Trzeba skorzysta\u0107 z wtyczki <a href=\"http:\/\/wiki.moxiecode.com\/index.php\/TinyMCE:Plugins\/paste\">Paste<\/a>. Jest ona dost\u0119pna w standardowej paczce, wystarczy j\u0105 tylko w\u0142\u0105czy\u0107. Jak to zwykle bywa z rozszerzeniami do TinyMCE, wystarczy zmodyfikowa\u0107 funkcj\u0119 inicjuj\u0105c\u0105 edytor:<\/p>\n<p><code lang=\"javascript\">tinyMCE.init({<br \/>\n\ttheme : \"advanced\",<br \/>\n\tmode : \"textareas\",<br \/>\n\tplugins : \"paste\",<br \/>\n\ttheme_advanced_buttons3_add : \"pastetext,pasteword,selectall\",<br \/>\n\tpaste_auto_cleanup_on_paste : true,<br \/>\n\tpaste_convert_middot_lists : false,<br \/>\n});<\/code><\/p>\n<p>Oczywi\u015bcie, to jest tylko przyk\u0142adowe u\u017cycie; powy\u017cszy kod nale\u017cy dostosowa\u0107 do w\u0142asnych potrzeb.<\/p>\n<\/li>\n<li><strong>Jak zmusi\u0107 TinyMCE do pracy tylko z wybranym polem <em>&lt;textarea\/&gt;<\/em>?<\/strong>\n<p>I edycja, jak wy\u017cej. Zmieniamy warto\u015b\u0107 <em>mode<\/em> i dodajemy <em>elements<\/em>, za <a href=\"http:\/\/wiki.moxiecode.com\/index.php\/TinyMCE:Configuration\/mode\">wiki<\/a>:<\/p>\n<p><code lang=\"javascript\">tinyMCE.init({<br \/>\n\t...<br \/>\n\tmode : \"exact\",<br \/>\n\telements : \"elm1,elm2\"<br \/>\n});<\/code><\/p>\n<p>W warto\u015bci <em>elements<\/em> podajemy nazwy p\u00f3l tekstowych po przecinku. Nazwy, to warto\u015bci <em>id<\/em> w <em>&lt;textarea\/&gt;<\/em>, np:<\/p>\n<p><code lang=\"html\"><textarea id=\"elm1\"><\/textarea><textarea id=\"elm2\"><\/textarea><\/code>\n<\/li>\n<li><strong>Jak za pomoc\u0105 JavaScript w\u0142\u0105cza\u0107\/wy\u0142\u0105cza\u0107 edytor?<\/strong>\n<p>Aby doda\u0107 edytor dla pola edycyjnego:<\/p>\n<p><code lang=\"javascript\">tinyMCE.execCommand('mceAddControl', false, 'identyfikatorEdytora');<\/code><\/p>\n<p>Aby go usun\u0105\u0107:<\/p>\n<p><code lang=\"javascript\">tinyMCE.execCommand('mceFocus', false, 'identyfikatorEdytora');<br \/>\ntinyMCE.execCommand('mceRemoveControl', false, 'identyfikatorEdytora');<\/code>\n<\/li>\n<li><strong>Jak konfigurowa\u0107 TinyMCE niezale\u017cnie dla wielu p\u00f3l?<\/strong>\n<p>Takie rozwi\u0105zanie mo\u017cna <a href=\"http:\/\/tinymce.moxiecode.com\/examples\/example_04.php\">zobaczy\u0107 w akcji<\/a> na stronie producenta. W skr\u00f3cie, polega ono na powieleniu komend inicjuj\u0105cych w zale\u017cno\u015bci od potrzeb. Tworzymy przez to \"grupy\" edytora, kt\u00f3re skrypt przypina w zale\u017cno\u015bci od nadanego atrybutu <em>class<\/em> dla <em>&lt;textarea&gt;<\/em>. Przyk\u0142adowo:<\/p>\n<p><code lang=\"html\"><script type=\"text\/javascript\">\ntinyMCE.init({\n\tmode : \"textareas\",\n\ttheme : \"simple\",\n\teditor_selector : \"mceSimple\"\n});<\/p>\n<p>tinyMCE.init({\n\tmode : \"textareas\",\n\ttheme : \"advanced\",\n\teditor_selector : \"mceAdvanced\"\n});\n<\/script><\/p>\n<p><textarea name=\"content1\" class=\"mceSimple\"><\/textarea><br \/>\n<textarea name=\"content2\" class=\"mceAdvanced\"><\/textarea><br \/>\n<\/code>\n<\/li>\n<li><strong>Jak z poziomu TinyMCE wys\u0142a\u0107 i wstawi\u0107 obrazek?<\/strong>\n<p>Mo\u017cna skorzysta\u0107 z p\u0142atnej wtyczki <a href=\"http:\/\/tinymce.moxiecode.com\/plugins_imagemanager.php\">MCImageManager<\/a>. Jednak, gdyby kto\u015b chcia\u0142 skorzysta\u0107 z darmowego odpowiednika, mo\u017ce zainteresowa\u0107 si\u0119 <a href=\"http:\/\/j-cons.com\/downloads\/imanager%20V%201.2.8.zip\">iManagerem<\/a>.<\/p>\n<\/li>\n<li><strong>Jak za\u0142adowa\u0107\/wys\u0142a\u0107 zawarto\u015b\u0107 edytora przy pomocy AJAX-a?<\/strong>\n<p>Dzi\u0119ki rozbudowanemu <a href=\"http:\/\/wiki.moxiecode.com\/index.php\/TinyMCE:API\">API<\/a> edytora, jest to wr\u0119cz bajeczne. <img src=\"https:\/\/eriz.pcinside.pl\/weblog\/wp-includes\/images\/smilies\/e_wink.png\" alt=\";)\" class=\"wp-smiley\" style=\"height: 1em; max-height: 1em;\" \/> <a href=\"http:\/\/tinymce.moxiecode.com\/examples\/example_06.php\">Przyk\u0142ad zastosowania<\/a>.<\/p>\n<p><code lang=\"javascript\">var ed = tinyMCE.get('content'); \/\/pobieramy uchwyt do pola o id=\"content\"<br \/>\ntresc = ed.getContent(); \/\/pobranie tre\u015bci z edytora<br \/>\ned.setContent('ustaw tre\u015b\u0107 edytora');<\/code>\n<\/li>\n<li><strong>Jak podpi\u0105\u0107 TinyMCE do jakiego\u015b systemu forum, aby generowa\u0142 kod bbCode?<\/strong>\n<p>Wszystko jest opisane w <a href=\"http:\/\/wiki.moxiecode.com\/index.php\/TinyMCE:Plugins\/bbcode\">dokumentacji producenta<\/a>.<\/p>\n<\/li>\n<li><strong>Jak u\u017cy\u0107 w\u0142asnego stylu dla tre\u015bci w oknie edytora?<\/strong>\n<p>Wystarczy stworzy\u0107 osobny arkusz CSS i podpi\u0105\u0107 go korzystaj\u0105c z w\u0142asno\u015bci <a href=\"http:\/\/wiki.moxiecode.com\/index.php\/TinyMCE:Configuration\/content_css\"><em>content_css<\/em><\/a>.<\/p>\n<\/li>\n<li><strong>Jak utworzy\u0107 w\u0142asne formatowanie w li\u015bcie rozwijanej <em>styl<\/em>?<\/strong>\n<p>Utw\u00f3rz w\u0142asny arkusz CSS (tak, jak w poradzie wy\u017cej). Wszystkie selektory klas zawarte w arkuszu zostan\u0105 automatycznie dodane do listy.<\/p>\n<p><code lang=\"css\">.selektor1<br \/>\n{color: #000}<\/p>\n<p>.selektor2<br \/>\n{font-weight: bold;}<br \/>\n<\/code><\/p>\n<p>Co sprawi, \u017ce na li\u015bcie b\u0119d\u0105 do wyboru style o nazwach <em>selektor1<\/em> i <em>selektor2<\/em>.<\/p>\n<\/li>\n<li><strong>Jak nakaza\u0107 TinyMCE zapisywanie polskich znak\u00f3w bez u\u017cycia encji?<\/strong>\n<p>Bywa to do\u015b\u0107 denerwuj\u0105ce, np. zamiast <em>\u00f3<\/em> edytor zwraca <em>&amp;oacute;<\/em>. Jednak da si\u0119 to wy\u0142\u0105czy\u0107. Wystarczy do funkcji inicjuj\u0105cej edytor dopisa\u0107:<br \/>\n<code lang=\"javascript\"><br \/>\nentity_encoding : \"raw\"<br \/>\n<\/code><\/p>\n<p>i po problemie. <img src=\"https:\/\/eriz.pcinside.pl\/weblog\/wp-includes\/images\/smilies\/e_wink.png\" alt=\";)\" class=\"wp-smiley\" style=\"height: 1em; max-height: 1em;\" \/><\/p>\n<\/li>\n<\/ol>\n<p>Mam nadziej\u0119, \u017ce wyja\u015bni\u0142em cho\u0107 niekt\u00f3re z w\u0105tpliwo\u015bci z TinyMCE, IMHO, najlepszego edytora WYSIWYG dost\u0119pnego w Sieci.<\/p>\n<p>W razie pyta\u0144, zostaw komentarz. <img src=\"https:\/\/eriz.pcinside.pl\/weblog\/wp-includes\/images\/smilies\/e_wink.png\" alt=\";)\" class=\"wp-smiley\" style=\"height: 1em; max-height: 1em;\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Zauwa\u017cy\u0142em, \u017ce moje wcze\u015bniejsze notki dotycz\u0105ce instalacji i polonizacji TinyMCE jednak si\u0119 przyda\u0142y. Chcia\u0142bym dzisiaj napisa\u0107 par\u0119 s\u0142\u00f3w na temat najcz\u0119\u015bciej zadawanych pyta\u0144, kt\u00f3re zadali\u015bcie w komentarzach oraz na Forum PHP.pl.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[79,80,41],"_links":{"self":[{"href":"https:\/\/eriz.pcinside.pl\/weblog\/wp-json\/wp\/v2\/posts\/184"}],"collection":[{"href":"https:\/\/eriz.pcinside.pl\/weblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/eriz.pcinside.pl\/weblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/eriz.pcinside.pl\/weblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eriz.pcinside.pl\/weblog\/wp-json\/wp\/v2\/comments?post=184"}],"version-history":[{"count":0,"href":"https:\/\/eriz.pcinside.pl\/weblog\/wp-json\/wp\/v2\/posts\/184\/revisions"}],"wp:attachment":[{"href":"https:\/\/eriz.pcinside.pl\/weblog\/wp-json\/wp\/v2\/media?parent=184"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/eriz.pcinside.pl\/weblog\/wp-json\/wp\/v2\/categories?post=184"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/eriz.pcinside.pl\/weblog\/wp-json\/wp\/v2\/tags?post=184"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}