`
隐形的翅膀
  • 浏览: 497110 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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  
 

相关推荐

    tinymce 应用四---为tinymce添加一个plugin

    《TinyMCE应用四——为TinyMCE添加一个Plugin》 TinyMCE是一款强大的富文本编辑器,广泛应用于网页内容编辑、CMS系统等场景。它提供了丰富的API和自定义插件功能,允许开发者根据需求定制功能。在本篇中,我们将...

    tinymce 汉化语言包

    TinyMCE是一款强大的所见即所得(WYSIWYG)富文本编辑器,广泛应用于网页内容编辑、CMS系统以及各种在线应用中。它提供了丰富的功能,包括文本格式化、图片处理、链接插入等,同时也支持自定义插件和主题,以满足...

    tinymce4.7.5

    TinyMCE 4.7.5 是一个流行的开源富文本编辑器,被广泛应用于网站建设和内容管理系统中。这个版本的 TinyMCE 提供了丰富的文本编辑功能,支持Vue.js框架的集成,使得在Web应用中实现高度定制化的文本编辑体验变得容易...

    tinymce_powerpaste-master

    TinyMCE是一款开源的JavaScript富文本编辑器,被广泛应用于网页和Web应用程序中,提供类似Microsoft Word的编辑体验。用户可以创建、编辑和格式化文本,插入图片、链接等元素,同时支持自定义配置和扩展。 ...

    tinymce powerpaste插件(兼容最新tinymce5.2.0)

    TinyMCE是一个强大的...总的来说,TinyMCE PowerPaste插件通过提供高级的粘贴功能,极大地提升了用户在TinyMCE编辑器中的体验,特别是对于那些经常需要从其他文档应用中复制内容的用户来说,这是一个非常实用的工具。

    tinymce离线资源

    Tinymce 是一款非常流行的开源富文本编辑器,广泛应用于网页内容编辑,尤其在JavaScript项目中被大量使用。它提供了丰富的功能,包括文字格式化、图片上传、链接插入等,使得用户可以像在Word中一样方便地编辑网页...

    TinyMCE自定义上传图片

    TinyMCE是一款强大的所见即所得(WYSIWYG)文本编辑器,广泛应用于网页内容编辑、CMS系统和各种应用程序中。它提供了丰富的API和插件系统,使得开发者可以定制编辑器的功能,以满足特定需求。在这个场景中,我们将...

    tinymce粘贴word插件powerpaste

    在提供的 "tinymce_powerpaste-master" 压缩包中,通常会包含一个演示(Demo)文件或文件夹,它展示了 Powerpaste 在实际应用中的工作方式。你可以通过运行这个 Demo 来了解如何在 Tinymce 中安装和配置 Powerpaste ...

    tinymce 繁体

    TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器,支持目前流行的...最重要的是,TinyMCE是一个根据LGPL license发布的自由软件,你可以把它用于商业应用。本站采用的就是TinyMCE编辑器,下图是此编辑器的界面。

    tinymce

    【tinymce】是一款知名的富文本编辑器,广泛应用于网页内容编辑和管理,为用户提供类似Microsoft Word的界面和功能,使得非编程人员也能轻松编辑和格式化网页内容。它支持多种语言,包括中文,并且拥有丰富的插件...

    编辑器tinymce插件powerpaste源码

    TinyMCE是一款功能强大的开源富文本编辑器,广泛应用于网页和各种应用程序中,提供丰富的文本格式化、图像处理和交互功能。针对用户在从Microsoft Word等文档处理软件中复制粘贴内容时希望保留原有格式和图片的需求...

    tinyMCE本地图片预览

    tinyMCE是一款非常流行的开源富文本编辑器,广泛应用于各种网站和应用程序中。它提供了丰富的文本编辑功能,包括但不限于格式化文本、插入图像、链接等。在某些场景下,用户可能需要实时预览他们上传的图片,而无需...

    vue3中使用tinyMCE

    在Vue3中集成TinyMCE是一个常见的需求,特别是在构建富文本编辑器场景下。TinyMCE是一个功能强大的JavaScript WYSIWYG(所见即所得)编辑器,它提供了丰富的文本格式化选项,使得用户可以方便地创建和编辑HTML内容。...

    TinyMCE

    TinyMCE是一款强大的开源富文本编辑器,广泛应用于网页内容编辑和内容管理系统中。这个官方包,正如其标签所示,是TinyMCE的3.0版本。TinyMCE以其轻量级、高度可定制和兼容多种浏览器的特点,在Web开发领域备受青睐...

    tinymce静态资源文件

    Tinymce是一款广泛应用于Web开发领域的开源富文本编辑器,它以其强大的功能和良好的用户体验而备受开发者喜爱。在“tinymce4.7.5”这个压缩包中,包含了Tinymce的特定版本——4.7.5的所有静态资源文件,这些文件使得...

    TinyMCE 实现本地图片上传

    TinyMCE是一款强大的富文本编辑器,广泛应用于网页和应用程序中,允许用户创建和编辑具有丰富格式的内容。它提供了丰富的API和插件,使得开发者能够定制编辑器功能以满足特定需求。在本教程中,我们将深入探讨如何在...

    tinymce3官方英文语言包en

    TinyMCE是一款强大的开源富文本编辑器,广泛应用于网页内容编辑和内容管理系统中。这个"tinymce3官方英文语言包en"是针对TinyMCE 3.x版本的一个关键组件,它包含了编辑器用户界面的所有英文语言字符串。这个语言包...

    tinymce格式刷_formatpainter-格式刷插件和用法

    TinyMCE是一款强大的开源富文本编辑器,广泛应用于网页内容编辑和内容管理系统中。它提供了丰富的功能和插件,使得用户可以轻松创建和编辑复杂的文本格式。本文将深入讲解TinyMCE中的“格式刷”(Format Painter)...

    TinyMCE富文本编辑器资源包

    TinyMCE是一款强大的开源富文本编辑器,广泛应用于网页内容编辑和内容管理系统中。这个"TinyMCE富文本编辑器资源包"包含了TinyMCE的最新版本——版本6的相关资源,旨在提供一个功能完备、易用且高度可定制的文本编辑...

    前端富文本tinymce中文包

    富文本编辑器在Web开发中扮演着至关重要的角色,它为用户提供了一种便捷的...结合其强大的API和丰富的插件系统,TinyMCE可以适应各种各样的应用场景,无论是简单的博客编辑,还是复杂的在线文档协作,都能游刃有余。

Global site tag (gtag.js) - Google Analytics