tinyMCE自定义添加图片插件
需求:
在富文本编辑器中插入图片,图片来自用户可以自己上传的图片库。
本来可以用比较恶心的方式,也就是直接用tinyMCE自带的插入图片插件来实现。恶心是因为这个图片插件需要用户填入图片的url。
想来想去,虽然是内部管理平台产品1期,但作为一个21世纪的程序猿做这样的事儿太low了,而且也怕被同事围殴,还是看了看tinyMCE的插件文档以及官方的image插件。
plugin.js
tinymce.PluginManager.add('imageSelector', function(editor, url) {
// Add a button that opens a window
editor.addButton('imageSelector', {
icon: 'image',
tooltip:"select image from image lib",
onclick: function() {
editor.settings.imageSelectorCallback(function(r){
console.log('inserting image to editor: '+ r);
editor.execCommand('mceInsertContent', false, '<img alt="Smiley face" height="42" width="42" src="' + r + '"/>');
});
}
}); });
写完并测试后觉得挺简单的,基本只要execCommand就搞定图片插入了。
本来还担心图片的缩放功能是image自己实现的,测试后发现完全不用担心了:插入进去的图片已经可以缩放调整大小了,赞!
调用页面的js
var imageSelector;
var imageSelectedCallback = null;
function showImageSelector(cb){
imageSelectedCallback = cb;
imageSelector = new ImageSelector('#imageSelectorDiv', {}, function(type, data){ // 初始化图片选择弹窗
});
$('#imageSelectorPop').modal({keyboard: true, backdrop: 'static'});
} function insertImage(){
if(imageSelector.selectedItems.length == 0)
return ; imageSelectedCallback(imageSelector.selectedItems[0].url); // 调用插件内部回调把图片插入到编辑器中
$('#imageSelectorPop').modal('hide');
}
tinymce.init({
selector: '.richEditor',
width: 820,
height: 200,
plugins: [
'advlist autolink lists link imageSelector hr',
'visualblocks visualchars code',
'textcolor colorpicker textpattern'
],
toolbar: 'styleselect | forecolor backcolor | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link imageSelector',
imageSelectorCallback: showImageSelector, // 点击编辑器上的图片按钮后的回调方法
setup: function(editor) {
editor.on('init', function(e) { // tinyMCE初始化完成事件
tinyMCE.editors[0].setContent('<%-topic.content%>'); // 设置之前编辑的内容
});
}
});
基本上是插件外部和内部都保留对方的一个callback,双方在事件发生时互相调用。
tinyMCE自定义添加图片插件的更多相关文章
- easyui+webuploader+ckeditor实现插件式多图片上传-添加图片权限(图片上传人是谁,只能看到自己的图片)
需求: 实现过程及思路 1.先页面布局 <html xmlns="http://www.w3.org/1999/xhtml"> <head runat=" ...
- Tinymce 编辑器添加自定义图片管理插件
在使用Tinymce的过程中需要用到图片上传功能,而提供的上传插件在上传文件后是给了一个连接地址,就想用户需要什么图片,不能用最直观的方式表现出来么! 虽然官网上也有一个文件管理的插件moxieman ...
- 改善用户体验之wordpress添加图片弹出层效果 (插件 FancyBox)
下面说说在改善用户体验之wordpress添加图片弹出层效果.效果图如下: 像这篇文章如何在百度搜索结果中显示网站站点logo? 文章内有添加图片,没加插件之前用户点击图片时,是直接_black打 ...
- jQuery自定义滚动条样式插件mCustomScrollbar
如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScro ...
- 我利用网上代码开发的JQuery图片插件
我利用网上代码开发的JQuery图片插件 代码如下 (function($){ $.fn.FocusPic = function(options){ var defaults = { interval ...
- #添加图片,最多只能上传9张.md
#添加图片,最多只能上传9张.md 前端页面: ```javascript <form id="imgForm" enctype="multipart/form-d ...
- jQuery.hhNewSilder 滚动图片插件
/** * jQuery.hhNewSilder 滚动图片插件 * User: huanhuan * QQ: 651471385 * Email: th.wanghuan@gmail.com ...
- C#word(2007)操作类--新建文档、添加页眉页脚、设置格式、添加文本和超链接、添加图片、表格处理、文档格式转化
转:http://www.cnblogs.com/lantionzy/archive/2009/10/23/1588511.html 1.新建Word文档 #region 新建Word文档/// &l ...
- phpCMS V9 自定义添加 全局变量{SKIN_PATH}方法
前言:目前v9版本新增{js_path},{css_path},{img_path}三个全局变量,代替2008版本中{skin_path},样式图片脚本分开路径,确实达到了一定在后台管理方便的目的,但 ...
随机推荐
- 错误号码2003 Can't connect to MySQL server 'localhost' (0)
错误描写叙述 错误原因 近期,我一直都能够用SQLyog连接本地数据库,可是近几天却无法连接:而且一直都报上述错误,我查阅了非常多资料,发现有非常多中说法 总结一下 第一,MySQL中的my.ini出 ...
- zookeeper的C#Client
最近在搭一套soa, 服务使用java/scala 的finagle 协议使用thrift 然后 finagle默认服务端会是使用zookeeper作为节点存储.. 所以想要访问具体服务,需要先通过 ...
- [Angular 2] *ngFor
heros.ts: import {Component} from "@angular/core"; const HEROES = [ {id: 1, name:'Superman ...
- CODE:BLOCK中的CreateProcess: No such file or directory
现象: WINDOWS安装MINGW4.8.1,环境变量设置后,命令行窗体G++能够执行.但编译文件时提示: CreateProcess: No such file or directory. 安装C ...
- grunt自动化工具
Grunt和 Grunt 插件是通过 npm 安装并管理的,npm是 Node.js 的包管理器. 安装 CLI 首先,需要先将Grunt命令行(CLI)安装到全局环境中. npm install - ...
- ajax生成html双引号问题
//动态创建列表 function createLists(result){ var len=result.length,i; for(i=0;i<len;i++){ $myLi = $(&qu ...
- Android(java)学习笔记106-1:深入分析Java ClassLoader原理
1. 前言: Android中的动态加载机制能更好的优化我们的应用,同时实现动态的更新,这就便于我们管理我们的应用,通过插件化来减轻我们的内存以及CPU消耗,在不发布新版本的情况下能更新某些模块. 当 ...
- 用RSA实现Web单点登录密码的加密传输
在使用通用权限管理系统(吉日嘎拉)的单点登录功能时,对登录密码使用了RSA加密(非对称加密),有使用这个权限管理系统的可参考下. 前端部分,请引用以下几个js文件: <script type=& ...
- python(1) -文件操作
很多时候我们需要对文件进行一些操作,比如读取并分析日志文件,写入日志文件等等.显然python也内置了对文件进行操作的函数. 读文件: >>> f = open('a.log','r ...
- 1045 | error connecting to master 'slave_user@192.168.0.75:3306' - retry-time: 6
mysql 主从复制问题整理 问题: 1045 | error connecting to master 'slave_user@192.168.0.75:3306' - retry-t ...