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

tinymce 应用 三

阅读更多
在ToolBar上添加一个listbox
<script type="text/javascript" src="<your installation path>/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
// Creates a new plugin class and a custom listbox
tinymce.create('tinymce.plugins.ExamplePlugin', {
    createControl: function(n, cm) {
        switch (n) {
            case 'mylistbox':
                var mlb = cm.createListBox('mylistbox', {
                     title : 'My list box',
                     onselect : function(v) {
                         tinyMCE.activeEditor.windowManager.alert('Value selected:' + v);
                     }
                });

                // Add some values to the list box
                mlb.add('Some item 1', 'val1');
                mlb.add('some item 2', 'val2');
                mlb.add('some item 3', 'val3');

                // Return the new listbox instance
                return mlb;

            case 'mysplitbutton':
                var c = cm.createSplitButton('mysplitbutton', {
                    title : 'My split button',
                    image : 'img/example.gif',
                    onclick : function() {
                        tinyMCE.activeEditor.windowManager.alert('Button was clicked.');
                    }
                });

                c.onRenderMenu.add(function(c, m) {
                    m.add({title : 'Some title', 'class' : 'mceMenuItemTitle'}).setDisabled(1);

                    m.add({title : 'Some item 1', onclick : function() {
                        tinyMCE.activeEditor.windowManager.alert('Some  item 1 was clicked.');
                    }});

                    m.add({title : 'Some item 2', onclick : function() {
                        tinyMCE.activeEditor.windowManager.alert('Some  item 2 was clicked.');
                    }});
                });

                // Return the new splitbutton instance
                return c;
        }

        return null;
    }
});

// Register plugin with a short name
tinymce.PluginManager.add('example', tinymce.plugins.ExamplePlugin);

// Initialize TinyMCE with the new plugin and listbox
tinyMCE.init({
    plugins : '-example', // - tells TinyMCE to skip the loading of the plugin
    mode : "textareas",
    theme : "advanced",
    
});
</script>

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

Menu button example
<script type="text/javascript" src="<your installation path>/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
// Creates a new plugin class and a custom listbox
tinymce.create('tinymce.plugins.ExamplePlugin', {
	createControl: function(n, cm) {
		switch (n) {
			case 'mymenubutton':
				var c = cm.createMenuButton('mymenubutton', {
					title : 'My menu button',
					image : 'img/example.gif',
					icons : false
				});

				c.onRenderMenu.add(function(c, m) {
					var sub;

					m.add({title : 'Some item 1', onclick : function() {
						tinyMCE.activeEditor.execCommand('mceInsertContent', false, 'Some item 1');
					}});

					m.add({title : 'Some item 2', onclick : function() {
						tinyMCE.activeEditor.execCommand('mceInsertContent', false, 'Some item 2');
					}});

					sub = m.addMenu({title : 'Some item 3'});

					sub.add({title : 'Some item 3.1', onclick : function() {
						tinyMCE.activeEditor.execCommand('mceInsertContent', false, 'Some item 3.1');
					}});

					sub.add({title : 'Some item 3.2', onclick : function() {
						tinyMCE.activeEditor.execCommand('mceInsertContent', false, 'Some item 3.2');
					}});
				});

				// Return the new menu button instance
				return c;
		}

		return null;
	}
});

// Register plugin with a short name
tinymce.PluginManager.add('example', tinymce.plugins.ExamplePlugin);

// Initialize TinyMCE with the new plugin and menu button
tinyMCE.init({
	plugins : '-example', // - tells TinyMCE to skip the loading of the plugin
	mode : "textareas",
	theme : "advanced",
	theme_advanced_buttons1 : "mymenubutton,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"
});
</script>

<form method="post" action="somepage">
	<textarea name="content" style="width:100%">
	</textarea>
</form>
分享到:
评论

