精华内容
下载资源
问答
  • 富文本编辑器,Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器,所见即所得的文本编辑器. CSDN的markdown编辑器便是一种富文本编辑器.  蓝莓商城商品详情这一部分的编辑需要使用富文本编辑器.本来想使用...

      富文本编辑器,Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器,所见即所得的文本编辑器.
    CSDN的markdown编辑器便是一种富文本编辑器.

      蓝莓商城商品详情这一部分的编辑需要使用富文本编辑器.本来想使用百度的ueditor的,但是弄了好久依然还是有问题.所以就放弃了.ueditor配置确实比较复杂,官方的文档也没有很好的说清楚,错误提示不够明了,出错时未提示具体的原因.

      最后找到这个wangEditor.相比ueditor,配置更加简单,使用更加方便.其功能虽不及ueditor多,但是应付一般的需求足够了.
     

    流程说明


     由于对于图片上传整个流程比较复杂,所以本文仅对其进行说明.
     图片上传的流程是,当页面选择图片后,将会创建XMLHttpRequest请求,将图片数据发送给服务端,服务端接收后将图片保存到本地,再将图片路径返回给客户端,客户端接收到图片路径后,创建元素,并将图片路径赋给src,最后再把该元素插入到编辑器中.
     

     // 定义 xhr 发送请求给服务端
      var xhr = new XMLHttpRequest();
       xhr.open('POST', uploadImgServer);

    客户端配置说明

    下载

    直接下载:https://github.com/wangfupeng1988/wangEditor/releases
    使用npm下载:npm install wangeditor (注意 wangeditor 全部是小写字母)
    使用bower下载:bower install wangEditor (前提保证电脑已安装了bower)
    使用CDN://unpkg.com/wangeditor/release/wangEditor.min.js

    调试阶段推荐使用方式1中的未压缩版本,因为如果出现问题也好调试和查找.
    下载后将目录里的wangEditor.js放入工程目录中.只需要这个文件,其他的不需要.
    这里写图片描述
    我放在webapp下的wangEditor路径下.
    这里写图片描述

    前端配置

    引入js文件
    contextPathOfStatic这里是我的项目路径下的static文件夹:http://localhost:8080/lanmei-os/static

    <script type="text/javascript" src="${contextPathOfStatic}/wangEditor/wangEditor.js"></script>

    jsp页面添加

    <div id="editor">
     <!-- 默认显示 -->
       <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
    </div>

    这里我创建3个按钮进行测试

    <button id="editorSetBtn">设置内容</button>
    <button id="editorGetBtn1">获取内容1</button>
    <button id="editorGetBtn2">获取内容2</button>

    js文件编写

    $(function(){
    
        var E = window.wangEditor;
        //这里的id为<div id="editor"中的id.
        var editor = new E('#editor');
        // 配置服务器端地址,也就是controller的请求路径,不带项目路径,前面没有/
        editor.customConfig.uploadImgServer = 'commodity/upload/editor/img';
        //配置属性名称,绑定请求的图片数据
        //controller会用到,可以随便设置,但是一定要与controller一致
        editor.customConfig.uploadFileName = 'img';
        //创建编辑器
        editor.create();
    
        $("#editorSetBtn").click(function(){
            //这是设置编辑器内容
            editor.txt.html("dsafdfadsfdafdsfds");
        })
         $("#editorGetBtn1").click(function(){
          //获取编辑器的内容,带样式
          //一般使用这个获取数据,通过ajax发送给服务端 ,然后服务端以String接收,保存到数据库.
             alert(editor.txt.html());
        })
         $("#editorGetBtn2").click(function(){
            //获取编辑器的内容,不带样式,纯文本
             alert(editor.txt.text());
        })
    })

    程序加载完之后页面就会出现编辑器.
    这里写图片描述

    客户端设置完成

    服务端配置

    WEB层创建Controller

    @Controller
    @RequestMapping(path="/commodity")
    public class CommodityController {
        @Autowired
        AddCommodityService   addCommodityService;
        @Autowired
    private static final Logger logger = LoggerFactory.getLogger("CommodityController.class");
        @ResponseBody
        @RequestMapping(path="/upload/editor/img")
        //RequestParam中的属性名称要和前端定义的一致,上面说明了.所以写"img"
        //使用List<MultipartFile>进行接收
        //返回的是一个Dto类,后面会说明,使用@ResponseBody会将其转换为Json格式数据
        public ImgResultDto uploadEditorImg(@RequestParam("img") List<MultipartFile> list) {    
            //这里是我在web中定义的两个初始化属性,保存目录的绝对路径和相对路径,你们可以自定义    
            String imgUploadAbsolutePath = request.getServletContext().getInitParameter("imgUploadAbsolutePath");
            String imgUploadRelativePath = request.getServletContext().getInitParameter("imgUploadRelativePath");
    
          //服务曾处理数据,返回Dto
            ImgResultDto imgResult
                    = addCommodityService.upLoadEditorImg(list, imgUploadAbsolutePath, 
                                                    imgUploadRelativePath,1);
                return imgResult;           
        }
    
    }

    服务层创建Service类

    服务层创建Service接口类
    
    public interface AddCommodityService {
        /**
         * 上传商品图片
         * @param files
         */
        ImgResultDto upLoadEditorImg(List<MultipartFile> list,
                String UploadAbsolutePath,
                String UploadRelativePath,
                int commodityId);
    }
    服务层创建Service接口实现类

    这里需要注意的是保存地址,我是保存在项目路径下,有的会保存在文件系统根目录下,比如windows可能是D://xxx/xx,linux是/xx/xx,那么返回给客户端的地址就会不一样.需要根据实际情况设置

    public class AddCommodityServiceImpl extends BaseService  implements AddCommodityService{
        @Autowired
        private CommodityMapper commodityMapper;
        @Autowired
        CommodityImageMapper commodityImageMapper;
        @Autowired
        private DruidDataSource dataSource; 
        @Autowired
        private SqlSessionFactoryBean sqlSessionFactory;
    /**
         * 图片上传处理
         */
        @Override
        public ImgResultDto upLoadEditorImg(List<MultipartFile> list,
                String UploadAbsolutePath,
                String UploadRelativePath,
                int commodityId) {
    
            //获取当前登录的管理员
            //CmsAdmin admin = (CmsAdmin) SessionUtils.getSession("currenLogintAdmin");
            CmsAdmin admin = new CmsAdmin("测试用户");
            //工程绝对路径
            String imgUploadAbsolutePath = UploadAbsolutePath;
            //工程相对路径
            String imgUploadRelativePath = UploadRelativePath;
            logger.debug("files.length = " + list.size() );
            ImgResultDto imgResultDto = new ImgResultDto();
            //这里定
            String[] urlData = new String[5];
            int index = 0;
            try {
                for(MultipartFile img : list) {
                  //获取原始文件名,比如你上传的是 图片.jpg,则fileName=图片.jpg
                    String fileName = img.getOriginalFilename();
                    if(fileName == "") {
                        continue;
                    }
                    logger.debug("file  name = " + fileName);
                    String finalPath = imgUploadAbsolutePath + imgUploadRelativePath;  //绝对路径 + 相对路径
                    //为了保证文件名不一致,因此文件名称使用当前的时间戳和4位的随机数,还有原始文件名组成
                    //觉得实际的企业开发不应当使用原始文件名,否则上传者使用一些不好的名字,对于下载者就不好了.
                    //这里为了调试方便,可以加上.
                    String finalFileName =  (new Date().getTime()) + Math.round(Math.random() * 1000)  //文件名动态部分
                                        + fileName; //文件名 原始文件名        
                    File newfile = new File( finalPath + finalFileName);
                    logger.debug("创建文件夹 = " + newfile.mkdirs() +  "  path = " + newfile.getPath());
                    logger.debug("" + newfile.getAbsolutePath());
                    //保存文件到本地
                    img.transferTo(newfile);
                    logger.debug("上传图片成功");
                    //持久化到数据库
                    CommodityImage commodityImage = new  CommodityImage(commodityId, imgUploadRelativePath,
                            finalFileName,(byte)(0),admin.getLoginJobnum(), new Date());
    
                    commodityImageMapper.insert(commodityImage);
                    logger.debug("数据库写入图片成功");  
                    //这里的路径是项目路径+文件路径+文件名称
                    //这么写不是规范的做法,项目路径应是放在前端处理,只需要发送相对路径和文件名称即可,项目路径由前端加上.
                    urlData[index++] = "http://localhost:8080/lanmei-cms/"+imgUploadRelativePath + finalFileName;
                    logger.debug("index = " + index 
                            + "  url = " + urlData[0]);
                    //设置异常代号
                    imgResultDto.setErrno(0);
                }
                imgResultDto.setData(urlData);
                //返回Dto
                return imgResultDto;
            } catch (Exception e) {
                // TODO: handle exception
                e.printStackTrace();
                return imgResultDto;
            }
    
        }
    
    }

    Dto编写

    Dto 只是一个普通的pojo类,没有业务方法,只有属性和构造器,getter and setter.主要用于层间传输数据,更详细的说明自行百度.

    public class ImgResultDto<T> {
    
        private int  errno;//错误代码
    
        private String[] data;//存放数据
        //构造器
        //getter and setter

    前端接收处理

    添加 customInsert: function (insertImg, result, editor)这段程序
    result是返回的json数据
    因为上面只是上传了一张图片,保存在数组索引0里
    因此通过下面获取图片地址.
    var url = result.data[0];

        // 上传图片 hook 
        uploadImgHooks: {
    
            before: function before(xhr, editor, files) {
                // 图片上传之前触发
    
                // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
                // return {
                //     prevent: true,
                //     msg: '放弃上传'
                // }
            },
            success: function success(xhr, editor, result) {
                // 图片上传并返回结果,图片插入成功之后触发
                console.log("插入图片成功 success result = " + result.errno + "  path = " + result.data[0] );
            },
            fail: function fail(xhr, editor, result) {
                console.log(" fail result = " + result.errno + "  path = " + result.data[0] );
                // 图片上传并返回结果,但图片插入错误时触发
            },
            error: function error(xhr, editor) {
                // 图片上传出错时触发
                console.log("error result = " + result.errno + "  path = " + result.data[0] );
            },
            timeout: function timeout(xhr, editor) {
                // 图片上传超时时触发
                console.log("timeout result = " + result.errno + "  path = " + result.data );
            },
    
           // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式,可使用该配置 
            //--------------添加这段程序------------------
            customInsert: function (insertImg, result, editor) {
                // 图片上传并返回结果,自定义插入图片的事件(而不是编辑器自动插入图片!!!)
                // insertImg 是插入图片的函数,editor 是编辑器对象,result 是服务器端返回的结果
    
                // 举例:假如上传图片成功后,服务器端返回的是 {url:'....'} 这种格式,即可这样插入图片:
    
                //-----------修改这里------------------
                //获取返回的图片地址
                var url = result.data[0];
    
                insertImg(url);
    
                console.log("插入图片 url = " + url );
                // result 必须是一个 JSON 格式字符串!!!否则报错
            }
        },
    
        // 是否上传七牛云,默认为 false
        qiniu: false
    
    };

    完成!!!!!!!!!!!!!!!!!

    总结

      本文说明了如何在Java WEB项目中使用富文本编辑器wangEditor,包括前端配置和后端处理.仅说明其简单的用法,业务也未考虑的很周详.更多功能扩展请看官方的说明.
      项目的完整程序请看蓝莓商城项目,后面我会陆续完善.

    展开全文
  • 二、访问UEditor富文本编辑器以下这个文件 /ueditor/php/controller.php 是否返回以下 三、再次访问UEditor富文本编辑器 /ueditor/php/controller.php?action=config 返回以下错误 出现在以上三个问题,可以确认...

    一、在后台打开百度的编辑器显示下图
    在这里插入图片描述
    二、访问UEditor富文本编辑器以下这个文件 /ueditor/php/controller.php 是否返回以下
    在这里插入图片描述
    三、再次访问UEditor富文本编辑器 /ueditor/php/controller.php?action=config 返回以下错误
    在这里插入图片描述
    出现在以上三个问题,可以确认是UEditor富文本编辑器 /ueditor/php/controller.php 这个文件下的这个

    $CONFIG = json_decode(preg_replace("//*[\s\S]+?*//", “”, file_get_contents(“config.json”)), true);
    引入config.json路径错误造成的
    在这里插入图片描述
    修改如下

    $CONFIG = json_decode(preg_replace("/\/\*[\s\S]+?\*\//", "", file_get_contents($_SERVER['DOCUMENT_ROOT']."/public/static/ueditor/php/config.json")), true);
    

    在这里插入图片描述
    $_SERVER[‘DOCUMENT_ROOT’]."/public/static/ueditor/php/config.json" 是config.json这个文件的绝对路径

    展开全文
  • springboot+vue集成百度富文本编辑器ueditor+后端上传图片配置 先来一张效果图 开始 1、下载UEditor官网最新的jsp版本的包,下载完成解压之后得到一个utf8-jsp的文件夹,里面包含的内容如下: 下载地址:...

    springboot+vue集成百度富文本编辑器ueditor+后端上传图片配置

    先来一张效果图

    在这里插入图片描述

    开始

    1、下载UEditor官网最新的jsp版本的包,下载完成解压之后得到一个utf8-jsp的文件夹,里面包含的内容如下:
    下载地址:https://ueditor.baidu.com/website/download.html。这里下载的是jsp版本。

    在这里插入图片描述

    除了jsp文件夹和index.html文件外,把所有的文件都复制到前台目录下的static里文件夹里,如下图:在这里插入图片描述
    2.编辑 UEditor 编辑器 配置文件
    我们打开 ueditor.config.js,修改其中的window.UEDITOR_HOME_UR配置,如下:
    window.UEDITOR_HOME_URL = “/static/UE/”; //指定编辑器资源文件根目录
    var URL = window.UEDITOR_HOME_URL || getUEBasePath();

    ueditor.config.js文件有很多配置,可以在这里进行一些初始化的全局配置,比如编辑器的默认宽高等:
    ,initialFrameWidth:1000 //初始化编辑器宽度,默认1000
    ,initialFrameHeight:320 //初始化编辑器高度,默认320
    其他的参数配置,在该文件中有详细列出,或者参考官方文档 http://fex.baidu.com/ueditor/

    3.将编辑器集成到系统中
    打开 /src/main.js 文件,插入下面的代码:

    import ‘…/static/UE/ueditor.config.js’
    import ‘…/static/UE/ueditor.all.min.js’
    import ‘…/static/UE/lang/zh-cn/zh-cn.js’
    import ‘…/static/UE/ueditor.parse.min.js’

    4.开发公共组件 UE.vue
    我们在 /src/components/ 目录下创建 UE.vue文件,作为我们的编辑器组件文件。
    下面代码提供简单功能,具体使用根据需求完善该组件即可。

    <template>
        <div>
            <script id="editor" type="text/plain"></script>
        </div>
    </template>
    <script>
      import '../../static/UE/ueditor.config.js'
      import '../../static/UE/ueditor.all.js'
      import '../../static/UE/lang/zh-cn/zh-cn.js'
    
        export default {
            name: 'ue',
            data () {
                return {
                    editor: null
                }
            },
            props: {
                defaultMsg: {
                    type: String
                },
                config: {
                    type: Object,
                    serverUrl:"/baseApi/file/uploadFile",
                    // ,
                    UEDITOR_HOME_URL: '/static/UE/'
                },
                id: {
                    type: String
                },
                
            },
            mounted () {
                const _this = this; 
                this.editor = window.UE.getEditor('editor', this.config); // 初始化UE
                //初始化UE
                // const _this = this;
                // this.editor = UE.delEditor("editor");
                // this.editor = UE.getEditor('editor',this.config);
    
                // this.editor = window.UE.getEditor('editor', this.config);
                // this.editor.addListener('ready',  () => {
                //     this.editor.setContent(this.value)
                // })
            },
            methods: {
                getUEContent () {
                    return this.editor.getContent()
                },
                getContentTxt () {
                    return this.editor.getContentTxt()
                },
                setUEContent (value) {
                    // this.editor.addListener('ready',  (value) => {
                    //     this.editor.setContent(value)
                    // })
                    this.editor.setContent(value)
                },
                init(){
                    const _this = this; 
                    this.editor = window.UE.getEditor('editor', this.config); // 初始化UE
                }
            },
            destroyed () {
                this.editor.destroy()
            }
        }
    </script>
    <style lang="scss" scoped>
      .edit{
        width: 1200px;
        margin: auto;
      }
    </style>
    

    5.在其他页面中使用该组件
    简单地创建一个需要UEditor的页面,再该页面中使用刚才封装好的UE.vue组件:

    <template>
    <div>
        <div class="components-container" style="position:relative;top:50px;">
          <div class="editor-container">
         	 <Uediter style="overflow:auto;height:650px;" :defaultMsg=defaultMsg :config=config ref="ue"></Uediter>
          </div>
          <div slot="footer" class="dialog-footer">
              <el-button class="buttons" @click="isConcel">取 消</el-button>
              <el-button class="buttons" type="primary" @click="isOk">确 定</el-button>
          </div> 
        </div>
    </div>
    </template>
    
    <script>
      import Uediter from '@/components/UE.vue';
      import qs from 'qs'
      import axios from 'axios'
    
      export default {
        components:{
          Uediter
        },
        data (){
          return{
            defaultMsg: '这里是UE',
            config: {
                initialFrameWidth: 1000,
                initialFrameHeight: 500
            }
          }
        },
        mounted(){
    
    	},
        methods: {
    		returnContent () {
    			var content=this.$refs.ue.getUEContent();     //获取ueditor编辑器的html内容
                this.$refs.ue.setUEContent(“”)            	  //设置ueditor编辑器的内容
            	this.$refs.ue.getContentTxt ()                //获取ueditor编辑器的文本内容
            }
          
      	}
    
    </script>
    <style scoped>
      .div1{
        background-image:url('https://park.zmzncs.com/images/2019816/introduc.png');
        background-repeat:no-repeat; height:600px;
        position: relative;top: 100px;
        overflow: auto
      }
    </style>
    

    6.配置完上述内容后,控制台可能会出现"后台配置项返回格式出错,上传功能将不能正常使用!“的报错,
    我们在编辑器中上传图片或者视频,也会出现响应的报错,这是因为没有配置服务器的请求接口,在ueditor.config.js中,对serverUrl进行配置:
    // 服务器统一请求接口路径
    , serverUrl:”/baseApi/ueditor/exec" //连接后台的接口(/baseApi/为后台跨域的代理接口)

    7.前端配置到这里就可以,剩下的是后端配置
    idea 的pom文件导入一下jar包

    		<dependency>
                <groupId>commons-codec</groupId>
                <artifactId>commons-codec</artifactId>
                <version>1.10</version>
            </dependency>
            <dependency>
                <groupId>commons-io</groupId>
                <artifactId>commons-io</artifactId>
                <version>2.6</version>
            </dependency>
            <dependency>
                <groupId>org.json</groupId>
                <artifactId>json</artifactId>
                <version>20180130</version>
            </dependency>
            <dependency>
                <groupId>commons-fileupload</groupId>
                <artifactId>commons-fileupload</artifactId>
                <version>1.3</version>
            </dependency>
            <dependency>
                <groupId>commons-lang</groupId>
                <artifactId>commons-lang</artifactId>
                <version>2.6</version>
            </dependency>
    
       将jsp目录下的lib目中的ueditor.jar文件中的所有类全部拿出来(具体方式自己决定,反编译工具或者拿到源码都可以),放到后端项目中,然后将config.json放到项目的resources中,如下图:
    

    在这里插入图片描述
    在这里插入图片描述
    然后在control层新建一个UeditorController.java的类,如下:
    其中 public String exec(HttpServletRequest request) throws UnsupportedEncodingException {}get请求为editor初始化, public Map<String, String> execPost(HttpServletRequest request, HttpServletResponse response) throws IOException {}post请求为上传图片接口,
    前端ueditor.config.js中,对serverUrl进行配置:
    // 服务器统一请求接口路径
    , serverUrl:"/baseApi/ueditor/exec" //此接口就是下面写的controller内的接口。

    ResponseObject responseObject=fileManagerController.uploadFile(request);这个为调用的上传图片具体逻辑的方法

    @RestController
    @CrossOrigin
    @RequestMapping("/api/ueditor")
    public class UeditorController {
        @Autowired
        private FileManagerController fileManagerController;
    
        @RequestMapping(value = "/exec", method = RequestMethod.GET)
        public String exec(HttpServletRequest request) throws UnsupportedEncodingException {
            request.setCharacterEncoding("utf-8");
            String rootPath = request.getRealPath("/");
            return new ActionEnter( request, rootPath ).exec();
        }
        @RequestMapping(value = "/exec", method = RequestMethod.POST)
        public Map<String, String> execPost(HttpServletRequest request, HttpServletResponse response) throws IOException {
            request.setCharacterEncoding("utf-8");
    //        response.setHeader("Content-Type","test/html");
            response.setContentType("text/html;charset=utf-8");
            String rootPath = request.getRealPath("/");
            new ActionEnter( request, rootPath ).exec();
            ResponseObject responseObject=fileManagerController.uploadFile(request);
            Map map=(Map) responseObject.getData();
            String title=String.valueOf(map.get("fileName"));
            String group=String.valueOf(map.get("cruSavePath"));
            String url=String.valueOf(map.get("cruUrlPath"));
            Map<String,String> map1=new HashMap();
            map1.put("title",title);
            map1.put("group",group);
            map1.put("url",url);
    //        map1.put("type",".jpg");
            map1.put("state","SUCCESS");
    //        map1.put("size","0");
            map1.put("original",title);
            Object o = JSONObject.toJSON(map1);
            System.out.println(o);
    //        return o.toString();
            return map1;
        }
    
        @RequestMapping(value="/config",method = RequestMethod.GET)
        public void config(HttpServletRequest request, HttpServletResponse response) {
            response.setContentType("application/json");
    
            String rootPath = request.getSession().getServletContext().getRealPath("/");
            try {
                String exec = new ActionEnter(request, rootPath).exec();
                PrintWriter writer = response.getWriter();
                writer.write(exec);
                writer.flush();
                writer.close();
            } catch(IOException e) {
                e.printStackTrace();
            }
        }
    }
    

    最后 后台代码打包到服务器,还需创建UeditorConfig类并修改ConfigManager.java这个类的
    initEnv()方法来解决把项目打成jar包后读取不到config.json配置文件的问题

    package com.zm.homeapi.common.ueditor.config;
    
    public final class UeditorConfig {
    
        public static String configContent = "/*前后端通信相关的配置,注释只允许使用多行方式*/"+
                "{"+
                "/*上传图片配置项*/"+
                "\"imageActionName\":\"uploadimage\",/*执行上传图片的action名称*/"+
                "\"imageFieldName\":\"upfile\",/*提交的图片表单名称*/"+
                "\"imageMaxSize\":2048000,/*上传大小限制,单位B*/"+
                "\"imageAllowFiles\":[\".png\",\".jpg\",\".jpeg\",\".gif\",\".bmp\"],/*上传图片格式显示*/"+
                "\"imageCompressEnable\":true,/*是否压缩图片,默认是true*/"+
                "\"imageCompressBorder\":1600,/*图片压缩最长边限制*/"+
                "\"imageInsertAlign\":\"none\",/*插入的图片浮动方式*/"+
                "\"imageUrlPrefix\":\"\",/*图片访问路径前缀*/"+
                "\"localSavePathPrefix\":\"\",/*图片访问路径前缀*/"+
                "\"imagePathFormat\":\"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\",/*上传保存路径,可以自定义保存路径和文件名格式*/"+
                "/*{filename}会替换成原文件名,配置这项需要注意中文乱码问题*/"+
                "/*{rand:6}会替换成随机数,后面的数字是随机数的位数*/"+
                "/*{time}会替换成时间戳*/"+
                "/*{yyyy}会替换成四位年份*/"+
                "/*{yy}会替换成两位年份*/"+
                "/*{mm}会替换成两位月份*/"+
                "/*{dd}会替换成两位日期*/"+
                "/*{hh}会替换成两位小时*/"+
                "/*{ii}会替换成两位分钟*/"+
                "/*{ss}会替换成两位秒*/"+
                "/*非法字符\\:*?\"<>|*/"+
                "/*具请体看线上文档:fex.baidu.com/ueditor/#use-format_upload_filename*/"+
                ""+
                "/*涂鸦图片上传配置项*/"+
                "\"scrawlActionName\":\"uploadscrawl\",/*执行上传涂鸦的action名称*/"+
                "\"scrawlFieldName\":\"upfile\",/*提交的图片表单名称*/"+
                "\"scrawlPathFormat\":\"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\",/*上传保存路径,可以自定义保存路径和文件名格式*/"+
                "\"scrawlMaxSize\":2048000,/*上传大小限制,单位B*/"+
                "\"scrawlUrlPrefix\":\"\",/*图片访问路径前缀*/"+
                "\"scrawlInsertAlign\":\"none\","+
                ""+
                "/*截图工具上传*/"+
                "\"snapscreenActionName\":\"uploadimage\",/*执行上传截图的action名称*/"+
                "\"snapscreenPathFormat\":\"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\",/*上传保存路径,可以自定义保存路径和文件名格式*/"+
                "\"snapscreenUrlPrefix\":\"\",/*图片访问路径前缀*/"+
                "\"snapscreenInsertAlign\":\"none\",/*插入的图片浮动方式*/"+
                ""+
                "/*抓取远程图片配置*/"+
                "\"catcherLocalDomain\":[\"127.0.0.1\",\"localhost\",\"img.baidu.com\"],"+
                "\"catcherActionName\":\"catchimage\",/*执行抓取远程图片的action名称*/"+
                "\"catcherFieldName\":\"source\",/*提交的图片列表表单名称*/"+
                "\"catcherPathFormat\":\"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\",/*上传保存路径,可以自定义保存路径和文件名格式*/"+
                "\"catcherUrlPrefix\":\"\",/*图片访问路径前缀*/"+
                "\"catcherMaxSize\":2048000,/*上传大小限制,单位B*/"+
                "\"catcherAllowFiles\":[\".png\",\".jpg\",\".jpeg\",\".gif\",\".bmp\"],/*抓取图片格式显示*/"+
                ""+
                "/*上传视频配置*/"+
                "\"videoActionName\":\"uploadvideo\",/*执行上传视频的action名称*/"+
                "\"videoFieldName\":\"upfile\",/*提交的视频表单名称*/"+
                "\"videoPathFormat\":\"/ueditor/jsp/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}\",/*上传保存路径,可以自定义保存路径和文件名格式*/"+
                "\"videoUrlPrefix\":\"\",/*视频访问路径前缀*/"+
                "\"videoMaxSize\":102400000,/*上传大小限制,单位B,默认100MB*/"+
                "\"videoAllowFiles\":["+
                "\".flv\",\".swf\",\".mkv\",\".avi\",\".rm\",\".rmvb\",\".mpeg\",\".mpg\","+
                "\".ogg\",\".ogv\",\".mov\",\".wmv\",\".mp4\",\".webm\",\".mp3\",\".wav\",\".mid\"],/*上传视频格式显示*/"+
                ""+
                "/*上传文件配置*/"+
                "\"fileActionName\":\"uploadfile\",/*controller里,执行上传视频的action名称*/"+
                "\"fileFieldName\":\"upfile\",/*提交的文件表单名称*/"+
                "\"filePathFormat\":\"/ueditor/jsp/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}\",/*上传保存路径,可以自定义保存路径和文件名格式*/"+
                "\"fileUrlPrefix\":\"\",/*文件访问路径前缀*/"+
                "\"fileMaxSize\":51200000,/*上传大小限制,单位B,默认50MB*/"+
                "\"fileAllowFiles\":["+
                "\".png\",\".jpg\",\".jpeg\",\".gif\",\".bmp\","+
                "\".flv\",\".swf\",\".mkv\",\".avi\",\".rm\",\".rmvb\",\".mpeg\",\".mpg\","+
                "\".ogg\",\".ogv\",\".mov\",\".wmv\",\".mp4\",\".webm\",\".mp3\",\".wav\",\".mid\","+
                "\".rar\",\".zip\",\".tar\",\".gz\",\".7z\",\".bz2\",\".cab\",\".iso\","+
                "\".doc\",\".docx\",\".xls\",\".xlsx\",\".ppt\",\".pptx\",\".pdf\",\".txt\",\".md\",\".xml\""+
                "],/*上传文件格式显示*/"+
                ""+
                "/*列出指定目录下的图片*/"+
                "\"imageManagerActionName\":\"listimage\",/*执行图片管理的action名称*/"+
                "\"imageManagerListPath\":\"/ueditor/jsp/upload/image/\",/*指定要列出图片的目录*/"+
                "\"imageManagerListSize\":20,/*每次列出文件数量*/"+
                "\"imageManagerUrlPrefix\":\"\",/*图片访问路径前缀*/"+
                "\"imageManagerInsertAlign\":\"none\",/*插入的图片浮动方式*/"+
                "\"imageManagerAllowFiles\":[\".png\",\".jpg\",\".jpeg\",\".gif\",\".bmp\"],/*列出的文件类型*/"+
                ""+
                "/*列出指定目录下的文件*/"+
                "\"fileManagerActionName\":\"listfile\",/*执行文件管理的action名称*/"+
                "\"fileManagerListPath\":\"/ueditor/jsp/upload/file/\",/*指定要列出文件的目录*/"+
                "\"fileManagerUrlPrefix\":\"\",/*文件访问路径前缀*/"+
                "\"fileManagerListSize\":20,/*每次列出文件数量*/"+
                "\"fileManagerAllowFiles\":["+
                "\".png\",\".jpg\",\".jpeg\",\".gif\",\".bmp\","+
                "\".flv\",\".swf\",\".mkv\",\".avi\",\".rm\",\".rmvb\",\".mpeg\",\".mpg\","+
                "\".ogg\",\".ogv\",\".mov\",\".wmv\",\".mp4\",\".webm\",\".mp3\",\".wav\",\".mid\","+
                "\".rar\",\".zip\",\".tar\",\".gz\",\".7z\",\".bz2\",\".cab\",\".iso\","+
                "\".doc\",\".docx\",\".xls\",\".xlsx\",\".ppt\",\".pptx\",\".pdf\",\".txt\",\".md\",\".xml\""+
                "]/*列出的文件类型*/"+
                ""+
                "}";
    
    }
    
    
    
    private void initEnv () throws FileNotFoundException, IOException {
    
    		File file = new File(this.originalPath);
    
    		if (!file.isAbsolute()) {
    			file = new File(file.getAbsolutePath());
    		}
    
    		this.parentPath = file.getParent();
    		String configContent=this.filter(UeditorConfig.configContent);
    
    		try{
    			JSONObject jsonConfig = new JSONObject( configContent );
    			this.jsonConfig = jsonConfig;
    		} catch ( Exception e ) {
    			this.jsonConfig = null;
    		}
    
    	}
    

    最后效果图:
    在这里插入图片描述
    ok搞定

    展开全文
  • UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码... 问题描述 我的编辑器在本地测试的时候没问题,但是上传到...

    UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码...

     

    问题描述

    我的编辑器在本地测试的时候没问题,但是上传到服务器上之后,上传图片、视频等文件的时候出错,显示后端配置项没有正常加载,上传插件不能正常使用!如图:

    1463916915357508.png

     

    解决方法

    可以测试一下 php 代码是否正确执行,在浏览器打开 ueditor/controller.php 对应的路径,看看是否有下面的返回值。

    {
        state: "请求地址出错"
    }

    或者是

    {"state":"\u8bf7\u6c42\u5730\u5740\u51fa\u9519"}

    再访问 ueditor/php/controller.php?action=config 是否正常返回了json格式的后端配置内容,格式大致如下。

    {
        "imageUrl": "http://localhost/ueditor/php/controller.php?action=uploadimage",
        "imagePath": "/ueditor/php/",
        "imageFieldName": "upfile",
        "imageMaxSize": 2048,
        "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"]
        "其他配置项...": "其他配置值..."
    }

    官方文档指出,如果以上这两个请求出错,出现400、500等错误,编辑器上传相关的功能将不能正常使用。

    那么接下来打开ueditor/php/controller.php文件,修改

    $CONFIG = json_decode(preg_replace("/\/\*[\s\S]+?\*\//", "", file_get_contents("config.json")), true);

    修改成:

    $CONFIG = json_decode(preg_replace("/\/\*[\s\S]+?\*\//", "", file_get_contents($_SERVER['DOCUMENT_ROOT']."/ueditor/php/config.json")), true);

    代码中$_SERVER['DOCUMENT_ROOT']."/ueditor/php/config.json"为config.json文件的绝对路径!

    转载于:https://www.cnblogs.com/lxwphp/p/7799257.html

    展开全文
  • 效果图kindeditor包下类UploadAccessory.java/* */ package com.scrh.web.com.elkan.kindeditor;/* */ /* */ import java.io.File;/* */ import java.io.IOException;/* */ import java.io.PrintStrea...
  • UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码...问题描述我的编辑器在本地测试的时候没问题,但是上传到服务器上...
  • layui.use('layedit', function(){var layedit = layui.layedit;layedit.set({uploadImage: {url: '/admin/goods/uploadImage' //接口url,type: 'post', //默认postsuccess:...//构建一个默认的编辑器var index = ...
  • 富文本编辑器不同于文本编辑器,程序员可到网上下载免费的富文本编辑器内嵌于自己的网站或程序里(当然付费的功能会更强大些),方便用户编辑文章或信息。 安装依赖包 pip install django-tinymce==2.6.0 ...
  • 1、百度UEditor 编辑器(丰富而多样) 参考:百度UEditor富文本地图控件不支持https的问题解决 修改上传图片、文件的存放路径,找到baidueditor/php/config.json 的 config.json 文件,用 Notepad++ 编辑器修改...
  • 微信小程序富文本编辑器官方插件editor为微信小程序前端和图片接收后端,基于微信官方演示程序,去掉了多余的东西,加了一个后端接收图片的代码,直接可以使用,其他语言参照接收程序很简单。直接可以用。
  • SpringBoot后端百度富文本编辑器的做法(Java) 1.后端加载百度富文本编辑器的配置文件congfig.json,本项目放在resources下的static.ueditor下 congfig.json: { /* 上传图片配置项 */ "imageActionName": ...
  • 公司运营端需要增加一个富文本编辑器的模块,使用的是百度的ueditor,借鉴的是csdn一位大佬郑昊川先生的教程vue+ueditor,万分感谢。这个教程已经非常详细的讲述了vue结合ueditor的使用,方便参考。 此篇着重讲述...
  • 识别不出来后端返回的富文本编辑器里面的class类名 <p><strong>html代码</strong><br /> 请附上出现问题的html代码(或附件),例如: <pre><code> testClass1:"<span class=&#...
  • Vue中部署百度富文本编辑器UEditor及其自带的后端,并加入秀米插件导语部署UEditor前端部分 导语 本文使用vue-ueditor-wrap插件将UEditor编辑器嵌入Vue中,实践过程中颇多曲折,以下错误和解决方案都是个人摸索的...
  • 我在官网上下载了个hueditor1_4_3_3 JSP版本的富文本编辑器,结果显示报错: 后端配置项没有正常加载,上传插件不能正常使用!后来上网查是上传路径没配置,然后我再config.json文件下找到...
  • 首先在后台中使用 1、安装依赖包 pip install django-tinymce ...INSTALLED_APPS = ( ... ...)2、在setting文件中添加编辑器配置 TINYMCE_DEFAULT_CONFIG = { 'theme': 'advanced', 'width': 600, ...
  • 注意,这里的图片上传配置,仅能保证图片管理的上传下载正常,而单张照片上传,后端显示成功,也接收到文件了,可是前端会报错,笔者没有找到解决方案,所以注释掉了单张照片上传的功能,以后有时间再研究。1.后端...
  • 概述这两款编辑器都是采用JavaScript编写,不需要引用dll,可以与主流后端编程语言【Java , .NET,PHP,ASP等】无缝对接,体积小,可以将现有的TextArea变成富文本编辑器。下面来分别介绍下:什么是KindEditor?Kind.....
  • element-ui对公司的后台管理系统进行重构,听说这个后台管理系统是零几年的产物,历史悠久,看界面就看得出是前后端不分离时期,PHP后端工程师做的,不符合我们95后程序员的审美,而且里面的富文本编辑器也是很老的...
  • 最初,觅道文档以 Markdown 书写为核心,集成了 EditorMD 和 Vditor 两大主流 Markdown 编辑器,配合后端的文集、文档管理,图片、附件支持,以及类 GitBook 风格的前台阅读页面,得到了很多朋友的支持。但是与用户...
  • 尝试过tinymce和vue-quill-editor,感觉虽然较百度富文本轻量一些,但是还要后端额外写个上传图片的接口,对上传附件和上传本地视频也不太友好,还是选择了百度富文本编辑器——ueditor在官网下载,最新版就可以,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 451
精华内容 180
关键字:

富文本编辑器后端