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);
	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