tinymce 应用 一

隐形的翅膀

添加去除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);elsetinyMCE.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 called.setProgressState(1); // Show progresswindow.setTimeout(function() {ed.setProgressState(0); // Hide progressed.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 called.setProgressState(1); // Show progresswindow.setTimeout(function() {ed.setProgressState(0); // Hide progressalert(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 valuedocument_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 clicked.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>