一、我假设你是要保存到自己的数据库中(因为上传到阿里云、七牛更简单原理一样的)

点击插入图片如下图:

1、其实你插入的时候不需要做什么处理一样也可以插入数据库的(但是前提你插入的那个字段必须要求足够空间比如Mysql你要用LONGTEXT类型,否则是存不下的这样子前台获取的时候就取不到)原因是你保存的时候,它把图片给转换为了data:image/gif;base64,这样子话所以一般不建议直接用,因为你可能存几张后就会出错了。

2、先把图片上传到服务器(你自己的)然后再修改图片的Url,找了好多网上的资料,感觉写的都比较复杂,嗯这里自己就试着写了一个比较简单的是利用Ajax传到后台插入,然后这个控件自己会修改它的路径,只需要如下步骤:

a、打开你自己调用的bootstrap-wysiwyg.js这个文件,我们来修改一下readFileIntoDataUrl这个方法,应该就是这个文件的第一个方法啦,把它的先注释了,修改为这样子

var readFileIntoDataUrl = function (fileInfo) {
        var form = new FormData();
        form.append("editorImage", fileInfo);
        var xhr = new XMLHttpRequest();
        xhr.open("post", "/Admin/Ajax/ajaxUploadFile", false);//这里是你传到后台的入库的方法,这个方法返回图片路径就可以了
        xhr.send(form);
        return xhr.responseText;
    };

b、ajaxUploadFile这个方法要做的事情就是把获取到的$_FILES中的图片入库代码如下:

/*后台bootstrap-wysiwyg.js上传图片*/
    public function ajaxUploadFile(){
        header("content-type:text/html;charset=utf-8");
        //echo 'https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1508372197,632975480&fm=80';exit;
        $upload = new \Think\Upload();// 实例化上传类
        $upload->maxSize   =     3145728 ;// 设置附件上传大小
        $upload->exts      =     array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型
        $upload->rootPath  =     'Public/Uploads/'; // 设置附件上传根目录
        $upload->savePath  =     ''; // 设置附件上传(子)目录
        $upload->saveRule = uniqid;
        // 上传文件
        $info   =   $upload->upload($_FILES);//上传图片的方法
        $imagesModel=M('maiclub_images');
        $data['image_url']=$info['editorImage']['savepath'].$info['editorImage']['savename'];
        $data['create_time']=time();
        $data['id']=null;
        if($imagesModel->add($data)) {
            echo __APP__.'/Public/Uploads/'.$data['image_url'];exit;
        }else{
            echo '入库失败了,联系管理员';exit;

}

}

3、亲测是成功的,祝你幸运,也可以成功哦。交流群:368848856嘿嘿

PHP+Mysql网站源码学习请访问:PHP+Mysql网站源码学习请访问

http://www.erdangjiade.com/

转载于:https://www.cnblogs.com/66daima/p/7507707.html

