tinymce4.x 上传本地图片(自己写个插件)
tinymce是一款挺不错的html文本编辑器。但是添加图片是直接添加链接,不能直接选择本地图片。
下面我写了一个插件用于直接上传本地图片。
在tinymce的plugins目录下新建一个uploadimage目录,用于存放我新写的上传本地图片的插件。
下面看看plugin.js文件的具体内容。
/**
* tinymce plugin
* Created by jerry on 16/8/5.
*/
tinymce.PluginManager.add('uploadimage', function (editor) { function selectLocalImages() {
var dom = editor.dom;
var input_f = $('<input type="file" name="thumbnail" accept="image/jpg,image/jpeg,image/png,image/gif" multiple="multiple">');
input_f.on('change', function () {
var form = $("<form/>",
{
action: editor.settings.upload_image_url, //设置上传图片的路由,配置在初始化时
style: 'display:none',
method: 'post',
enctype: 'multipart/form-data'
}
);
form.append(input_f);
//ajax提交表单
form.ajaxSubmit({
beforeSubmit: function () {
return true;
},
success: function (data) {
if (data && data.file_path) {
editor.focus();
data.file_path.forEach(function (src) {
editor.selection.setContent(dom.createHTML('img', {src: src}));
})
}
}
});
}); input_f.click();
} editor.addCommand("mceUploadImageEditor", selectLocalImages); editor.addButton('uploadimage', {
icon: 'image',
tooltip: '上传图片',
onclick: selectLocalImages
}); editor.addMenuItem('uploadimage', {
icon: 'image',
text: '上传图片',
context: 'tools',
onclick: selectLocalImages
});
});
下面是组件初始化js代码:
tinymce.init({
selector: "textarea[data-provide='tinymce']",
upload_image_url: '/upload/cloud', //配置的上传图片的路由
height: 400,
plugins: [
'advlist autolink autosave lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen textcolor colorpicker textpattern code uploadimage',
'contextmenu paste'
],
toolbar1: "undo redo | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | fontselect fontsizeselect ",
toolbar2: "forecolor backcolor | bullist numlist | outdent indent | removeformat | link unlink uploadimage | preview fullscreen ",
menubar: false,
//statusbar : false,
content_css: [
'/style/tinymce.css'
]
//参考网站 https://www.tinymce.com/
});
现在运行编辑器菜单如下:
点击图片小图标就可以从本地选择图片上传了。
tinymce4.x 上传本地图片(自己写个插件)的更多相关文章
- tinymce4.x 上传本地图片 (转载)
转载自:http://www.cnblogs.com/fhen/p/5809514.html tinymce4.x 上传本地图片 tinymce是一款挺不错的html文本编辑器.但是添加图片是直接 ...
- KindEditor上传本地图片在ASP.NET MVC的配置
http://www.cnblogs.com/upupto/archive/2010/08/24/1807202.html 本文解决KindEditor上传本地图片在ASP.NET MVC中的配置. ...
- .net mvc4 利用 kindeditor 上传本地图片
http://blog.csdn.net/ycwol/article/details/41824371?utm_source=tuicool&utm_medium=referral 最近在用k ...
- 个人永久性免费-Excel催化剂功能第102波-批量上传本地图片至网络图床(外网可访问)
自我突破,在100+功能后,再做有质量的功能,非常不易,相对录制视频这些轻松活,还是按捺不住去写代码,此功能虽小,但功课也做了不少,希望对真正有需要的群体带来一些惊喜. 背景介绍 图床的使用,一般是写 ...
- 有道云笔记Markdown上传本地图片的方法
有道云笔记截图&保存 方法有多种,例如:开通有道云笔记VIP会员.先将图片文件上传到有道云笔记后使用图片的分享链接.说到底还是使用的 Markdown 的图片功能 
1 我们常常需要上传头像,点击上传按钮时候需要预览一下,使用filereader方法无需和后台交互,代码如下: //本地图片在上传之前的预览效果 //图片上传预览 function previewIm ...
- js上传本地图片遇到的问题
1.改变页面文件上传默认的样式 <input type="text" size="20" id="upfile" style=&quo ...
- kindeditor上传本地图片实例
所需插件:kindeditor下载 密码: 5ry4 jsp文件: <script type="text/javascript" language="javas ...
- 图片上传-本地图片转base64+ie8支持+本地预览支持
最近项目由于flash同学没在了,图片上传只能前端重新做,后台希望用base64数据上传,复用之前接口 问题来了, 1.ie8 不支持canvas转base64 2.本地预览 base64数据,ie8 ...
随机推荐
- (转)Cognos的下载地址分享
原文:https://blog.csdn.net/Wikey_Zhang/article/details/76138965 刚开始接触Cognos,发现Cognos真是一款挺不错的报表工具,先分享一下 ...
- Selenium自动化测试Python四:WebDriver封装
WebDriver 封装 欢迎阅读WebDriver封装讲义.本篇讲义将会重点介绍Selenium WebDriver API的封装的概念和方法,以及使用封装进行自动化测试的设计. WebDriver ...
- JVM Scan
1.jmap -histo pid|head -100 2.jstat -gcutil pid cycle 3.jmap -heap pid
- AutowireCapableBeanFactory源码详解
一.概述 对于想要拥有自动装配能力,并且想要把这种能力暴露给外部应用BeanFactory类需要实现此接口. 正常情况下不要使用此接口,应该更倾向于使用BeanFactory或者ListableBea ...
- 前端模块化之CommonJS,ES6,AMD,CMD
最近在搞跨平台解决方案,讨论关于模块划分的问题以及如何尽量多的复用逻辑代码.于是就有了此文章,之前的博客也写过,不过由于主机商跑路,宝贵的资源也就没了,说多了都是泪~ 这里按模块化发展的历史回溯的时间 ...
- docker部署jenkinsci blueocean
1.使用docker-compose # cat docker-compose.ymlversion: '2'services: jenkinsci: image: jenkinsci/blueoce ...
- ThreadLocal剧集(一)
总述 最近做了一个日志调用链路跟踪的项目,涉及到操作标识在线程和子线程,线程池以及远程调用之间的传递问题.最终采用了阿里开源的TransmittableThreadLocal插件(https: ...
- SpringMVC之REST
REST: 即 Representational State Transfer.(资源)表现层状态转化.是目前最流行的一种互联网软件架构.它结构清晰.符合标准.易于理解.扩展方便,所以正得到越来越多网 ...
- CentOS 7.2安装Docker-ce
1.Docker分类 Docker Engine改为Docker CE(社区版) 它包含了CLI客户端.后台进程/服务以及API.用户像以前以同样的方式获取.Docker Data Center改为D ...
- [转]Reporting Service部署之访问权限
本文转自:https://www.cnblogs.com/lonelyxmas/p/4112638.html 原文:Reporting Service部署之访问权限 SQL Server Report ...