相关推荐

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

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

    vue3中使用tinyMCE

    在Vue3中集成TinyMCE是一个常见的需求,特别是在构建富文本编辑器场景下。TinyMCE是一个功能强大的JavaScript WYSIWYG(所见即所得)编辑器,它...通过这种方式,你可以在Vue3应用中轻松创建功能丰富的富文本编辑器。

    tinymce3官方英文语言包en

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

    Vue3使用富文本框tinymce

    Vue3与TinyMCE的整合是现代Web开发中创建富文本编辑器的一种常见方式。TinyMCE是一款功能强大的开源富文本编辑器,提供丰富的编辑选项和自定义能力,而Vue3则是JavaScript框架Vue的最新版本,以其响应式特性和优化...

    tinymce 汉化语言包

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

    tinymce3网页编译器

    TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器,由JavaScript写成。它对IE6+和Firefox1.5+都...最重要的是,TinyMCE是一个根据LGPL license发布的自由软件,你可以把它用于商业应用。 就像csdn网站的编译器。

    tinymce4.7.5

    3. **插件支持**:TinyMCE 具有强大的插件系统,允许开发者添加自定义功能,如拼写检查、代码编辑、表格工具等。 4. **响应式设计**:4.7.5版本可能优化了在不同设备和屏幕尺寸上的显示效果,确保在移动设备上也能...

    tinymce_powerpaste-master

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

    TinyMCE自定义上传图片

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

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

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

    tinymce粘贴word插件powerpaste

    3. 初始化 Tinymce 编辑器时,将 Powerpaste 作为插件引入。 4. 配置 Powerpaste,如设置默认粘贴行为、禁用某些功能等。 5. 测试粘贴功能,确认 Word 内容能正确无损地导入到 Tinymce 编辑器中。 通过以上步骤,你...

    编辑器tinymce插件powerpaste源码

    三、应用指导 1. 安装与配置 在使用PowerPaste插件前,需要先将其添加到TinyMCE的配置中。通过在TinyMCE初始化时指定plugins参数,将"powerpaste"加入其中,然后在toolbar参数中添加相应的按钮,使用户可以通过界面...

    tinymce离线资源

    3. **license.txt**:包含了Tinymce的许可协议,使用这些资源时务必遵循其中的条款,以避免版权问题。 4. **plugins**:这个目录包含了一系列的插件,每个插件都是Tinymce的一个扩展功能,如表格、代码编辑、拼写...

    tinymce3官方中文语言包zh

    TinyMCE是一款强大的所见即所得(WYSIWYG)富文本编辑器,广泛应用于网页内容编辑、CMS系统以及各种Web应用...如果你的项目或应用中使用了TinyMCE 3,并且需要面向中文用户,那么这个语言包将是一个不可或缺的组件。

    tinyMCE本地图片预览

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

    tinymce3官方韩语语言包ko

    TinyMCE是一款强大的所见即所得(WYSIWYG)富文本编辑器,广泛应用于网页内容编辑、CMS系统以及各种在线应用中。该编辑器以其高度可定制性、丰富的插件支持和多语言支持而备受青睐。"tinymce3官方韩语语言包ko"是...

    tinymce

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

    TinyMCE

    7. **插件扩展**:TinyMCE 3.0支持大量的第三方插件,如拖放上传、代码编辑器、预览等,可以极大地扩展编辑器的功能。 在实际应用中,TinyMCE常被用于博客系统、论坛、内容管理系统(CMS)如WordPress,以及任何...

    tinymce静态资源文件

    3. 插件(Plugins):Tinymce的强大之处在于其丰富的插件库。例如,'image'插件允许用户上传和管理图片,'code'插件则提供了源代码视图。每个插件都有自己的JS和CSS文件,如`plugins/image/plugin.min.js`。 4. ...

    tinymce3官方日语语言包ja

    "tinymce3官方日语语言包ja"是专门为TinyMCE 3.x版本设计的本地化资源,旨在为日本用户提供更加友好的操作界面。 这个语言包包含了所有TinyMCE 3.x用户界面中的文本,包括菜单项、对话框、提示信息等,全部翻译成了...

Global site tag (gtag.js) - Google Analytics