bootstrap-wysiwyg中JS控件富文本中的图片由本地上传到服务器(阿里云、七牛、自己的数据库)...相关推荐

  1. bootstrap-wysiwyg中JS控件富文本的用法

    1.引入js和css文件(注:这里必须引入正确,下面是我的路径,你修改为你自己的,不多说了) <link href="/css/bootstrap-combined.no-icons. ...

  2. JS----TinyMCE 富文本编辑器,图片,文件上传

    TinyMCE:功能强大.所见即所得的富文本编辑器 一般使用 官网及文档:https://www.tiny.cloud 官网下载:https://www.tiny.cloud/get-tiny/sel ...

  3. android中ListView控件onItemClick事件中获取listView传递的数据

    http://blog.csdn.net/aben_2005/article/details/6592205 本文转载自:android中ListView控件&&onItemClick ...

  4. html表单控件富文本框,表单控件之富文本框实践

    多行文本输入框(不是富文本框)的html代码如下: 学历及经历: ${emp.details} 富文本的js代码如下: // create Editor from textarea HTML elem ...

  5. Qt中Qlabel控件实现文本多种颜色样式显示,支持换行。

    在Qt文本开发中,需要用到文本不通颜色显示样式,有的开发者可能会选择一种颜色一个Qlabel控件,这样是可以实现相应的效果,但是会出现文本长度不确定,导致换行问题. 下面介绍一种在同一个Qlabel控 ...

  6. JavaWeb 富文本编辑器(Ckeditor)文件上传

    目录 一.什么是富文本编辑器? 二.CKEditor介绍 三.CKEditor下载 四.使用富文本编辑器 五.文件上传 一.什么是富文本编辑器? 富文本编辑器是一种可内嵌于浏览器,所见即所得的文本编辑 ...

  7. tinymce富文本编辑器的视频插件如何上传本地视频

    最近使用了tinymce富文本编辑器的视频上传功能,发现默认只能填写视频链接,不能上传本地的视频.为此,我专门研究下如何上传本地视频. 版本:tinymce版本是^5.0.16,@tinymce/ti ...

  8. 使用前端JS上传文件到阿里云的OSS服务器,PHP生成STS临时访问凭证

    官方教程地址:https://help.aliyun.com/document_detail/383950.html?spm=a2c4g.383952.0.0 这篇文章主要是指出官方教程没有说明的地方 ...

  9. php在文本框显示图片,多张图片上传后在页面上可以显示图片,在文本框显示地址怎么解决啊...

    下边这个代码是我改的,试了下只能实现其中一个功能,如何可以实现多张图片上传后在页面上可以显示图片,在文本框显示地址呢. K('#J_selectImage').click(function() { e ...

  10. JS:Vue项目浏览器直接上传文件到阿里云OSS

    OSS Browser.js SDK文档: https://help.aliyun.com/document_detail/64041.html OSS设置路径:权限管理-跨域设置 将来源设置成 * ...

最新文章

  1. 推荐介绍一项新的工程技术:[威胁建模]的相关系列文章《威胁建模Web 应用程序》...
  2. 您好您拨打电话已停机_您好GroovyFX
  3. 使用API​​身份验证的Spring Security
  4. WinAPI: midiOutShortMsg - 向输出设备发送 MIDI 短消息
  5. CSS 如何让li横向居中显示
  6. stats | 概率分布与随机数生成(一)——离散型分布
  7. (八)2005年我的第一次软件行业创业,烧掉30万、2年时间打水漂的惨痛教训
  8. [选择性翻译][HDP Ambari 2.2.2安装使用说明][1]
  9. ISI CVPR journal ranking
  10. 如何把平板(pad)作为笔记本电脑的分屏详细教程
  11. 数据库系统设计综合实验
  12. aspCms 标签大全
  13. HTML 代码混淆与压缩
  14. [转] Delaunay三角剖分理论知识
  15. 电脑程序在计算机丢失怎么办,电脑中dll文件丢失怎么恢复?计算机中丢失dll文件修复方法...
  16. 判断清浊音 matlab,基于MATLAB的语音信号的清浊音分析.doc
  17. 计算机领域nt=p,09计算机基础PwerPoint单选.doc
  18. java 线程间变量共享_多线程:(五)多个线程之间共享数据
  19. win7计算机无法显示,最新版本:如果无法显示win7计算机的图片预览,该怎么办...
  20. hostapd wpa_supplicant madwifi详细分析(八)——wpa_supplicant的配置文件

热门文章

  1. z-index终结者
  2. SpringBoot(十六)_springboot整合JasperReport6.6.0
  3. SQL 查找是否“存在“,别再 count 了,很耗费时间的!
  4. 前端图表生成利器--ECharts推荐
  5. MySQL 索引的查询、创建与删除
  6. MySQL 结果集问题(获取不存在表的信息导致的隐藏bug)
  7. 18. 避免使用vectorbool
  8. 18. Make interfaces esay to use correctly and hard to use incorrectly
  9. 08. 切勿创建包含auto_ptr的容器
  10. Spring 框架 基础