Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>The jquery plugin allows you to use jquery syntax to attach TinyMCE to a textarea. Here is a code sample that illustrates how to convert a textarea control to a wysiwyg editor, at the same time turning on several TinyMCE options.</p> <pre><code>&lt;!-- Load jQuery --&gt; &lt;script type="text/javascript" src="http://www.google.com/jsapi"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; google.load("jquery", "1.3"); &lt;/script&gt; &lt;!-- Load jQuery build --&gt; &lt;script type="text/javascript" src="&lt;your installation path&gt;/tiny_mce/tiny_mce.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; tinyMCE.init({ // General options mode : "textareas", theme : "advanced", plugins : "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,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak", theme_advanced_toolbar_location : "top", theme_advanced_toolbar_align : "left", theme_advanced_statusbar_location : "bottom", theme_advanced_resizing : true, // 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" } }); &lt;/script&gt; &lt;form method="post" action="somepage"&gt; &lt;textarea name="content" style="width:100%"&gt; &lt;/textarea&gt; &lt;/form&gt; </code></pre> <p>It's also really simple to retrieve or update the wysiwyg html using the jQuery plugin.</p> <pre><code>// Will change the contents of an textarea with the ID "someeditor" $('#someeditor').html('Some contents...'); // Will change the contents all text areas with the class tinymce $('textarea.tinymce').html('Some contents...'); // Gets the contents from a specific editor alert($('#someeditor').html()); </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload