javaeye的文章输入的可视化输入是用开源的tinymce,其中插入代码的功能是扩展tinymce
其中主要部分:
(function() {
tinymce.create('tinymce.plugins.JavaEyePlugin', {
init : function(ed, url) {
ed.addCommand('javaeyeCode', function() {
ed.windowManager.open({ // 弹出插入代码的窗口
file : url + '/code.htm',
width : 580,
height : 400,
inline : 1
}, {
plugin_url : url
});
});
// Register buttons
ed.addButton('code', {
title : 'javaeye.code',
image : url + '/img/code.gif',
cmd : 'javaeyeCode'
});
}
});
// Register plugin
tinymce.PluginManager.add('javaeye', tinymce.plugins.JavaEyePlugin);
})();
有关tinymce plugin的相关可看:
http://www.inpeck.com/TinyMceManual/customization_plugins.html 定制 - 创建一个插件
http://wiki.moxiecode.com/index.php/TinyMCE:Create_plugin/3.x
tinymce的plugins文件夹下面有许多实现的plugin,可参详和模仿。
css |
插件的 CSS 文件。 |
docs |
插件的说明文档。 |
images |
插件需要的图片。 |
jscripts |
插件对话框需要的JS代码。 |
langs |
插件需要的语言文件。 |
editor_plugin.js |
编辑器插件的JS文件(压缩)。 |
editor_plugin_src.js |
编辑器插件的JS文件(源代码)。 |
somedialog.htm |
插件需要的 HTML 对话框文件。 |
分享到:
相关推荐
《TinyMCE应用四——为TinyMCE添加一个Plugin》 TinyMCE是一款强大的富文本编辑器,广泛应用于网页内容编辑、CMS系统等场景。它提供了丰富的API和自定义插件功能,允许开发者根据需求定制功能。在本篇中,我们将...
在这个场景下,我们讨论的是Layui与tinymce的集成,tinymce是一款功能强大的富文本编辑器,被广泛应用于各种项目中。 tinymce的封装主要是为了在Layui框架内无缝使用,提供一个与Layui风格一致的编辑体验。以下是对...
3. **配置TinyMCE**:在你的项目中找到并编辑`plugin.js`文件,这里是你配置TinyMCE插件的地方。添加对Begard的TinyMCE文件管理器插件的引用,通常会涉及到注册插件、设置按钮和配置项等。 4. **初始化插件**:在...
2. **放置插件**:将解压得到的`plugin`目录放入TinyMCE的`plugins`目录下。确保这个目录结构与TinyMCE的其他插件保持一致。 3. **配置TinyMCE**:在你的TinyMCE初始化配置中,引入刚添加的line-height插件。这可以...
或者,如果你希望使用Vue3的插件版本,可以安装`vue-tinymce-plugin`: ```bash npm install vue-tinymce-plugin --save ``` 安装完成后,接下来我们需要在Vue组件中引入TinyMCE。Vue3的`setup`函数是用于组件初始...
tinymce 富文本编辑器导出插件, 支持导出word 导出pdf,可通过配置修改下载文件名称
** Tinymce 简介** Tinymce 是一款流行的开源富文本编辑器,它提供了丰富的功能,让用户在网页上能够方便地编辑、格式化文本,类似于Microsoft Word的在线版本。Tinymce 支持多种语言,包括中文,并且可高度自定义...
moodle_hideabox TinyMCE ...兼容性需要 Moodle 2.4(由于进行了更改以允许特定于 Moodle 的 TinyMCE 插件)安装说明 Install the TinyMCE plugin:1)copy the entire folder in to your moodle TinyMCE plugins direct
客户要求老系统能直接把word中的图片粘贴进编辑器中,否则一张张上传太麻烦了。...于是网上找到这个插件`tinymce-powerpaste-plugin`,可以直接复制黏贴word内容,满足其要求,支持tinymce4和tinymce5。
【tinymce-plugin_image-zoom】是一个专门为TinyMCE编辑器设计的插件,它扩展了TinyMCE的功能,使得用户在编辑过程中可以实现图片的缩放功能。TinyMCE是一款非常流行的富文本编辑器,广泛应用于网站内容管理系统、...
TinyMCE是一款强大的开源富文本编辑器,广泛应用于网页内容编辑和内容管理系统中。它提供了丰富的功能和插件,使得用户可以轻松创建和编辑复杂的文本格式。本文将深入讲解TinyMCE中的“格式刷”(Format Painter)...
tinymce.PluginManager.add('bulk_image_upload', function(editor, url) { // 插件的逻辑代码将放在这里 }); ``` 3. **创建用户界面**:为插件添加一个按钮到TinyMCE工具栏。这可以通过`editor.addButton`方法...
解决tinymce编辑器内不能预览视频,替换tinymce/plugins/media/plugin.min.js即可。因为默认富文本编辑器内是一个img标签,并不能播放。
通常,插件目录应包含一个`plugin.js`文件,这是TinyMCE识别插件的核心文件。 3. **初始化TinyMCE**:在TinyMCE的初始化配置中,通过`plugins`参数引入你的自定义插件。例如: ```javascript tinymce.init({ ...
tinymce.PluginManager.add('plugintest', tinymce.plugins.plugintest); ``` ##### 4. 插件方法详解 - **init()**:初始化插件。当插件被加载时,此方法会被自动调用。 - **参数**: - **editor**: 当前编辑...
每个插件都有自己的JS和CSS文件,如`plugins/image/plugin.min.js`。 4. 语言包(Languages):Tinymce支持多语言,如`langs/zh_CN.js`是中文语言包,提供用户界面的中文翻译。 5. 配置文件(Configuration):...
tinymce.PluginManager.add('myplugin', function(editor, url) { // 插件代码 }); ``` 三、插件功能实现 1. 增加按钮:为了使插件在编辑器工具栏中可见,我们需要定义按钮。在上述的插件函数中,可以使用`editor...
tinymce-plugins This is tinymce plugins 前言 因为项目需要用到富文本编辑器众多富文本编辑器中,选择了 Tinymce,根据项目需要对Tinymce 进行扩展和增强插件,记录一下,并同时分享给需要帮助的人。 QQ邮箱: 简述...
- 在`./tinymce/js/tinymce/plugins`目录下新建一个名为`uploadimage`的文件夹,并放入`plugin.min.js`文件。 - 更新TinyMCE的初始化配置,在`plugins`数组中添加`uploadimage`插件,并确保在`toolbar1`和`toolbar2`...
tinyMCE 富文本编辑器 line-height 行高插件。 tinyMCE富文本编辑器line-height行高插件,下载后放在tinyMCE插件的plugins文件夹中,之后初始化中引入plugins,即可在toolbar中展示 tinyMCE line-height 行高插件