layui集成tinymce注意的问题

目录

1. 下载选择

2. 模式选择

3. body 标签

在网上看的解决方式是：

我的解决方式：

4. 初始化、赋值、取值

5. 图片的上传下载

---

layui 继承 tinymce 的时候，tinymce 的功能选项无法正常的显示

1. 下载选择

下载的时候建议下载

https://fly.layui.com/extend/tinymce/#download

在我去tinymce 下载的，将js 文件加载到项目后，无法正常的进行初始化操作。

 

2. 模式选择

在使用的时候建议选择，经典模式

我在进行内联模式使用的时候，使用form 表单的时候，出现加载 tinymc 格式异常的情况，

 看好，不同的模式，所使用的 块元素是不一样的，使用的块元素不当，插件有可能不会正常的加载

 

3. body 标签

在使用 tinymce 的时候，块元素 所在的位置，必须要在直接的位于 body 标签里面，

在使用弹窗的时候，由于页面使用的是 div 块元素，这导致 该区域是间接的位于 主页面的 body 元素里面，

这个时候在使用 tinymce 修饰输入框的时候，会导加载的 选项 被弹窗覆盖，移动弹窗的位置，有可能会看到部分被弹窗覆盖的选项。

在网上看的解决方式是：

注意：这个是 格式 选项被覆盖的时候，调整 TinyMCE菜单层的 z-index 属性的类叫.tox-tinymce-aux,把它的z-index属性从默认的1300调整到19891015

由于我的格式菜单正常显示，有没有效果暂时不是很清楚，（之前没有仔细的看清楚他这个解决具体问题，写博客的时候才发现不是同一个异常内容）

官网关于 zindex 的解释 

https://www.layui.com/doc/modules/layer.html#zIndex

我的解决方式：

将新增的页面，单独的作为一个页面，使用 tab 页的形式，直接在新的 tab 页打开该页面

tab 选项卡的使用 

https://www.layui.com/doc/element/tab.html

操作 tab 选项卡的 ， element 属性 

https://www.layui.com/doc/modules/element.html#base

在新增的时候， content 属性，支持 HTML，这样就可以使用接口的形式，进行tab 选项卡新增的时候

parent.layui.element.tabAdd('demo', {
	title: '新增页面',
	content: '<iframe id="viewer" src="'+url+'" class="layui-admin-iframe" frameborder="0" scrolling="yes"></iframe> ',
	id: 'url'
});

在添加完之后，肯定需要将 新增的页面 销毁，然后跳转到主页面 

主页：lay-id  /user/main

新增：lay-id  /user/addMain

销毁，新增，主页面的作用是，进行主页面数据的刷新，这个时候，会将之前主页面的查询条件清除，

之所以要这么麻烦的操作是因为：主页面，新增页面，是分开的两个页面和 js 文件，

无法使用 tableid.reload(); 函数对主页面的表格数据进行重载操作。

//销毁主页面
parent.layui.element.tabDelete('demo', '/user/main');
//新增主页面
parent.layui.element.tabAdd('demo', {
	title: '主页面',
	content: '<iframe id="viewer" src="'+'/user/main'+'" class="layui-admin-iframe" frameborder="0" scrolling="yes"></iframe> ',
	id: '/user/main'
});
//跳转主页面
parent.layui.element.tabChange('demo', '/user/main');
//销毁新增页面
parent.layui.element.tabDelete('demo', '/user/addMain');

不能先将新增页面销毁，然后再销毁主页，再新增主页

因为当前是处于新增页面的，如果销毁了新增页面，会导致该页面加载的所有属性信息全部丢失，没有办法执行后面的 js 语句

 

4. 初始化、赋值、取值

经典模式下

<textarea class="layui-textarea" name="editDetail" id="editDetail" style="height: 600px"></textarea>

<script>
    var tinymceMy = null;
    layui.config({
        base: FIRST.ctxPath + '/static/js/common/layui_exts/' //前缀路径
    }).layui.extend({
        tinymce: '/tinymce/tinymce' // 最后一个tinymce指带的是tinymce文件夹中的 tinymce.js 文件
    }).use(['tinymce', 'util', 'layer'], function () {
        //tinymce 初始化
        tinymceMy = layui.tinymce;
        var edit = tinymceMy.render({
            selector: "#editDetail",
            images_upload_url: "/sutdent/uploadPicture", //图片的上传接口
            width:'100%'
        });

        //获得 tinymce 富文本的内容,获得数据是 HTML 的字符串
        var content = tinymceMy.get('#editDetail').getContent();

        var contentEdit = "<p>小明是个好学生！！！！！</p>";
        // tinymce 富文本区域 赋值, 赋值的内容也为 html 字符串
        $('#editDetail').html(contentEdit);

    });
</script>

 FIRST.ctxPath 的来源

base: FIRST.ctxPath + '/static/js/common/layui_exts/'

5. 图片的上传下载

查看 tinymce 与 layui 的集成源码可知，

图片的上传接口 请求方式 为post 请求

传递的数据格式为 edit:xxxxxxxxx

所以上传接口需要指定解析接收的参数的 key 值

接口

/**
 * Create by yang_zzu on 2020/10/1 on 16:26
 */
@Controller
@RequestMapping("/sutdent")
public class TinymceStudentController {

    /**
     * 将图片上传到 服务器
     * @param multipartFile
     * @return
     * @throws IOException
     */
    @PostMapping("/uploadPicture")
    @ResponseBody
    public ResultVO uploadPicture(@RequestParam("edit") MultipartFile multipartFile) throws IOException {

        String substring = multipartFile.getOriginalFilename().substring(multipartFile.getOriginalFilename().lastIndexOf("."));
        //新的文件名称
        String newFileName = UUID.randomUUID().toString() + substring;
        Date date = new Date();
        SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyyMM");
        String fileMonth = simpleDateFormat.format(date);
        //图片路径
        String filePaht = "/var/img/" + fileMonth + "/" + newFileName;
        //文件初始化
        File newFile = new File(fileMonth);
        //如果该文件的 父文件夹 不存在则进行创建
        if (!newFile.getParentFile().exists()) {
            newFile.getParentFile().mkdirs();
        }
        multipartFile.transferTo(newFile);

        ResultVO resultVO = new ResultVO();
        resultVO.setCode(200);
        resultVO.setMsg("ok");
        // data 数据为 文件的下载路径
        resultVO.setData("/student/downloadPicture/" + newFileName + "_" + fileMonth);

        return resultVO;
    }

    /**
     * 下载 服务器图片
     * @param id xxx.png_202010
     * @param response
     * @throws Exception
     */
    @GetMapping("/downloadPicture/{pictureId}")
    public void downloadPicture(@PathVariable("pictureId") String id, HttpServletResponse response) throws Exception {
        String[] s = StringUtils.split(id, "_");
        // 路径 / 月份 / 文件名称
        String url = "/var/img/" + s[1] + "/" + s[0];
        InputStream inputStream = null;
        OutputStream outputStream = null;

        try {
            response.setHeader("content-disposition", "attachment;filename="+ URLEncoder.encode(id, "UTF-8"));
            inputStream = new FileInputStream(url);
            int length = 0;
            byte[] buffer = new byte[1024];
            outputStream = response.getOutputStream();
            while ((length = inputStream.read(buffer)) > 0) {
                outputStream.write(buffer, 0, length);
            }
        } catch (IOException e) {
            e.printStackTrace();
        }finally {
            if (inputStream != null) {
                try {
                    inputStream.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }
    }

}