tinymce 使用二 _Web前端

tinymce 应用二
在源代码编辑器和所见即所得编辑器之间进行切换

<form method="post" action="somepage">
	<textarea name="content" style="width:100%">
	</textarea>
	<a href="#" onclick="tinyMCE.execCommand('mceToggleEditor',false,'content');">[Toggle WYSIWYG]</a>
</form>

ToolBar enable and disable

<script type="text/javascript" src="<your installation path>/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
	theme : "advanced",
	mode : "textareas",
	plugins : "noneditable"
});
</script>

<form method="post" action="somepage">
	<textarea name="content" style="width:100%">
		<p>Editable content.</p>
		<p class="mceNonEditable">Non editable content, can't be modified in IE or FF.</p>
		<p>Editable content.</p>
		<p class="mceNonEditable">Non editable content, can't be modified in IE or FF.</p>
	</textarea>
</form>

编辑一个整个页面

<script type="text/javascript" src="<your installation path>/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
	theme : "advanced",
	mode : "textareas",
	plugins : "fullpage",
	theme_advanced_buttons3_add : "fullpage"
});
</script>

<form method="post" action="somepage">
	<textarea name="content" style="width:100%">
	</textarea>
</form>

Load on demand example

<script type="text/javascript" src="<your installation path>/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
function setup() {
   tinyMCE.init({
      mode : "textareas",
      theme : "advanced",
}
</script>

<form method="post" action="somepage">
	<textarea name="content" style="width:100%">
	</textarea>
	<a href="javascript:setup();">Load TinyMCE</a>
</form>

启用GZIP的压缩进行加载

<script type="text/javascript" src="<your installation path>/tiny_mce/tiny_mce_gzip.js"></script>
<script type="text/javascript">
function setup() {
   tinyMCE_GZ.init({
      themes : "advanced",
      
      languages : "en",
      disk_cache : true
   }, function() {
      tinyMCE.init({
         mode : "textareas",
         theme : "advanced",     
      });
   });
}
</script>

<form method="post" action="somepage">
	<textarea name="content" style="width:100%">
	</textarea>
	<a href="javascript:setup();">Load TinyMCE</a>
</form>

Setup editor events 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",
    plugins : 'inlinepopups',
    setup : function(ed) {
        // Display an alert onclick
        ed.onClick.add(function(ed) {
            ed.windowManager.alert('User clicked the editor.');
        });

        // Add a custom button
        ed.addButton('mybutton', {
            title : 'My button',
            image : 'img/example.gif',
            onclick : function() {
                ed.selection.setContent('<STRONG>Hello world!</STRONG>');
            }
        });
    }
});
</script>

<form method="post" action="somepage">
	<textarea name="content" style="width:100%">
	</textarea>
</form>

多个实例共享一个漂浮的Toolbar

<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_toolbar_location : "external",

});
</script>

<form method="post" action="somepage">
	<textarea name="content1" style="width:100%">
	</textarea>

	<textarea name="content2" style="width:100%">
	</textarea>
</form>

tinymce 使用 二

tinymce 使用二