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},样式图片脚本分开路径,确实达到了一定在后台管理方便的目的,但 ...
随机推荐
- 启用MySQL查询缓存
启用MySQL查询缓存能够极大地减低数据库server的CPU使用率,实际使用情况是:开启前CPU使用率120%左右,开启后降到了10%. 查看查询缓存情况: mysql> show varia ...
- 使用Filter防止浏览器缓存页面或请求结果
仅仅须要两步: 1.定义一个Filter: /** * 防止浏览器缓存页面或请求结果 * @author XuJijun * */ public class NoCacheFilter impleme ...
- C#类索引器的使用
索引器提供了一种可以让类被当作数组进行访问的方式.在C#中,类索引器是通过this的属性实现的.index.ToString("D2")将index转换成一个具有两个字符宽度的字符 ...
- Spring MVC Junit4 单元測试 JunitTest
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvSmVyb21lX3M=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA ...
- OpenCV 2.2版本号以上显示图片到 MFC 的 Picture Control 控件中
OpenCV 2.2 以及后面的版本号取消掉了 CvvImage.h 和CvvImage.cpp 两个文件,直接导致了苦逼的程序猿无法调用里面的显示函数来将图片显示到 MFC 的 Picture Co ...
- [Javascript] Other functor
EventStream: You can use RxJS, BaconJS or any reactive programming lib you want: var id_s = map(func ...
- vim中设置Python自动补全
转自:http://blog.csdn.net/wangzhuo_0717/article/details/6942428 在VIM里面增加python的autocomplete功能的做法如下: 1. ...
- Ruby on Rails Tutorial 第四章 Rails背后的Ruby 之 类
Ruby和其他面向对象的语言一样,使用类来组织方法,然后实例化类,创建对象.1.构造方法使用双引号是字符串的字面构造方法,也可以使用“具名构造方法”,即在类名上调用new方法 >> s=& ...
- Starship Troopers
Problem Description You, the leader of Starship Troopers, are sent to destroy a base of the bugs. Th ...
- 使用JS制作一个鼠标可拖的DIV(四)——缩放
原理与鼠标拖动 DIV 相同. 下面就先实现一个在DIV的右上角显示一个小正方形(类似). 当鼠标按下并拖动时,DIV会以要拖动的元素的左下角的坐标点定位,根据鼠标的拖动,按比例的扩大或缩小. 一.思 ...