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",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();"></a><a href="javascript:;" onmousedown="$('#content').tinymce().hide();"></a><a href="javascript:;" onmousedown="$('#content').tinymce().execCommand('Bold');"></a><a href="javascript:;" onmousedown="alert($('#content').html());"></a><a href="javascript:;" onmousedown="alert($('#content').tinymce().selection.getContent());"></a><a href="javascript:;" onmousedown="alert($('#content').tinymce().selection.getContent({format : 'text'}));"></a><a href="javascript:;" onmousedown="alert($('#content').tinymce().selection.getNode().nodeName);"></a><a href="javascript:;" onmousedown="$('#content').tinymce().execCommand('mceInsertContent',false,'<b>Hello world!!</b>');"></a><a href="javascript:;" onmousedown="$('#content').tinymce().execCommand('mceReplaceContent',false,'<b>{$selection}</b>');"></a></form>
页:
[1]