精华内容
下载资源
问答
  • layui + ueditor 的使用

    千次阅读 2019-12-08 11:38:39
    以前也用这个富文本编辑器,但是,后边使用layui后,就会使用layedit这个富文本编辑器。后来发现,layedit的编辑器问题很大。有一系列的问题: 复制word文档,样式取消。没有办法处理 复制粘贴后,如果在粘贴之前...

    以前也用这个富文本编辑器,但是,后边使用layui后,就会使用layedit这个富文本编辑器。后来发现,layedit的编辑器问题很大。有一系列的问题:

    1. 复制word文档,样式取消。没有办法处理
    2. 复制粘贴后,如果在粘贴之前存在段落。那么段乱中设置的字体就会取消设置,回归初始。
    3. 功能较少。我使用了一个首行缩进功能,只有一个人有过这样的操作。但是,首行缩进只能一行进行缩进。如果段落较多,那么需要多次进行设置,好麻烦啊。
    4. ...... 总之,直接放弃了

    现在来说使用ueditor集成到layui中。怎么集成?

    集成之前思考的问题:

    1. layui是使用模块化的。那么,怎么把一个js插件与layui相结合?
    2. 使用layui的模块化样式修改ueditor的js源码符合layui的调用模块样式?
    3. ueditor的需要的东西很多,怎么能修改好使之能正确的调用到?

    发现这样操作是很麻烦的。那么怎么解决这种复杂的问题?我上网查询怎么集成。发现很多都是这样进行修改的。我想是不是只有这一种方式。我也操作了一下,没理出头绪来。遂放弃了。后来看到了vaeThink 这个轻量级的PHP框架。这里边有集成。经过查看发现:没有必要把ueditor做成一个layui的模块。在使用ueditor的页面中引入需要的js。作为两个互不交融的js文件就好了。

    步骤:

    1. 下载ueditor的文件,并把ueditor下的文件全部复制到static文件夹下(我这个是springboot项目)(js文件中有调用。最好不要就复制主要的js文件,出错了再修改错误).
    2. 页面中调用js文件:
      <script th:src="@{/static/ueditor/third-party/jquery.min.js}"></script>
      <script th:src="@{/static/ueditor/lang/zh-cn/zh-cn.js}"></script>
      <!-- 配置文件 -->
      <script th:src="@{/static/ueditor/ueditor.config.js}"></script>
      <!-- 编辑器源码文件 -->
      <script th:src="@{/static/ueditor/ueditor.all.js}"></script>
      
      <script th:src="@{/static/ueditor/ueditor.parse.js}"></script>

      在ueditor的文档中只引入了两个js文件。这样会出现问题的。出现的问题就不在此处进行补充了。

    3. 实例化编辑器:

          <!-- 实例化编辑器 -->
          <script type="text/javascript">
              layui.define(function () {
                  let ue = UE.getEditor('container');
              })
          </script>

      初步集成完成了。有没有问题,我得后续进行测试。出现富文本编辑器的样式就算完成了。

    展开全文
  • SpringBoot 2.x + Layui + UEditor 实现富文本编辑器一、下载 UEditor 源码二、使用 grunt 打包源代码1、在 UEditor 源码根目录打开命令提示符窗口2、安装打包需要的grunt插件3、执行打包命令三、下载 Layui四、配置...

    一、下载 UEditor 源码

    UEditor 官网: UEditor 官网

    UEditor GitHub 地址:UEditor GitHub 地址

    下载最新版的源码:
    在这里插入图片描述

    二、使用 grunt 打包源代码

    node.js 和 grunt 的安装和使用请自行百度

    打包详细教程见 UEditor 官网:使用grunt打包源代码

    1、在 UEditor 源码根目录打开命令提示符窗口

    在这里插入图片描述
    在这里插入图片描述

    2、安装打包需要的grunt插件

    在命令提示符输入命令:npm install

    在这里插入图片描述
    在这里插入图片描述

    这个命令会根据 package.json 文件,安装打包需要的 grunt 和 grunt 插件,安装结束后,会在 ueditor 目录下出现一个 node_modules 文件夹。

    3、执行打包命令

    在命令提示符输入命令:grunt --encode=utf8 --server=jsp

    在这里插入图片描述

    出现 Done, without errors. 时,打包完成。

    在这里插入图片描述

    这个命令会根据 Gruntfile.js 执行打包的任务,运行过程需要 java 环境 支持

    命令完成后,ueditor 目录下会出现 dist/ 目录,里面有你要的打包好的 ueditor 文件夹,默认是 utf8-jsp 文件夹。

    在这里插入图片描述

    执行打包grunt命令时,可以传入编码和后台语言的参数:
    1、支持两种编码指定:–encode参数

    • utf8 (默认编码)
    • gbk

    2、提供四种后台语言支持:–server参数

    • php (默认语言)
    • jsp
    • net (代表.net后台)
    • asp

    三、下载 Layui

    Layui 官网: Layui 官网

    在这里插入图片描述

    四、配置 SpringBoot 项目

    1、依赖

    	<dependencies>
            <!-- ueditor 依赖 -->
            <dependency>
                <groupId>commons-fileupload</groupId>
                <artifactId>commons-fileupload</artifactId>
                <version>1.3.1</version>
            </dependency>
            <dependency>
                <groupId>commons-io</groupId>
                <artifactId>commons-io</artifactId>
                <version>2.4</version>
            </dependency>
            <dependency>
                <groupId>commons-codec</groupId>
                <artifactId>commons-codec</artifactId>
                <version>1.9</version>
            </dependency>
    
            <!--阿里 FastJson依赖-->
            <dependency>
                <groupId>com.alibaba</groupId>
                <artifactId>fastjson</artifactId>
                <version>1.2.39</version>
            </dependency>
    
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-thymeleaf</artifactId>
            </dependency>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-web</artifactId>
            </dependency>
            <dependency>
                <groupId>org.mybatis.spring.boot</groupId>
                <artifactId>mybatis-spring-boot-starter</artifactId>
                <version>2.1.4</version>
            </dependency>
    
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-devtools</artifactId>
                <scope>runtime</scope>
                <optional>true</optional>
            </dependency>
            <dependency>
                <groupId>mysql</groupId>
                <artifactId>mysql-connector-java</artifactId>
                <scope>runtime</scope>
            </dependency>
            <dependency>
                <groupId>org.projectlombok</groupId>
                <artifactId>lombok</artifactId>
                <optional>true</optional>
            </dependency>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-test</artifactId>
                <scope>test</scope>
            </dependency>
        </dependencies>
    

    2、目录结构

    1、把 UEditor 打包生成的 dist/utf8-jsp 文件夹复制到 static 文件夹下,并把 utf8-jsp 文件夹重命名为 ueditor

    2、把 layui 文件夹复制到 static 文件夹下

    3、在 resources 文件夹下新建文件夹 lib,把 ueditor\jsp\lib 下的 ueditor-1.1.2.jar 文件复制到 static/lib 文件夹下(其他四个 jar 已在 Maven 添加依赖)

    在这里插入图片描述

    4、在项目中添加 jar 包

    在 project structure 中引入该 lib
    在这里插入图片描述
    引入 jar 包

    在这里插入图片描述
    在这里插入图片描述

    3、使用 UEditor

    ①、创建 ueditor.html 文件

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="/layui/css/layui.css">
        <script src="/layui/layui.js"></script>
        <script src="/js/jquery-3.3.1.min.js"></script>
    
        <script src="/ueditor/third-party/jquery-1.10.2.js"></script>
        <!-- 配置文件 -->
        <script src="/ueditor/ueditor.config.js"></script>
        <!-- 编辑器源码文件 -->
        <script src="/ueditor/ueditor.all.js"></script>
        <script src="/ueditor/lang/zh-cn/zh-cn.js"></script>
        <script src="/ueditor/ueditor.parse.js"></script>
    
    </head>
    <body>
    
    <div align="center">
        <br><br><br><br>
        <textarea id="faq_edit" type="text" style="height: 500px; width: 1000px;"></textarea>
    </div>
        
    
        <script type="application/javascript">
    
            layui.define(function () {
                let ue = UE.getEditor('faq_edit');
    
            });
        </script>
    
    </body>
    </html>
    

    ②、在浏览器打开 ueditor.html

    如果看到了下面这样的编辑器,恭喜你,初次部署成功(这里用了 Controller )!

    浏览器地址: http://localhost:8090/ueditor

    在这里插入图片描述
    初次使用会提示 后台配置项返回格式出错,上传功能将不能正常使用!
    在这里插入图片描述

    五、配置后端

    1、服务器统一请求接口路径

    配置 ueditor.config.js,设置服务器统一请求接口路径

    不要改动 URL,这里只改动 serverURL

    在这里插入图片描述

    2、配置返回 JSON 包

    打开 ueditor/jsp/config.json 文件,去掉注释,转化为 JSON

    在这里插入图片描述

    3、配置 UEditorController

    /**
     * @author wxhntmy
     */
    @RestController
    public class UEditorController {
    
        private String config_json = "{\n" +
                "\t\"imageActionName\": \"uploadimage\",\n" +
                "\t\"imageFieldName\": \"upfile\",\n" +
                "\t\"imageMaxSize\": 2048000,\n" +
                "\t\"imageAllowFiles\": [\".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\"],\n" +
                "\t\"imageCompressEnable\": true,\n" +
                "\t\"imageCompressBorder\": 1600,\n" +
                "\t\"imageInsertAlign\": \"none\",\n" +
                "\t\"imageUrlPrefix\": \"\",\n" +
                "\t\"imagePathFormat\": \"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\",\n" +
                "\n" +
                "\t\"scrawlActionName\": \"uploadscrawl\",\n" +
                "\t\"scrawlFieldName\": \"upfile\",\n" +
                "\t\"scrawlPathFormat\": \"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\",\n" +
                "\t\"scrawlMaxSize\": 2048000,\n" +
                "\t\"scrawlUrlPrefix\": \"\",\n" +
                "\t\"scrawlInsertAlign\": \"none\",\n" +
                "\n" +
                "\t\"snapscreenActionName\": \"uploadimage\",\n" +
                "\t\"snapscreenPathFormat\": \"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\",\n" +
                "\t\"snapscreenUrlPrefix\": \"\",\n" +
                "\t\"snapscreenInsertAlign\": \"none\",\n" +
                "\n" +
                "\t\"catcherLocalDomain\": [\"127.0.0.1\", \"localhost\", \"img.baidu.com\"],\n" +
                "\t\"catcherActionName\": \"catchimage\",\n" +
                "\t\"catcherFieldName\": \"source\",\n" +
                "\t\"catcherPathFormat\": \"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\",\n" +
                "\t\"catcherUrlPrefix\": \"\",\n" +
                "\t\"catcherMaxSize\": 2048000,\n" +
                "\t\"catcherAllowFiles\": [\".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\"],\n" +
                "\n" +
                "\t\"videoActionName\": \"uploadvideo\",\n" +
                "\t\"videoFieldName\": \"upfile\",\n" +
                "\t\"videoPathFormat\": \"/ueditor/jsp/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}\",\n" +
                "\t\"videoUrlPrefix\": \"\",\n" +
                "\t\"videoMaxSize\": 102400000,\n" +
                "\t\"videoAllowFiles\": [\n" +
                "\t\t\".flv\", \".swf\", \".mkv\", \".avi\", \".rm\", \".rmvb\", \".mpeg\", \".mpg\",\n" +
                "\t\t\".ogg\", \".ogv\", \".mov\", \".wmv\", \".mp4\", \".webm\", \".mp3\", \".wav\", \".mid\"\n" +
                "\t],\n" +
                "\n" +
                "\t\"fileActionName\": \"uploadfile\",\n" +
                "\t\"fileFieldName\": \"upfile\",\n" +
                "\t\"filePathFormat\": \"/ueditor/jsp/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}\",\n" +
                "\t\"fileUrlPrefix\": \"\",\n" +
                "\t\"fileMaxSize\": 51200000,\n" +
                "\t\"fileAllowFiles\": [\n" +
                "\t\t\".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\",\n" +
                "\t\t\".flv\", \".swf\", \".mkv\", \".avi\", \".rm\", \".rmvb\", \".mpeg\", \".mpg\",\n" +
                "\t\t\".ogg\", \".ogv\", \".mov\", \".wmv\", \".mp4\", \".webm\", \".mp3\", \".wav\", \".mid\",\n" +
                "\t\t\".rar\", \".zip\", \".tar\", \".gz\", \".7z\", \".bz2\", \".cab\", \".iso\",\n" +
                "\t\t\".doc\", \".docx\", \".xls\", \".xlsx\", \".ppt\", \".pptx\", \".pdf\", \".txt\", \".md\", \".xml\"\n" +
                "\t],\n" +
                "\n" +
                "\t\"imageManagerActionName\": \"listimage\",\n" +
                "\t\"imageManagerListPath\": \"/ueditor/jsp/upload/image/\",\n" +
                "\t\"imageManagerListSize\": 20,\n" +
                "\t\"imageManagerUrlPrefix\": \"\",\n" +
                "\t\"imageManagerInsertAlign\": \"none\",\n" +
                "\t\"imageManagerAllowFiles\": [\".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\"],\n" +
                "\n" +
                "\t\"fileManagerActionName\": \"listfile\",\n" +
                "\t\"fileManagerListPath\": \"/ueditor/jsp/upload/file/\",\n" +
                "\t\"fileManagerUrlPrefix\": \"\",\n" +
                "\t\"fileManagerListSize\": 20,\n" +
                "\t\"fileManagerAllowFiles\": [\n" +
                "\t\t\".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\",\n" +
                "\t\t\".flv\", \".swf\", \".mkv\", \".avi\", \".rm\", \".rmvb\", \".mpeg\", \".mpg\",\n" +
                "\t\t\".ogg\", \".ogv\", \".mov\", \".wmv\", \".mp4\", \".webm\", \".mp3\", \".wav\", \".mid\",\n" +
                "\t\t\".rar\", \".zip\", \".tar\", \".gz\", \".7z\", \".bz2\", \".cab\", \".iso\",\n" +
                "\t\t\".doc\", \".docx\", \".xls\", \".xlsx\", \".ppt\", \".pptx\", \".pdf\", \".txt\", \".md\", \".xml\"\n" +
                "\t]\n" +
                "\n" +
                "}";
    
        @RequestMapping(value = "/ueditor/jsp/action", method = {RequestMethod.GET, RequestMethod.POST} )
        public JSONObject action(@RequestParam String action){
    
            System.out.println("action: " + action);
            JSONObject jsonObject = JSONObject.parseObject(config_json);
    
            System.out.println("jsonObject: " + jsonObject.toJSONString());
    
            return jsonObject;
        }
    }
    

    至此,再次打开浏览器,打开 ueditor.html(http://localhost:8090/ueditor) 文件,提示 后台配置项返回格式出错,上传功能将不能正常使用! 的错误已经没有了。

    在这里插入图片描述
    浏览器输入地址: http://localhost:8090/ueditor/action?action=config 会返回 config.json
    在这里插入图片描述

    六、配置上传路径和回调

    详细教程见 UEditor 官网:后端请求规范

    1、上传

    重新编辑 UEditorController 的 action 方法,请求类型改为 GET

    	@RequestMapping(value = "/ueditor/action", method = RequestMethod.GET )
        public Object action(@RequestParam String action){
    
            System.out.println("action: " + action);
    
            switch (action){
                //执行上传图片或截图的action名称
                case "uploadimage":
                    break;
                //执行上传涂鸦的action名称
                case "uploadscrawl":
                    break;
                //执行上传视频的action名称
                case "uploadvideo":
                    break;
                //controller里,执行上传视频的action名称
                case "uploadfile":
                    break;
                //执行抓取远程图片的action名称
                case "catchimage":
                    break;
                //执行列出图片的action名称
                case "listimage":
                    break;
                //执行列出文件的action名称
                case "listfile":
                    break;
                default:
                    break;
            }
    
            JSONObject jsonObject = JSONObject.parseObject(config_json);
    
            //System.out.println("jsonObject: " + jsonObject.toJSONString());
    
            return jsonObject;
        }
    

    再写一个同样 url 的 POST 方法,用于文件上传

    	/**
         * 执行单个文件上传操作
         * @param upfile 文件数据
         * @return 响应json
         */
        @RequestMapping(value = "/ueditor/action", method = RequestMethod.POST )
        public Object action_upload(@RequestParam MultipartFile upfile){
    
            System.out.println("upfile: " + upfile.getOriginalFilename());
    
            String filename = upfile.getOriginalFilename();
            String uuid = UUID.randomUUID().toString();
            boolean boole = fileOperationService.saveFile(upfile, uuid);
    
            Map<String, String> map = new HashMap<>();
            if (boole) {
                map.put("state", "SUCCESS");
                map.put("url","/ueditor/download?uuid="+uuid);
                map.put("title", filename);
                map.put("original", filename);
            } else {
                map.put("state", "FAIL");
                map.put("url","");
                map.put("title", filename);
                map.put("original", filename);
            }
            return map;
        }
    

    2、文件操作 Service

    /**
         * 保存文件
         *
         * @param file 文件
         * @param uuid uuid
         * @return 保存成功返回true
         */
        @Override
        public boolean saveFile(MultipartFile file, String uuid) {
            try {
                File path = path(file.getContentType());
                String filename = file.getOriginalFilename();
                ImgFile fileEntity = new ImgFile();
                fileEntity.setFileName(filename);
                fileEntity.setUuid(uuid);
                String storeaddress = path.getAbsolutePath();
                fileEntity.setStoreaddress(storeaddress);
                File saveFile = new File(path, uuid);
                try {
                    imgFileMapper.save(fileEntity);
                    file.transferTo(saveFile);
                    return true;
                } catch (IllegalStateException | IOException e) {
                    e.printStackTrace();
                    return false;
                }
            } catch (Exception e) {
                e.printStackTrace();
                System.out.println("文件保存异常");
                return false;
            }
        }
    
        /**
         * 检验文件路径是否存在
         *
         * @param type 文件类型
         * @return
         */
        @Override
        public File path(String type) {
            File path  = new File(FILE_PATH);
            if (!path.isDirectory()) {
                path.mkdir();
            }
            return path;
        }
    
        /**
         * 下载
         *
         * @param uuid
         * @param request
         * @param response
         */
        @Override
        public void download(String uuid, HttpServletRequest request, HttpServletResponse response) {
            ImgFile fileentity = imgFileMapper.findByUuid(uuid);
            String filename = fileentity.getFileName();
            filename = getStr(request, filename);
            File file = new File(fileentity.getStoreaddress(), uuid);
            if (file.exists()) {
                FileInputStream fis;
                try {
                    fis = new FileInputStream(file);
                    response.setContentType("application/x-msdownload");
                    response.addHeader("Content-Disposition", "attachment; filename=" + filename);
                    ServletOutputStream out = response.getOutputStream();
                    byte[] buf = new byte[2048];
                    int n = 0;
                    while ((n = fis.read(buf)) != -1) {
                        out.write(buf, 0, n);
                    }
                    fis.close();
                    out.flush();
                    out.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }
    
        @Override
        public String getStr(HttpServletRequest request, String fileName) {
            String downloadFileName = null;
            String agent = request.getHeader("USER-AGENT");
            try {
                if (agent != null && agent.toLowerCase().indexOf("firefox") > 0) {
                    //downloadFileName = "=?UTF-8?B?" + (new String(Base64Utils.encode(fileName.getBytes("UTF-8")))) + "?=";
                    //设置字符集
                    downloadFileName = "=?UTF-8?B?" + Base64Utils.encodeToString(fileName.getBytes("UTF-8")) + "?=";
                } else {
                    downloadFileName = java.net.URLEncoder.encode(fileName, "UTF-8");
                }
            } catch (UnsupportedEncodingException e) {
                e.printStackTrace();
            }
            return downloadFileName;
        }
    

    七、测试回显

    1、图片回显

    上传图片浏览器控制台无报错,图片回显正常!
    在这里插入图片描述

    2、添加附件

    上传附件浏览器控制台无报错,文件回显正常!
    在这里插入图片描述
    在这里插入图片描述

    3、上传视频

    上传视频浏览器控制台无报错,视频回显正常!
    在这里插入图片描述
    在这里插入图片描述

    4、显示 UEditor 内容

    在这里插入图片描述

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    八、完整代码

    完整代码转 Gitee:wxhntmy / SpringBootLayuiUeditor

    展开全文
  • layui集成ueditor富文本编辑器

    千次阅读 2019-11-06 15:31:10
    首先,在你的layui项目结构中引入ueditor, 然后 var um = UE.getEditor(‘myEditor’);创建编辑窗口, 通过 UE.getEditor(‘myEditor’).getContent()获取编辑器中的内容 myEditor 为 你想要在哪里输入文本框的id ...

    首先,在你的layui项目结构中引入ueditor,
    我的引入结构
    然后 var um = UE.getEditor(‘myEditor’);创建编辑窗口,
    通过 UE.getEditor(‘myEditor’).getContent()获取编辑器中的内容
    myEditor 为 你想要在哪里输入文本框的id

       <div class="layui-input-block">
                                <textarea name="content" id="myEditor" class="layui-textarea" lay-verify="content" 
                                required lay-verify="required" type ="text/plain" style="width: 1300px;height: 600px;text-align: left;">
                            </textarea>
                            </div>
    
    展开全文
  • layui集成富文本编辑器

    千次阅读 2020-04-19 15:41:11
    layui富文本编辑器集成比其他任何富文本编辑器集成都简单,因为layui自带富文本编辑器,只需要2行代码: var layedit = layui.layedit; layedit.build('lay_content', { tool: ['strong', 'italic', 'underline'...

    https://www.layui.com/doc/modules/layedit.html

    layui富文本编辑器集成比其他任何富文本编辑器集成都简单,因为layui自带富文本编辑器,只需要2行代码:

    var layedit = layui.layedit;
            layedit.build('lay_content', {
                tool: ['strong', 'italic', 'underline', 'del', '|', 'left', 'center', 'right', '|', 'link', 'unlink', 'image', 'code']
            });

    我这里加入tool是因为我需要加入在工具栏加入code功能。如果只需要默认功能,可以直接使用build

     layedit.build('lay_content');

    lay_content表示textarea的id。

    上传图片页简单

    layedit.set({
      uploadImage: {
        url: '' //接口url
        ,type: '' //默认post
      }
    });
    //注意:layedit.set 一定要放在 build 前面,否则配置全局接口将无效

    只需要配置上传url就可以了。返回格式为

    {
      "code": 0 //0表示成功,其它失败
      ,"msg": "" //提示信息 //一般上传失败后返回
      ,"data": {
        "src": "图片路径"
        ,"title": "图片名称" //可选
      }
    }

     

    展开全文
  • 最近需要实现一个简单的...百度了一下好像很多人用的ueditor 可是这玩意官网都进不去了 - - 好在需求不高,只要实现简单的文字+图片编辑就可以了,所以用了个简单的layui的富文本组件,看官网说明就能直接上手使用 ...
  • tp5 集成 layui富文本编辑器

    千次阅读 2018-06-19 17:09:53
    下载layui 1 2 3 4 5 6 7 8 9 10 11 12 13 ├─css//css目录 │ └─modules//模块css目录(一般如果模块相对较大,我...
  • JavaWeb专业版,企业级开发框架SpringBoot+Layui+Thymeleaf+MybatisPlus开发权限(RBAC)及内容管理框架,框架中集成了权限管理、模块管理,数据库管理、富文本编辑器(已集成ueditor,kindeditor),后台支持多主题切换、...
  • 在使用layui后台布局时遇到了发布文章时使用百度富文本编辑器的兼容问题,有时文章写到了一半,无法回到首行,百度富文本编辑器菜单栏卡在顶部,只能手动操作。下面说下解决方案。 在页面或者css样式中引入一下css...
  • ruoyi整合ueditor

    2021-01-11 10:29:17
    若依把原有的summernote富文本编辑器换成ueditor 首先去网站下载ueditor-jsp源码最新版,或者可以网盘下载: 链接:https://pan.baidu.com/s/1ZLbYxl-mUxeYbW6UVsAGgg 提取码:lwts 重命名为ueditor 把jsp文件夹...
  • UEditor 编辑器遮挡下拉列表等控件

    千次阅读 2019-03-14 17:04:15
    今天在使用后台的 UEditor编辑器时,发现:因为上面的下拉选择框数据较多,而被编辑器遮挡,影响控件的使用,当然这只是发现的一种情况,不排除会有其他控件受影响(比如:日期选择器)通过查看源码文件 ueditor....
  • 目录 一、前端配置ueditor ...在layui中多图上传和视频上传的窗口被layer遮盖 回显html到编辑器上还是更新前的旧内容 多次实例ueditor编辑器的位置不一致 关闭自动保存 一、前端配置uedit...
  • 场景:在springboot中 使用百度的ueditor富文本编辑器。现在把他们集成。但是限制于springboot的...简单集成(上传功能不能用:比如上传图片,上传视频等等):layui+ueditor这个是使用layui的,您前端不是使用的此...
  • Java集成UEditor的时候真的是各种坑,之前没有用过这个编辑器,也不知道怎么配置, 一路的爬坑终于能上传图片,唉。。 上传的时候总是提示 后端配置项没有正常加载等等的东西,是真的烦,按着网上的教程也没搞定,...
  • Springboot整合UEditor

    2019-04-30 17:38:59
    最近的项目(springboot项目)当中需要用到百度编辑器UEditor,发现springboot无法直接集成UEditor,其中很多功能用不了,例如上传图片。分析了下原因.UEditor的config.js配置文件在springboot项目目录下无法读到对应的...
  • 方法一:修改 ueditor.config.js 里面的 toolbars 2. 方法二:实例化编辑器的时候传入 toolbars 参数 模板中id="myEditor" <label class="layui-form-label">应用简介</label> <div class="layui...
  • 当前市面上有许多可供选择的富文本编辑器,虽然百度的UEditor已在2016年即停止更新且界面风格较老,但是其属性,功能十分强大,所以仍是当前富文本编辑器里最好的选择之一。 现在就开始在ThinkPH...
  • UEditor是由百度web前端研发部开发所见即所得富文本web编辑器。可以定制很多如新闻页面,博客等等。UEditor使用简单,支持二次开发,适合快速开发很多业务功能,研究几天发个学习文档。 UEditor分为前端和后端前端...
  • RXThinkCMF_TP6_PRO旗舰版 基于 ThinkPHP6 +Layui2.5.6 开发权限(RBAC)及内容管理框架,框架中集成了权限管理、模块管理、插件管理、钩子管理、数据库管理、富文本编辑器(已集成ueditor,kindeditor),后台支持多主题...
  • CoolJava 一、项目说明 ...JUnit4、Kafka、Zookeeper、Dubbo、Jackson 、Ehcache 前端 JS框架:jQuery 前端页面框架:Layui 富文本编辑器:UEditor 树结构控件:jQuery zTree 文件管理器:CKFinder 代码下载地址: ...
  • vue+express+MySQL实现ueditor富文本内容的保存(含图片...参考来源:Vue项目中最简单的使用集成UEditor方式 这里再赘述一下 Installation npm i vue-ueditor-wrap # 或者 yarn add vue-ueditor-wrap 一、下载 U...
  • RXThinkCMF_LV5.8_PRO旗舰版 基于 Laravel5.8+Layui2.5.6 开发权限(RBAC)及内容管理框架,框架中集成了权限管理、模块管理、插件管理、钩子管理、数据库管理、富文本编辑器(已集成ueditor,kindeditor),后台支持多...
  • springboot+Layui后台开发框架

    千次阅读 2020-08-13 20:09:32
    JavaWeb专业版,企业级开发框架SpringBoot+Layui+Thymeleaf+MybatisPlus开发权限(RBAC)及内容管理框架,框架中集成了权限管理、模块管理,数据库管理、富文本编辑器(已集成ueditor,kindeditor),后台支持多主题切换、...
  • springboot+Layui后台管理系统

    千次阅读 2020-08-13 20:08:55
    JavaWeb专业版,企业级开发框架SpringBoot+Layui+Thymeleaf+MybatisPlus开发权限(RBAC)及内容管理框架,框架中集成了权限管理、模块管理,数据库管理、富文本编辑器(已集成ueditor,kindeditor),后台支持多主题切换、...
  • 基于LayUI的新闻管理系统

    千次阅读 2020-07-17 13:03:30
    项目采用主要技术采用:layui前端UI框架,PHP语言动态网页技术,Navicat数据库管理客户端,以及PhpStudy的php开发集成环境。 实现了较为完善的简单新闻发布和管理系统,包括 登入模块和后台管理模块, 其中后台...
  • SpringBoot+Layui的后台管理系统

    千次阅读 2020-08-12 17:24:05
    JavaWeb专业版,企业级开发框架SpringBoot+Layui+Thymeleaf+MybatisPlus开发权限(RBAC)及内容管理框架,框架中集成了权限管理、模块管理,数据库管理、富文本编辑器(已集成ueditor,kindeditor),后台支持多主题切换、...
  • SpringBoot+Layui实现的后台管理系统

    千次阅读 2020-07-17 15:04:28
    JavaWeb专业版,企业级开发框架SpringBoot+Layui+Thymeleaf+MybatisPlus开发权限(RBAC)及内容管理框架,框架中集成了权限管理、模块管理,数据库管理、富文本编辑器(已集成ueditor,kindeditor),后台支持多主题切换、...
  • 基于springboot+layui快速开发框架源码

    千次阅读 2020-07-18 10:37:08
    JavaWeb专业版,企业级开发框架SpringBoot+Layui+Thymeleaf+MybatisPlus开发权限(RBAC)及内容管理框架,框架中集成了权限管理、模块管理,数据库管理、富文本编辑器(已集成ueditor,kindeditor),后台支持多主题切换、...
  • JavaWeb专业版,企业级开发框架SpringBoot+Layui+Thymeleaf+MybatisPlus开发权限(RBAC)及内容管理框架,框架中集成了权限管理、模块管理,数据库管理、富文本编辑器(已集成ueditor,kindeditor),后台支持多主题切换、...
  • RXThinkCMF_LV5.8_PRO旗舰版 基于 Laravel5.8+Layui2.5.6 开发权限(RBAC)及内容管理框架,框架中集成了权限管理、模块管理、插件管理、钩子管理、数据库管理、富文本编辑器(已集成ueditor,kindeditor),后台支持多...
  • thinkphp6+layui响应式后台管理框架

    千次阅读 2020-08-25 18:02:57
    RXThinkCMF_TP6_PRO旗舰版 基于 ThinkPHP6 +Layui2.5.6 开发权限(RBAC)及内容管理框架,框架中集成了权限管理、模块管理、插件管理、钩子管理、数据库管理、富文本编辑器(已集成ueditor,kindeditor),后台支持多主题...

空空如也

空空如也

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

layui集成ueditor