tinymce 应用 一

原文地址：http://ssh-2009-126-com.javaeye.com/blog/599447

添加去除Tool Bar

Java代码
  1. <script type="text/javascript" src="<your installation path>/tiny_mce/tiny_mce.js"></script>   
  2. <script type="text/javascript">   
  3. tinyMCE.init({   
  4.      mode : "textareas",   
  5.      theme : "advanced"  
  6. });   
  7.   
  8. function toggleEditor(id) {   
  9.     if (!tinyMCE.get(id))   
  10.          tinyMCE.execCommand('mceAddControl', false, id);   
  11.     else  
  12.          tinyMCE.execCommand('mceRemoveControl', false, id);   
  13. }   
  14. </script>   
  15.   
  16. <form method="post" action="somepage">   
  17.      <textarea name="content" style="width:100%">   
  18.      </textarea>   
  19. </form>   
  20. <a href="javascript:toggleEditor('content');">Add/Remove editor</a>  


extended_valid_elements and invalid_elements
Java代码
  1. <script type="text/javascript">   
  2. tinyMCE.init({   
  3.      mode : "textareas",   
  4.      theme : "simple",   
  5.      extended_valid_elements : "img[class=myclass|!src|border:0|alt|title|width|height]",   
  6.      invalid_elements : "strong,b,em,i"  
  7. });   
  8. </script>  


editor_selector and editor_deselector
Java代码
  1. <script type="text/javascript" src="<your installation path>/tiny_mce/tiny_mce.js"></script>   
  2. <script type="text/javascript">   
  3. tinyMCE.init({   
  4.      mode : "textareas",   
  5.      theme : "simple",   
  6.      editor_selector : "mceEditor",   
  7.      editor_deselector : "mceNoEditor"  
  8. });   
  9. </script>   
  10.   
  11. <form method="post" action="somepage">   
  12.      <textarea id="content1" name="content1" class="mceEditor" cols="85" rows="10">This will be a editor, since it has a selector class.</textarea>   
  13.      <textarea id="content2" name="content2" class="mceEditor" cols="85" rows="10">This will be a editor, since it has a selector class.</textarea>   
  14.      <textarea id="content3" name="content3" class="mceNoEditor" cols="85" rows="10">This is not a editor since it has a deselector class.</textarea>   
  15. </form>  


Ajax load/save
Java代码
  1. <script type="text/javascript" src="<your installation path>/tiny_mce/tiny_mce.js"></script>   
  2. <script type="text/javascript">   
  3. tinyMCE.init({   
  4.      mode : "textareas",   
  5.      theme : "advanced"  
  6. });   
  7.   
  8. function ajaxLoad() {   
  9.      var ed = tinyMCE.get('content');   
  10.   
  11.     // Do you ajax call here, window.setTimeout fakes ajax call   
  12.      ed.setProgressState(1); // Show progress   
  13.      window.setTimeout(function() {   
  14.          ed.setProgressState(0); // Hide progress   
  15.          ed.setContent('HTML content that got passed from server.');   
  16.      }, 3000);   
  17. }   
  18.   
  19. function ajaxSave() {   
  20.      var ed = tinyMCE.get('content');   
  21.   
  22.     // Do you ajax call here, window.setTimeout fakes ajax call   
  23.      ed.setProgressState(1); // Show progress   
  24.      window.setTimeout(function() {   
  25.          ed.setProgressState(0); // Hide progress   
  26.          alert(ed.getContent());   
  27.      }, 3000);   
  28. }   
  29. </script>   
  30.   
  31. <form method="post" action="somepage">   
  32.      <textarea name="content" style="width:100%">   
  33.      </textarea>   
  34. </form>  

readonly
Java代码
  1. <script type="text/javascript" src="<your installation path>/tiny_mce/tiny_mce.js"></script>   
  2. <script type="text/javascript">   
  3. tinyMCE.init({   
  4.      mode : "textareas",   
  5.      theme : "advanced",   
  6.      readonly : true  
  7. });   
  8. </script>   
  9.   
  10. <form method="post" action="somepage">   
  11.      <textarea name="content" style="width:100%">   
  12.      </textarea>   
  13. </form>  

