精华内容
下载资源
问答
  • SSM框架 添加富文本功能,以及富文本上传图片功能1111111
  • 主要介绍了VueQuillEditor富文本上传图片(非base64),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • kindeditor富文本上传图片路径

    千次阅读 2016-04-22 10:40:36
    以本机做服务起,当别的机器访问本机,并用富文本上传图片时出现如图: 解决方案: 注释掉替换路径代码

    以本机做服务起,当别的机器访问本机,并用富文本上传图片时出现如图:



    解决方案:





    注释掉替换路径代码

    展开全文
  • wangEditor文基本使用和上传图片基本使用 基本使用 npm 安装 npm i wangeditor --save <template> <div id="editor"><div> </template> <script> import E from 'wangeditor' ...

    wangEditor富文本上传图片

    基本使用

    npm 安装 npm i wangeditor --save

    <template>
    	 <!-- 富文本显示标签 -->
    	<div id="editor"><div>
    </template>
    
    <script>
    // 引入富文本
    import E from 'wangeditor'
    export default {
    	data(){
    	    editor: null,
    	},
    	mounted(){
    		this.setEditor()
    	},
    	methods:{
    		setEditor(){
    			// 我们会多次用到editor所以直接取出来
    			let {editor} = this
    			// 获取标签元素
    			editor=new E('#editor')
    			// 创建
    			editor.create()	
    		}
    	}
    }
    
    </script>
    
    

    配置上传图片

    上传图片配置有点小多,建议写一个js文件里面

    /**
     * 富文本配置
     */
    export default {
      // 富文本高
      height: 400,
      uploadImgServer: "这里是图片的上传接口地址",
      // 富文本上传大小限制
      uploadImgMaxSize: 3 * 1024 * 1024,
      // 富文本文件类型
      uploadImgAccept: ["jpg", "jpeg", "png", "gif", "bmp"],
      // 富文本上传的文件名
      uploadFileName: "file",
      // 富文本一次最多上传图片数量
      uploadImgMaxLength: 5,
      // 获取token 我是把token放在sessionStorage里面的
      uploadImgHeaders: {
        token: sessionStorage.getItem("token")
      },
      // 是否跨域
      withCredentials: true,
      debug: true,
      // 监视上传
      uploadImgHooks: {
      	// 图片上传错误
        error(xhr, editor) {
          console.error(xhr, editor);
        },
        // 图片上传并返回结果
        fail(xhr, editor, result) {
          console.log(xhr, editor, result);
        },
        // 图片上传成功
        success: function(xhr, editor, result) {
          console.log(xhr, editor, result);
        },
        // 图片上传并返回结果,自定义插入图片的事件,就是回显图片
        customInsert(insertImg, result, editor) {
          if (result.code == 200) {
            insertImg(result.result.path);
          }
        }
      }
    };
    

    把上面富文本配置引入到页面

    <template>
    	<!-- 富文本显示标签 -->
    	<div id="editor"><div>
    </template>
    
    <script>
    // 引入富文本
    import E from 'wangeditor'
    // 引入富文本配置
    import editorConfig from './editorConfig.js'
    export default {
    	data(){
    	    editor: null,
    	},
    	mounted(){
    		this.setEditor()
    	},
    	methods:{
    		setEditor(){
    			// 我们会多次用到editor所以直接取出来
    			let {editor} = this
    			// 获取标签元素
    			editor=new E('#editor')
    			// 合并配置到editor
    			Object.assign(editor.config, editorConfig)
    			// 创建
    			editor.create()	
    		}
    	}
    }
    

    配置完成就可以点击上传图了
    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • layui富文本上传图片

    千次阅读 2019-09-09 16:30:33
    ###前端代码 layedit.set({ uploadImage: { url: ‘/Admin/Counsel/doUploadPic’ ,type: ‘post’ //默认...public function doUploadPic()//上传模块 { $upload = new \Think\Upload(); $upload->maxSize = 314...

    ###前端代码
    layedit.set({
    uploadImage: {
    url: ‘/Admin/Counsel/doUploadPic’
    ,type: ‘post’ //默认post
    }
    });
    ###后台
    public function doUploadPic()//上传模块
    {
    $upload = new \Think\Upload();
    $upload->maxSize = 3145728;
    $upload->exts = array(‘jpg’, ‘gif’, ‘png’, ‘jpeg’);
    $upload->rootPath = ‘./Uploads/’;
    $upload->savePath = ‘/’;
    $info = upload&gt;upload();if(!upload-&gt;upload(); if(!info){
    this&gt;error(this-&gt;error(upload->getError());
    }else{
    foreach($info as $file){
    data=/Uploads.data = &#x27;/Uploads&#x27;.file[‘savepath’] . $file[‘savename’];
    filea=file_a=data;
    echo ‘{“code”:0,“msg”:“成功上传”,“data”:{“src”:"’.$file_a.’"}}’;
    }
    }
    }

    展开全文
  • @RequestMapping(value=“summernoteImage”, method = RequestMethod.POST) @ResponseBody public Map summernoteImage(HttpServletRequest request) throws Exception { logger.info(“进入上传图片方法!...

    js代码
    $(’.summernote’).summernote({
    lang : ‘zh-CN’,
    focus:true,
    onImageUpload: function(files,editor,welEditable) {
    sendFile(files[0],editor,welEditable);
    }
    });

    function sendFile(file,editor,welEditable){
    var filename = false;
    try{
    filename = file[“name”];
    }catch (e) {
    filename = false;
    }
    if(!filename){
    $(".note-alarm").remove();
    }
    data = new FormData();
    data.append(“file”, file);
    data.append(“key”,filename);
    $.ajax({
    data: data,
    type: “POST”,
    url: “summernoteImage?time=” + new Date().getTime(),
    cache: false,
    contentType: false,
    processData: false,
    success: function (url) {
    var path = ‘…/…/upload/notice_pic/’+url.name;
    let imgNode = document.createElement(“img”);
    imgNode.src = path;
    $(".note-editable").append(imgNode);
    },
    error:function(){
    layer.alert(‘上传失败!’);
    return;
    }

        });
    

    }

    java代码
    @RequestMapping(value=“summernoteImage”, method = RequestMethod.POST)
    @ResponseBody
    public Map<String,Object> summernoteImage(HttpServletRequest request) throws Exception {
    logger.info(“进入上传图片方法!”);
    Map<String,Object> map = new HashMap<String,Object>();
    CommonsMultipartResolver multipartResolver= new CommonsMultipartResolver(request.getSession().getServletContext ());
    if (multipartResolver.isMultipart (request)) {
    MultipartHttpServletRequest mreq = (MultipartHttpServletRequest)request;
    Iterator fileNamesIter = mreq.getFileNames();
    while(fileNamesIter.hasNext()){
    MultipartFile file= mreq.getFile (fileNamesIter.next ());
    String fileName=file.getOriginalFilename () ;
    String[] arrName = fileName.split("\.");
    String extendName = “.jpg”;
    if(arrName.length == 2){
    extendName = “.” +arrName[1];
    }
    Calendar cal = Calendar.getInstance();
    Date date = cal.getTime();
    //图片名称
    fileName = new SimpleDateFormat(“yyyyMMddHHmmssSSS”).format(date) + extendName;
    //获取根目录
    File path = new File(ResourceUtils.getURL(“classpath:”).getPath());
    if(!path.exists()) path = new File("");
    //上传目录
    File upload = new File(path.getAbsolutePath(),“static/upload/notice_pic/”);
    String uploadPath = upload + “/”;
    File file1 = new File(uploadPath + fileName);
    file.transferTo(file1);
    map.put (“name”,fileName) ;
    map.put (“path”,uploadPath+fileName) ;
    }
    }
    return map;
    }

    展开全文
  • 项目中使用UEditor发现设置图片...错误》 /* 上传图片配置项 */ "imageActionName": "uploadimage", /* 执行上传图片的action名称 */ "imageFieldName": "inputForm", /* 提交的图片表单名称 */ "imag...
  • VueQuillEditor富文本上传图片-非base64

    千次阅读 2020-06-01 14:19:08
    本篇文章将介绍vue-quill-editor上传图片的那些事,通常来说,我们数据库内都是保存图片路径的,所以上传完图片之后,要回传一个路径给前端,这才是完整的上传步骤。 第一步:上传图片,第二步:保存到服务器,并且...
  • 部署到服务器有一段时间了,有一天同事想在富文本里面插入图片,但是保存的时候报了个404错误,我到服务器查看图片上传成功了,于是本地测试了下,没有这个问题,思来想去没有搞明白是哪里的问题,网上搜索了很多...
  • 如果你通过搜索找了了这里,应该是问题的具体情况,大致富文本里的某些图片放到微信的编辑器会显示...但是有些网络上的图片地址其实感叹号也是图片的一部分,所以你可能需要自己搞个富文本 然后上传到自己的cdn上。...
  • 首先理解文件上传原理,从富文本中获取文件流到后台,后台将文件流存储到本地服务器。实际上使用富文本和使用input file原理相同。 前端页面文件 <body> <div class="hty_content_div"> <input ...
  • 首先找到layedit.js这个文件,搜索uploadImage,添加data就可以了。 在页面可以这样用
  • 第一步 :富文本自己下载(网络好多教程) 第二步: 下载七牛云 SDK 我是php程序小白
  • 之前用layui 富文本编辑器的时候,上传较大的图片时,图片显示不全,而且编辑起来非常的不便,这样的用户体验是非常不好的,想了好久没想出办法, 1.找到layedi.js 文件 路径:layui/lay/modules/layedit.js,如下图...
  • 1.资源地址:https://gitee.com/dhphp/oss_upload.git,clone下载 2.alioss.zip解压后的文件放在extend文件夹下 3.AliOss.php文件放在 App/common下 4.upload.php里面的方法upload...最后就是模板文件的ajax调用 ...
  • 再给项目添加文本编辑功能时,选择了白I读文本编辑器,但是在点击但上传按钮无反应
  • 最近因为需求所以在ssh项目中使用了Ueditor富文本插件,但是在上传图片的时候总是提示“未找到上传数据”,之后百度了好久终于弄明白了。因为Ueditor在上传图片的时候会访问controller.jsp,去获取图片上传路径,但是...
  • 在你需要用的页面引入 富文本插件 import { quillEditor } from "vue-quill-editor"; import "quill/dist/quill.core.css"; import "quill/dist/quill.snow.css"; import "quill/dist/quill.bubble.css"; // **-...
  • 页面采用Layui的富文本格式,之前上传的java代码是将数据以json的字符串形式传给页面,没有问题,代码如下@ResponseBody @RequestMapping(value = "/uploadFile") public String uploadFile...
  • php.ini post_max_size =150M upload_max_filesize = 100M 说明的是post_max_size 大于 upload_max_filesize 为佳 nginx client_max_body_size 100m;
  • 在前后端分离的情况下,后台所写的接口在前端调用的时候,可能前端浏览器已经读取到了数据,但是在前端代码ajax请求的时候,请求回调里会出现页面跨域的控制台打印错误,这个时候只需要后台配置一下头部请求就可以...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,771
精华内容 1,508
关键字:

富文本上传图片