精华内容
下载资源
问答
  • layui富文本编辑图片上传 tomcat环境 layedit+springMvc+maven 功能包含各种jar包,按照时间建立文件夹。
  • layui集成wangEdit富文本编辑

    千次阅读 2019-06-10 09:47:56
    用了一次layui后台模板后就爱上了,我选的是2.3版本的,结果在集成了官网给的编辑器后,发现功能着实有点少,不支持图片批量上传,不能对图片大小进行设置,不能查看源码,代码简洁了但是功能去除了不少,满足不了...

    写出layui这个框架的人绝壁是一个大牛,很大很大的大牛,前端菜鸟表示除了顶礼膜拜就只剩下五体投地了【此处省去洋洋洒洒五千字崇拜】。。。。

    用了一次layui后台模板后就爱上了,我选的是2.3版本的,结果在集成了官网给的编辑器后,发现功能着实有点少,不支持图片批量上传,不能对图片大小进行设置,不能查看源码,代码简洁了但是功能去除了不少,满足不了后台功能开发,虽说官网说了会在后面版本完善,老夫着实等不了,就自己集成了一个。

    轻量级的编辑器推荐 wangEdit,官网链接:http://www.wangeditor.com

    下面是layui官网的编辑器和wangedit编辑器对比图:

    很明显的第二个更加强大,风格和layui也很接近,比较适合。

    项目用的是tp5,上传必要样式文件到public下的static对应模快下,编辑器文件可以到qq群 825697794 下载。

    前端代码片段:

    <!--样式引用-->
    <link rel="stylesheet" href="__ADMINSTYLE__/wangEditor/css/wangEditor.min.css">
    <script type="text/javascript" src="__ADMINSTYLE__/wangEditor/js/wangEditor.min.js"></script>
    <!--html设置容器-->
    <div class="layui-form-item">
        <label for="phone" class="layui-form-label">文章内容</label>
        <div class="layui-input-block">
             <textarea id="content" name="content" style="height:300px;width: 100%;"></textarea>
         </div>
    </div>
    <!--js初始化编辑器-->
    var editor = new wangEditor("content");
    editor.config.uploadImgUrl = '{:url("manage/common/edit_upload_img")}'; //图片上传路径
    editor.create();

    服务端图片上传代码:

     //富文本上传图片接口
        public function edit_upload_img(){
            $file = request()->file('wangEditorH5File');
            $info = $file->move(ROOT_PATH.'/public/uploads/edit');
            $back_array = array();  //定义一个返回的数组
            if($info){
                $src = '/uploads/edit/'.$info->getSaveName();
            }else{
                $src = '';
            }
            return $src;
        }

    其他的form表单遵循layui form传输标准即可

    展开全文
  • 刚开始对某篇文章点击编辑随后点击上传图片的按钮,能正常显示,关掉编辑页面再次打开就不显示了,然后我关闭弹出层页面发现插入图片的地方在弹出层后面,跟着弹出层也一起关闭了,请问各位大佬这是什么原因?</p>
  • 本项目基于layui.layedit富文本编辑器,在其之上拓展而来。 新增功能 html源码模式、插入hr水平线、段落格式、字体颜色、字体背景色、批量上传图片、上传视频、上传附件、锚点、插入表格、插入自定义链接、全屏、...

    项目介绍

    首先欢迎使用 Kz.layedit!
    本项目基于layui.layedit富文本编辑器,在其之上拓展而来。

    新增功能

    html源码模式、插入hr水平线、段落格式、字体颜色、字体背景色、批量上传图片、上传视频、上传附件、锚点、插入表格、插入自定义链接、全屏、预览、右键菜单优化以及一些参数设置

    实验功能

    undo\redo、字体、字体大小设置

    在使用之前,请先认识几个已存在问题

    目前存在问题(2018-12-20)

    1、本编辑器基本不支持IE浏览器,甚至是IE12,由于个人能力原因,暂时放弃维护

    2、虽然对移动端做了适配,但是使用体验不咋的,已经放弃治疗.以后估计只会优化界面,避免出现宽,高溢出的情况.但是操作体验上基本无法改进了…不建议移动端做富文本编辑

    使用

    基础配置

    toolbar由tool参数配置,可自由调整顺序和内容。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    tool: [
    'html'//源码模式
    ,'undo','redo' //撤销重做--实验功能,不推荐使用
    ,'code', 'strong', 'italic', 'underline', 'del',
    ,'addhr' //添加水平线
    ,'|', 'fontFomatt','fontfamily','fontSize', //段落格式,字体样式,字体颜色
    'colorpicker', 'fontBackColor'//字体颜色,字体背景色
    , 'face', '|', 'left', 'center', 'right', '|', 'link', 'unlink'
    'image'//原版上传图片
    'images'//多图上传
    , 'image_alt'//上传图片拓展
    , 'attachment'//上传附件
    , 'video' //视频上传
    ,'anchors' //锚点
    , '|', 'table'//插入表格
    ,'customlink'//插入自定义链接
    ,'fullScreen'//全屏
    'preview'//预览
    ]

    基础方法未做修改,详细见原版文档,: layui.layeidt v1.0.9

    编辑器基本设置

    参数名称类型介绍
    原版参数tool/hideTool/height 保持原版设置,未做改动
    uploadImage object layupload基本参数
    uploadVideo object layupload基本参数
    uploadFiles object layupload基本参数
    calldel object 图片/视频删除回调方法
    devmode bool 开发者模式,控制插入链接时是否显示rel和target属性
    autoSync bool 自动同步到textarea文本域设置,默认为false
    onchange function 内容改变监听事件
    codeConfig object 插入代码设置,控制插入代码时是否显示代码选择框
    quote object 外部样式/js引用
    customTheme object 视频自定义主题
    customlink object 自定义链接,配置该项后,可插入一个指定href的a标签,只需设置text内容
    facePath string 设置插入表情路径,解决表情图片地址为file://开头的问题
    videoAttr string video标签附加属性,可给插入的视频添加设置的属性

    个人博客原始地址:kz.layedit使用说明

     

    转载于:https://www.cnblogs.com/KnifezZZ/p/10004407.html

    展开全文
  • layui富文本编辑器用起来挺方便的,但是不足的是不提供图片上传的接口,需要自己写上传接口,而且返回的数据类型要符合layui富文本编辑图片上传插件的要求,否则图片可以上传成功,但是无法回显,这个问题找了好久...

    layui富文本编辑器用起来挺方便的,但是不足的是不提供图片上传的接口,需要自己写上传接口,而且返回的数据类型要符合layui富文本编辑器图片上传插件的要求,否则图片可以上传成功,但是无法回显,这个问题找了好久才找到原来是返回的数据结构不符合layui要求,经过修改才得以解决,现在把代码贴出来共享。加粗字体的代码是返回数据结构

    @ResponseBody

    @RequestMapping(value = "fillupf", method = RequestMethod.POST)

    public String fillupf(@RequestParam("file") MultipartFile[] files) {

    try {

    String[] courseware = new String[files.length];

    int index = 0;

    for (MultipartFile file : files) {

    boolean isLegal = false;

    for (String type : ALLOW_FILE_TYPE) {

    if (StringUtils.endsWithIgnoreCase(file.getOriginalFilename(), type)) {

    isLegal = true;

    break;

    }

    }

    // 封装Result对象,并且将文件的byte数组放置到result对象中

    PicUploadResult fileUploadResult = new PicUploadResult();

    // 状态

    fileUploadResult.setError(isLegal ? 0 : 1);

    // 文件新路径

    String filePath = getFilePath(file.getOriginalFilename());

    if (LOGGER.isDebugEnabled()) {

    LOGGER.debug("Pic file upload .[{}] to [{}] .", file.getOriginalFilename(), filePath);

    }

    // 生成图片的绝对引用地址

    String picUrl = StringUtils.replace(StringUtils.substringAfter(filePath, propertieService.REPOSITORY_PATH), "\\", "/");

    fileUploadResult.setUrl(propertieService.IMAGE_BASE_URL + picUrl);

    File newFile = new File(filePath);

    // 写文件到磁盘

    file.transferTo(newFile);

    // 状态

    fileUploadResult.setError(isLegal ? 0 : 1);

    if (!isLegal) {

    // 不合法,将磁盘上的文件删除

    newFile.delete();

    }

    courseware[index++] = fileUploadResult.getUrl();

    }

    String fillUrls=StringUtils.join(courseware, ",");

    Map map = new HashMap();

    Map map2 = new HashMap();

    map.put("code",0);//0表示成功,1失败

    map.put("msg","上传成功");//提示消息

    map.put("data",map2);

    map2.put("src",fillUrls);//图片url

    map2.put("title","图片丢失");//图片名称,这个会显示在输入框里

    JSONObject jsonObject = JSONObject.fromObject(map);

    String result = jsonObject.toString();

    return result;

    } catch(Exception e) {

    }

    return null;

    }

    以上这篇解决layui富文本编辑器图片上传无法回显的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

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

    千次阅读 热门讨论 2019-11-23 17:51:14
    layui是贤心大神的开源前端框架,也是对后端菜鸟非常友好的一个框架,平常开发的时候就比较喜欢使用这个,最近刚好写网站就到了layui富文本编辑器,遇到一些有意思的事情,就和大家聊聊。 首先准备工作先到官网...

    layui是贤心大神的开源前端框架,也是对后端菜鸟非常友好的一个框架,平常开发的时候就比较喜欢使用这个,最近刚好写网站就到了layui的富文本编辑器,遇到一些有意思的事情,就和大家聊聊。
    首先准备工作先到官网下载layui资源包
    之后新建一个项目我平常使用springboot项目,如果不熟悉Springboot的请参考大佬教程,把下载好的资源包layui文件夹放到static下
    在这里插入图片描述
    配置一下端口,个人比较喜欢yml文件

    
    server:
        port: 8784
    

    之后我们可以在static下面新建一个html进行编辑,依照文档进行编写

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <link rel="stylesheet" href="layui/css/layui.css" />
    </head>
    <body>
    <textarea id="demo" ></textarea>
    <script type="text/javascript" src="layui/layui.all.js" charset="utf-8"></script>
    
    <script>
    layui.use('layedit', function(){
    	 var layer = layui.layer, $= layui.jquery,layedit=layui.layedit;
    	 var testEditor;
    	layedit.set({
    		  uploadImage: {
    		    url: 'uploadconimage' //接口url
    		    ,type: 'POST' //默认post
    		  }
    	 
    		});
    	layedit.build('demo', {
    		height: 900,
    		  tool: [ 'strong' //加粗
    			  ,'italic' //斜体
    			  ,'underline' //下划线
    			  ,'del' //删除线
    			  ,'|' //分割线
    			  ,'left' //左对齐
    			  ,'center' //居中对齐
    			  ,'right' //右对齐
    			  ,'link' //超链接
    			  ,'unlink' //清除链接
    			  ,'face' //表情
    			  ,'image' //插入图片
    			  ,'help' //帮助
    			  ]
    		}); 
    });
    </script>
     
     </body>
    </html>
    

    这样我们就可以运行项目了,效果是这样的
    在这里插入图片描述
    当我们点击图片上传图标的时候会报接口异常,这个时候我们就需要编写图片上传代码
    我们先编写一个图片上传接口

    @RequestMapping(value="/uploadconimage",method=RequestMethod.POST)
    	@ResponseBody
    	public Map<String,Object> uploadconimage(HttpServletRequest request,@RequestParam MultipartFile file) {
    		Map<String,Object> mv=new HashMap<String, Object>();
    		Map<String,String> mvv=new HashMap<String, String>();
    		 try {
    	            String rootPath = request.getSession().getServletContext().getRealPath("/image/");
    	            Calendar date = Calendar.getInstance(); //Calendar.getInstance()是获取一个Calendar对象并可以进行时间的计算,时区的指定
    	            String originalFile = file.getOriginalFilename(); //获得文件最初的路径
    	            String uuid = UUID.randomUUID().toString();    //UUID转化为String对象  
    	           	String newfilename=date.get(Calendar.YEAR)+""+(date.get(Calendar.MONTH)+1)+""+date.get(Calendar.DATE)+uuid.replace("-", "")+originalFile;
    	            //得到完整路径名
    	            File newFile = new File(rootPath+newfilename);
    	            /*文件不存在就创建*/
    	            if(!newFile.getParentFile().exists()){
    	                newFile.getParentFile().mkdirs();
    	            }
    	            String filename=originalFile.substring(0, originalFile.indexOf("."));
    	            System.out.println(originalFile);
    	            System.out.println(filename);
    	            file.transferTo(newFile);
    	            System.out.println("newFile : "+newFile);
    	            String urlpat= "/image/"+ newfilename;
    	            mvv.put("src", urlpat);
    	            mvv.put("title",newfilename);
    	            mv.put("code", 0);
    	    		mv.put("msg", "上传成功");
    	    		mv.put("data", mvv);
    	    		return mv;
    	        } catch (Exception e) {
    	           e.printStackTrace();
    	        	 mv.put("success", 1);
    	        		return mv;
    	        }
    	}
    

    然后在html中国配置上传接口

    
     var testEditor;
    	layedit.set({
    		  uploadImage: {
    		    url: 'uploadconimage' //接口url
    		    ,type: 'POST' //默认post
    		  }
    	 
    		});
    

    这样就可以上传图片了
    效果还不错
    这样我们就完成了编辑器的部署工作,在这里我们需要注意一些问题不然很容易进坑,首先配置文件上传接口和类型的JS代码一定在 layedit.build之前,否则是配置不上的,还有就是接口返回的json一定要严格遵守文档的的格式规范和状态码。否则无法解析,同样的返回的内容也要符合规范。

    {
    	"msg": "上传成功",
    	"code": 0,
    	"data": {
    		"src": "/image/20191123e4aeef42a3d847ee9663c4cea6f3c611036622be4ea41b7bdfcbac1096881e83.jpg",
    		"title": "20191123e4aeef42a3d847ee9663c4cea6f3c611036622be4ea41b7bdfcbac1096881e83.jpg"
    	}
    }
    

    作为一个有求知欲的程序员,我尝试过修改返回内容发现会出现一些错误,code改为1,编辑器提示上传成功,但是不会显示图片,如果 src 为空则会出现这种情况,title和msg为空则不影响显示。

    展开全文
  • 大家在使用layui富文本编辑器的时候应该需要上传图片,然而layedit 图片上传组件扩展比较少,本人结合php的laravel框架,实现图片上传至七牛云。关于layui富文本编辑器大家可以参考官方文档...
  • layUI富文本编辑器需要注意的几点 一,创建富文本编辑器 <div class="layui-input-block"> <textarea id="teacherSy" class="layui-textarea" name="teacherSynopsis"lay-verify="teacherSynopsis" >...
  • layui富文本编辑器用起来挺方便的,但是不足的是不提供图片上传的接口,需要自己写上传接口,而且返回的数据类型要符合layui富文本编辑图片上传插件的要求,否则图片可以上传成功,但是无法回显,这个问题找了好久...
  • layui.use('layedit', function(){var layedit = layui.layedit;layedit.set({uploadImage: {url: '/admin/goods/uploadImage' //接口url,type: 'post', //默认postsuccess:function(res){}}});//构建一个默认的编辑...
  • map.put("msg", "上传成功"); map.put("data", data); } } return map; } } /* String tempPath="f:/upload"; Map,Object> map=new HashMap(); Map,Object> data=new HashMap(); String oldName=...
  • layui富文本编辑器用起来挺方便的,但是不足的是不提供图片上传的接口,需要自己写上传接口,而且返回的数据类型要符合layui富文本编辑图片上传插件的要求,否则图片可以上传成功,但是无法回显,这个问题找了好久...
  • 最近需要实现一个简单的富文本编辑功能,项目架构基于thymeleaf+springBoot,没有实现存粹的前后端分离 百度了一下好像很多人用的ueditor 可是这玩意官网都进不去了 - - 好在需求不高,只要实现简单的文字+图片...
  • textarea id="questionStem" class="layui-textarea" name="questionStem" lay-verify="questionStem"></textarea> js: layui.use(['form','layedit'], function(){ var form = layui.form; var ...
  • 本文将介绍 springmvc 上传功能实现,以及layui 前端插件的使用,尤其是其富文本编辑器的上传图片接口的实现。 一、开发准备 1、layui 官网:http://www.layui.com/ 点击"立即下载"可以获取前端框架,没有使用过...
  • 技术选型:springboot+freemarker+layui 1.layui前台根据官方文档写就OK的 ...2.将图片上传到服务器(重点) //------------编辑上传照片 @RequestMapping("/uploadPhotos") public Map uplo...
  • 本人第一次使用layui富文本编译器上传图片,在这里把使用过程中遇到的问题总结了一下,分享给大家;有什么问题望各位博友提点一下 一.开发前提:  1.使用spring3,springmvc,前端layui,jdk7,tomcat7;  2.layui ...
  • layui富文本编辑图片不显示 代码示例 前台 HTML 一定要记得包裹在form标签,具体提交方式根据业务来,可以是ajax,可以是method,此处选择ajax。 此处一定要记的严格按照layui表单内容写法!防止加载失败! lay...
  • TP6+layui 富文本编辑器layedit配置及图片上传 1、textarea标签 <textarea id="Ccontent" style="display: none;" name="Ccontent" class="layui-textarea"></textarea> 2、建立编辑器 var layedit = ...
  • 因为在做毕业设计,所以我用了layui作为自己的前段开发辅助工具,但是使用的时候遇到了N多种困难,...原layui富文本编辑器一些设置如下 layedit.set({ //暴露layupload参数设置接口 --详细查看layupload参数说明 ...
  • 上传图片必须要在你这里代码指定中的路径去创建uploads文件夹,不然会上传不成功,如果uploads下已经有了你上传的图片,但是显示的图片报错,那么检查一下这个返回的路径是否正确.   转载于:...
  • laravel框架+layui做系统时,后台需要使用到富文本编辑器,首选当然简单的layui自带的layedit啦,不过上传图片时报错:“请求上传接口异常”,查看返回“419 unknown status”,很明显没有上传需要_token值,应该是...
  • 添加文章页面截图: 文章显示页面截图: 前端 Html代码: ...div class="layui-form-item"> <label class="layui-form-label">内容</label> <div class="layui-input-block"> &...
  • 富文本上传图片 这里文档也写的很清楚,需要添加上传图片的接口 最后项目展示就是这个样子的,这里需要切记的是上传图片的配置要在构建之前 然后上传图片 03 注意点 在上面俩步已...
  • layedit.set({ uploadImage: { url: api.uploadActivityImageFileLayUI //接口url ... //建立编辑器 在上传文件的时候,如果后台要求添加请求头token,然而这个方法中没有headers这个参数,这时候我们需
  • 最近写项目中需要用到LayUI富文本编辑器,其他地方都挺好,唯独上传图片时,要不就是上传完成后回显404,要不就是访问时404(访问时我是新打开的一个页面),返回路径一直有问题,之后把返回的路径改成绝对路径就可以...

空空如也

空空如也

1 2 3 4 5
收藏数 85
精华内容 34
关键字:

layui上传图片富文本编辑