URL config example
Java代码
  1. <script type="text/javascript" src="<your installation path>/tiny_mce/tiny_mce.js"></script>   
  2. <script type="text/javascript">   
  3. tinyMCE.init({   
  4.      mode : "exact",   
  5.      elements : 'absurls',   
  6.      theme : "advanced",   
  7.      plugins : 'advlink,advimage',   
  8.      relative_urls : false  
  9. });   
  10.   
  11. tinyMCE.init({   
  12.      mode : "exact",   
  13.      elements : 'abshosturls',   
  14.      theme : "advanced",   
  15.      plugins : 'advlink,advimage',   
  16.      relative_urls : false,   
  17.      remove_script_host : false  
  18. });   
  19.   
  20. tinyMCE.init({   
  21.      mode : "exact",   
  22.      elements : 'relurls',   
  23.      theme : "advanced",   
  24.      plugins : 'advlink,advimage',   
  25.      relative_urls : true // Default value   
  26. });   
  27.   
  28. tinyMCE.init({   
  29.      mode : "exact",   
  30.      elements : 'relurlstopage',   
  31.      theme : "advanced",   
  32.      plugins : 'advlink,advimage',   
  33.      relative_urls : true, // Default value   
  34.      document_base_url : 'http://tinymce.moxiecode.com/'  
  35. });   
  36.   
  37. tinyMCE.init({   
  38.      mode : "exact",   
  39.      elements : 'nourlconvert',   
  40.      theme : "advanced",   
  41.      plugins : 'advlink,advimage',   
  42.      convert_urls : false  
  43. });   
  44. </script>   
  45.   
  46. <form method="post" action="somepage">   
  47.      <h2>TinyMCE with absolute URLs on links and images</h2>   
  48.      <textarea id="absurls" name="absurls" cols="85" rows="10"></textarea>   
  49.   
  50.      <h2>TinyMCE with absolute URLs and including domain on links and images</h2>   
  51.      <textarea id="abshosturls" name="abshosturls" cols="85" rows="10"></textarea>   
  52.   
  53.      <h2>TinyMCE with relative URLs on links and images</h2>   
  54.      <textarea id="relurls" name="relurls" cols="85" rows="10"></textarea>   
  55.   
  56.      <h2>TinyMCE with relative URLs on links and images to a specific page</h2>   
  57.      <textarea id="relurlstopage" name="relurlstopage" cols="85" rows="10"></textarea>   
  58.   
  59.      <h2>TinyMCE with no url convertion</h2>   
  60.      <textarea id="nourlconvert" name="nourlconvert" cols="85" rows="10"></textarea>   
  61. </form>  

SOME JQUERY API
Java代码
  1. <form method="post" action="somepage">   
  2.      <textarea id="content" name="content" class="tinymce" style="width:100%">   
  3.      </textarea>   
  4.   
  5.      <!-- Some integration calls -->   
  6.      <a href="javascript:;" onmousedown="$('#content').tinymce().show();">[Show]</a>   
  7.      <a href="javascript:;" onmousedown="$('#content').tinymce().hide();">[Hide]</a>   
  8.      <a href="javascript:;" onmousedown="$('#content').tinymce().execCommand('Bold');">[Bold]</a>   
  9.      <a href="javascript:;" onmousedown="alert($('#content').html());">[Get contents]</a>   
  10.      <a href="javascript:;" onmousedown="alert($('#content').tinymce().selection.getContent());">[Get selected HTML]</a>   
  11.      <a href="javascript:;" onmousedown="alert($('#content').tinymce().selection.getContent({format : 'text'}));">[Get selected text]</a>   
  12.      <a href="javascript:;" onmousedown="alert($('#content').tinymce().selection.getNode().nodeName);">[Get selected element]</a>   
  13.      <a href="javascript:;" onmousedown="$('#content').tinymce().execCommand('mceInsertContent',false,'<b>Hello world!!</b>');">[Insert HTML]</a>   
  14.      <a href="javascript:;" onmousedown="$('#content').tinymce().execCommand('mceReplaceContent',false,'<b>{$selection}</b>');">[Replace selection]</a>   
  15. </form>