tinymce 应用二

最新推荐文章于 2024-09-05 10:29:10 发布

xpmwgcwm

最新推荐文章于 2024-09-05 10:29:10 发布

阅读量110

点赞数

分类专栏： JavaScript 文章标签： tinymce Java IE Cache

本文链接：https://blog.csdn.net/xpmwgcwm/article/details/83557260

版权

JavaScript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

[color=red]在源代码编辑器和所见即所得编辑器之间进行切换[/color]


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

[color=red]ToolBar enable and disable[/color]


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

[color=red]编辑一个整个页面[/color]


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

[color=red]Load on demand example[/color]


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

[color=red]启用GZIP的压缩进行加载[/color]


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

[color=red]Setup editor events 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",
    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>

[color=red]多个实例共享一个漂浮的Toolbar[/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_toolbar_location : "external",

});
</script>

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

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