[color=red]添加去除Tool Bar[/color]
[color=red]extended_valid_elements and invalid_elements [/color]
[color=red]editor_selector and editor_deselector [/color]
[color=red]Multiple configs/inits[/color]
[color=red]Ajax load/save [/color]
[color=red]readonly[/color]
[color=red]URL config example[/color]
[color=red]Custom toolbar button example[/color]
[color=red]SOME JQUERY API[/color]
<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>
[color=red]extended_valid_elements and invalid_elements [/color]
<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>
[color=red]editor_selector and editor_deselector [/color]
<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>
[color=red]Multiple configs/inits[/color]
<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>
[color=red]Ajax load/save [/color]
<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>
[color=red]readonly[/color]
<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>
[color=red]URL config example[/color]
<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>
[color=red]Custom toolbar button example[/color]
<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>
[color=red]SOME JQUERY API[/color]
<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>