添加去除Tool Bar
<script type="text/javascript" src="<your installation path>/tiny_mce/tiny_mce.js"></script> <script type="text/javascript"> tinyMCE.init({ mode : "textareas", theme : "advanced" }); function toggleEditor(id) { if (!tinyMCE.get(id)) tinyMCE.execCommand('mceAddControl', false, id); else tinyMCE.execCommand('mceRemoveControl', false, id); } </script> <form method="post" action="somepage"> <textarea name="content" style="width:100%"> </textarea> </form> <a href="javascript:toggleEditor('content');">Add/Remove editor</a>
extended_valid_elements and invalid_elements
<script type="text/javascript"> tinyMCE.init({ mode : "textareas", theme : "simple", extended_valid_elements : "img[class=myclass|!src|border:0|alt|title|width|height]", invalid_elements : "strong,b,em,i" }); </script>
editor_selector and editor_deselector
<script type="text/javascript" src="<your installation path>/tiny_mce/tiny_mce.js"></script> <script type="text/javascript"> tinyMCE.init({ mode : "textareas", theme : "simple", editor_selector : "mceEditor", editor_deselector : "mceNoEditor" }); </script> <form method="post" action="somepage"> <textarea id="content1" name="content1" class="mceEditor" cols="85" rows="10">This will be a editor, since it has a selector class.</textarea> <textarea id="content2" name="content2" class="mceEditor" cols="85" rows="10">This will be a editor, since it has a selector class.</textarea> <textarea id="content3" name="content3" class="mceNoEditor" cols="85" rows="10">This is not a editor since it has a deselector class.</textarea> </form>
Multiple configs/inits
<script type="text/javascript" src="<your installation path>/tiny_mce/tiny_mce.js"></script> <script type="text/javascript"> tinyMCE.init({ mode : "textareas", theme : "simple", editor_selector : "mceSimple" }); tinyMCE.init({ mode : "textareas", theme : "advanced", editor_selector : "mceAdvanced" }); </script> <form method="post" action="somepage"> <textarea name="content1" class="mceSimple" style="width:100%"> </textarea> <textarea name="content2" class="mceAdvanced" style="width:100%"> </textarea> </form>
Ajax load/save
<script type="text/javascript" src="<your installation path>/tiny_mce/tiny_mce.js"></script> <script type="text/javascript"> tinyMCE.init({ mode : "textareas", theme : "advanced" }); function ajaxLoad() { var ed = tinyMCE.get('content'); // Do you ajax call here, window.setTimeout fakes ajax call ed.setProgressState(1); // Show progress window.setTimeout(function() { ed.setProgressState(0); // Hide progress ed.setContent('HTML content that got passed from server.'); }, 3000); } function ajaxSave() { var ed = tinyMCE.get('content'); // Do you ajax call here, window.setTimeout fakes ajax call ed.setProgressState(1); // Show progress window.setTimeout(function() { ed.setProgressState(0); // Hide progress alert(ed.getContent()); }, 3000); } </script> <form method="post" action="somepage"> <textarea name="content" style="width:100%"> </textarea> </form>
readonly
<script type="text/javascript" src="<your installation path>/tiny_mce/tiny_mce.js"></script> <script type="text/javascript"> tinyMCE.init({ mode : "textareas", theme : "advanced", readonly : true }); </script> <form method="post" action="somepage"> <textarea name="content" style="width:100%"> </textarea> </form>
URL config example
<script type="text/javascript" src="<your installation path>/tiny_mce/tiny_mce.js"></script> <script type="text/javascript"> tinyMCE.init({ mode : "exact", elements : 'absurls', theme : "advanced", plugins : 'advlink,advimage', relative_urls : false }); tinyMCE.init({ mode : "exact", elements : 'abshosturls', theme : "advanced", plugins : 'advlink,advimage', relative_urls : false, remove_script_host : false }); tinyMCE.init({ mode : "exact", elements : 'relurls', theme : "advanced", plugins : 'advlink,advimage', relative_urls : true // Default value }); tinyMCE.init({ mode : "exact", elements : 'relurlstopage', theme : "advanced", plugins : 'advlink,advimage', relative_urls : true, // Default value document_base_url : 'http://tinymce.moxiecode.com/' }); tinyMCE.init({ mode : "exact", elements : 'nourlconvert', theme : "advanced", plugins : 'advlink,advimage', convert_urls : false }); </script> <form method="post" action="somepage"> <h2>TinyMCE with absolute URLs on links and images</h2> <textarea id="absurls" name="absurls" cols="85" rows="10"></textarea> <h2>TinyMCE with absolute URLs and including domain on links and images</h2> <textarea id="abshosturls" name="abshosturls" cols="85" rows="10"></textarea> <h2>TinyMCE with relative URLs on links and images</h2> <textarea id="relurls" name="relurls" cols="85" rows="10"></textarea> <h2>TinyMCE with relative URLs on links and images to a specific page</h2> <textarea id="relurlstopage" name="relurlstopage" cols="85" rows="10"></textarea> <h2>TinyMCE with no url convertion</h2> <textarea id="nourlconvert" name="nourlconvert" cols="85" rows="10"></textarea> </form>
Custom toolbar button example
<script type="text/javascript" src="<your installation path>/tiny_mce/tiny_mce.js"></script> <script type="text/javascript"> tinyMCE.init({ mode : "textareas", theme : "advanced", theme_advanced_buttons1 : "mybutton,bold,italic,underline,separator,strikethrough,justifyleft,justifycenter,justifyright, justifyfull,bullist,numlist,undo,redo,link,unlink", theme_advanced_buttons2 : "", theme_advanced_buttons3 : "", theme_advanced_toolbar_location : "top", theme_advanced_toolbar_align : "left", theme_advanced_statusbar_location : "bottom", plugins : 'inlinepopups', setup : function(ed) { // Add a custom button ed.addButton('mybutton', { title : 'My button', image : 'img/example.gif', onclick : function() { // Add you own code to execute something on click ed.focus(); ed.selection.setContent('<STRONG>Hello world!</STRONG>'); } }); } }); </script> <form method="post" action="somepage"> <textarea name="content" style="width:100%"> </textarea> </form>
SOME JQUERY API
<form method="post" action="somepage"> <textarea id="content" name="content" class="tinymce" style="width:100%"> </textarea> <!-- Some integration calls --> <a href="javascript:;" onmousedown="$('#content').tinymce().show();">[Show]</a> <a href="javascript:;" onmousedown="$('#content').tinymce().hide();">[Hide]</a> <a href="javascript:;" onmousedown="$('#content').tinymce().execCommand('Bold');">[Bold]</a> <a href="javascript:;" onmousedown="alert($('#content').html());">[Get contents]</a> <a href="javascript:;" onmousedown="alert($('#content').tinymce().selection.getContent());">[Get selected HTML]</a> <a href="javascript:;" onmousedown="alert($('#content').tinymce().selection.getContent({format : 'text'}));">[Get selected text]</a> <a href="javascript:;" onmousedown="alert($('#content').tinymce().selection.getNode().nodeName);">[Get selected element]</a> <a href="javascript:;" onmousedown="$('#content').tinymce().execCommand('mceInsertContent',false,'<b>Hello world!!</b>');">[Insert HTML]</a> <a href="javascript:;" onmousedown="$('#content').tinymce().execCommand('mceReplaceContent',false,'<b>{$selection}</b>');">[Replace selection]</a> </form>
1 楼
jajawu
2011-01-27