layui富文本编辑器-程序员宅基地

技术标签: 工具类  前端  javascript  开发语言  

这篇文章介绍一下富文本编辑器,包括代码和实现

1.首先介入一个富文本的Demo,先看一下代码

<!DOCTYPE HTML>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <title>ueditor demo</title>
	<script
  type="text/javascript"
  src="https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js"
></script>
<script src="esdk-obs-browserjs.3.22.3.min.js"></script>
</head>

<body>
    <!-- 加载编辑器的容器 -->
	
  <div id="div1">
    <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
</div>

<!-- 引入 wangEditor.min.js -->
<script type="text/javascript">
    const E = window.wangEditor
    const editor = new E('#div1')
    // 或者 const editor = new E( document.getElementById('div1') )
	editor.config.menuTooltipPosition = 'down'
	editor.config.showLinkImg = false
	editor.config.debug = true;
		// 关闭粘贴内容中的样式
		editor.config.pasteFilterStyle = false
		// 忽略粘贴内容中的图片
		editor.config.pasteIgnoreImg = true
		// 使用 base64 保存图片
		//editor.customConfig.uploadImgShowBase64 = true

		// 上传图片到服务器
		editor.config.uploadFileName = 'myFile'; //设置文件上传的参数名称
		editor.config.uploadImgServer = 'upload.do'; //设置上传文件的服务器路径
		editor.config.uploadImgMaxSize = 3 * 1024 * 1024; // 将图片大小限制为 3M
	 editor.config.customUploadImg = (resultFiles, insertImgFn)=>{
	 
    // resultFiles 是 input 中选中的文件列表
    // insertImgFn 是获取图片 url 后,插入到编辑器的方法
	var bb=resultFiles[0];
 //alert(JSON.stringify(bb));
  //alert(JSON.stringify(insertImgFn));
    // 上传图片,返回结果,将图片插入到编辑器中
	//  var objname= "deploy/ringpai/upload/dcm/" + 123456789 + ".png";
 // obsClient.putObject({
 //      Bucket : 'ringpai-phis',
  //     Key : 'objname',
  //     SourceFile : document.getElementById('input-file').files[0]
//}, function (err, result) {
      // if(err){
    //          console.error('Error-->' + err);
   //    }else{
	//   alert(JSON.stringify(result));
    //          console.log('Status-->' + result.CommonMsg.Status);
    //   }
//});
    //insertImgFn(imgUrl)
}
editor.config.uploadImgHooks = {
			before: function(xhr, editor, files) {
alert(JSON.stringify(files));
			},
			success: function(xhr, editor, result) {
				console.log("上传成功");
			},
			fail: function(xhr, editor, result) {
				console.log("上传失败,原因是" + result);
			},
			error: function(xhr, editor) {
				console.log("上传出错");
			},
			timeout: function(xhr, editor) {
				console.log("上传超时");
			}
		}

    editor.create()
	var obsClient = new ObsClient({
    access_key_id: 'OHECMDFOILGX92Z3XDQC',       
    secret_access_key: 'OtxQhPAocSx0ZizvXCCMXlWVQ1GVJq2ByPsjBDNd',       
    server : 'obs.cn-north-4.myhuaweicloud.com'
});
 // alert(obsClient);



</script>
</body>

</html>

这里需要引入一个js包,代码中也有体现,样式大概是下面这种

 2.实际的应用(包含接口的编写)

以下的代码只能参考,不能完全粘贴复用,我这里的富文本是一个弹出的界面,只列出富文本的代码,主页面没有列出;可以看代码注释,上传图片视频的接口也会列出,存储文本,回显等接口就不列出了图片和视频的存储是通过华为云进行的,先存到华为云,然后把url存储到数据库中,实现回显

<div class="layui-form"
     lay-filter="LAY-notificationMessage-SysMessagepupop-table">
    <script type="text/html" id="LAY-notificationMessage-SysMessagepupop-tpl">
        <div class="layui-form-item" style="margin-left: 430px;">
            <div class="layui-inline">
                <label class="layui-form-label" style="width: 150px;">标题</label>
                <div class="layui-input-inline">
                    {
   {# if (d.state == "0" || d.state=='') { }}
                    <input type="text" name="title" placeholder="请输入" autocomplete="off"
                           value="{
   {d.title}}" class="layui-input search-class">
                    {
   {# } else if (d.state === "1") { }}
                    <input type="text" name="title" placeholder="请输入" autocomplete="off"
                           value="{
   {d.title}}" readonly class="layui-input search-class">
                    {
   {# } else if (d.state === "2") { }}
                    <input type="text" name="title" placeholder="请输入" autocomplete="off"
                           value="{
   {d.title}}" readonly class="layui-input search-class">
                    {
   {# } }}
                </div>
            </div>
        </div>
        <div style="margin-top:10px">
            <label class="layui-form-label" style="padding-left: 0px;">发布内容:</label>
            <div class="layui-form-item" id="textArea">
            </div>
            <div class="layui-form-item">
                {
   {# if (d.state == "0" || d.state =='' || d.state === "2") { }}
                <div class="layui-input-inline" style="float: right; width: 260px;">
                    <input type="submit" lay-submit lay-filter="LAY-notificationMessage-SysMessagepupop-releaseAndSave"
                           id="LAY-notificationMessage-SysMessagepupop-releaseAndSave" value="保存&发布" class="layui-btn">
                    <input type="button" lay-submit lay-filter="LAY-notificationMessage-SysMessagepupop-release"
                           value="保存"
                           class="layui-btn">
                    <input type="button" lay-submit lay-filter="LAY-notificationMessage-SysMessagepupop-cancelbtn"
                           value="取消"
                           class="layui-btn layui-btn-primary">
                </div>
                {
   {# } else if (d.state === "1") { }}
                <div class="layui-input-inline" style="float: right;width: 60px;">
                    <input type="button" lay-submit lay-filter="LAY-notificationMessage-SysMessagepupop-cancelbtn"
                           value="关闭"
                           class="layui-btn layui-btn-primary">
                </div>
                {
   {# } }}
            </div>
        </div>
    </script>
    <div id="LAY-notificationMessage-SysMessagepupop-popupRevisitCancelView"></div>
</div>
<script type="text/template" template>
    {
   {#  layui.data.done(d); }}
</script>
<script
        type="text/javascript"
        src="https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js"
></script>
<script>

    layui.data.done = function (d) {

        layui.use(['admin', 'view', 'table', 'form', 'layer', 'laydate'], function () {
            var admin = layui.admin,
                layer = layui.layer,
                view = layui.view,
                laytpl = layui.laytpl,
                $ = layui.$,
                form = layui.form;

            var organizeId = sessionStorage.getItem('organizeId');
            var localData = layui.data(layui.setter.tableName);
            const callback = d.params.callback || function () {
            };
            var detailsflage = d.params.detailsflage
            console.log(d, 'd得内容')
            var index = d.params.index;


            var data = {
                "state": d.params.data.state ? d.params.data.state : '',
                "title": d.params.data.title ? d.params.data.title : '',
                "content": d.params.data.content ? d.params.data.content : '',
            }
            var view = document.getElementById("LAY-notificationMessage-SysMessagepupop-popupRevisitCancelView");
            var tmpl = document.getElementById('LAY-notificationMessage-SysMessagepupop-tpl').innerHTML;
            laytpl(tmpl).render(data, function (html) {
                view.innerHTML = html;
            });


            // ————————————富文本编辑器开始————————
            setTimeout(function () {
                const E = window.wangEditor;
                const editor = new E('#textArea');
                //重新加载当前页面
                // location.reload();
                // editor.config.text = d.params.data.content;
                var value = '';
                var id = d.params.data.id;
                // editor.setContent(value);

                // 或者 const editor = new E( document.getElementById('textArea') )
                // editor.config.insertText(value)
                editor.config.menuTooltipPosition = 'down'
                editor.config.showLinkImg = false
                editor.config.debug = true;
                // 关闭粘贴内容中的样式
                editor.config.pasteFilterStyle = false
                // 忽略粘贴内容中的图片
                editor.config.pasteIgnoreImg = true
                // 使用 base64 保存图片
                // editor.config.uploadImgShowBase64 = true

                // 上传图片到服务器
                editor.config.uploadFileName = 'file'; //设置文件上传的参数名称
                // editor.config.uploadImgServer = ; //设置上传文件的服务器路径
                // editor.config.uploadImgMaxSize = 3 * 1024 * 1024; // 将图片大小限制为 3M

                //上传图片
                editor.config.customUploadImg = function (files, insert) {
                    // files 是 input 中选中的文件列表
                    // insert 是获取图片 url 后,插入到编辑器的方法

                    for (let i = 0; i < files.length; i++) {
                        var form = new FormData();
                        form.append("file", files[0]);
                        $.ajax({
                            url: ,
                            type: "post",
                            processData: false,
                            contentType: false,
                            data: form,
                            dataType: 'json',
                            success(res) {
                                // 上传代码返回结果之后,将图片插入到编辑器中
                                console.log("上传成功");
                                console.log(res);
                                insert(res.data);
                            }
                        })
                    }
                };

                //上传视频
                editor.config.customUploadVideo = function (files, obj) {
                    var form = new FormData();
                    form.append("file", files[0]);
                    $.ajax({
                        url: 
                        type: "POST",
                        data: form,
                        dataType: 'json',
                        async: false,
                        cache: false,
                        contentType: false,
                        processData: false,
                        success: function (result) {
                            console.log("上传成功");
                            console.log(result);
                            obj(result.data);
                        }
                    });
                };
                console.log('shang')
                editor.config.onchange = function (html) {
                    // 监控变化,同步更新到 textarea
                    console.log($('#content'), 'sdlfjsldkjfslkdflk')
                    $('#content').val(html)
                };
                $.ajax({
                    url: 
                    type: "POST",
                    data: form,
                    dataType: 'json',
                    async: false,
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function (result) {
                        value = result.data;
                    }
                });
                //创建富文本编辑器
                editor.create()
                editor.txt.html(value);
                //初始化时将变量值插入到编辑器文字域中
                if (d.params.data.state === "1") {
                    if (d.params.data.content === '') {
                        // 禁用
                        editor.disable();
                    } else if (d.params.data.content != '') {
                        // 禁用
                        editor.disable();
                    }
                }

                //点击了保存并发布
                form.on('submit(LAY-notificationMessage-SysMessagepupop-releaseAndSave)', function (data) {
                    //抓取富文本编辑器内容赋值到对应变量中
                    var content = editor.txt.html();
                    var field = data.field;
                    var state = 1;
                    var flage = 2;
                    field.content = content;
                    field.state = state;
                    field.id = d.params.data.id;
                    console.log(field)
                    checkMath(field, flage);
                })
                //点击了保存
                form.on('submit(LAY-notificationMessage-SysMessagepupop-release)', function (data) {
                    var content = editor.txt.html();
                    var field = data.field;
                    console.log(d.params.data.state)
                    // debugger
                    field.content = content;
                    field.state = "0";

                    var flage = 1;

                    field.id = d.params.data.id;
                    console.log(field)
                    checkMath(field, flage)
                })

            }, 500)
            // ————————————富文本编辑器结束————————
            // 启用
            // editor.enable();

            //点击了取消
            form.on('submit(LAY-notificationMessage-SysMessagepupop-cancelbtn)', function (data) {
                layer.close(index);
            })

            function checkMath(field, flage) {
                if (field.title === '' || field.title == undefined) {
                    return layer.msg('消息通知标题不能为空,请添加消息标题');
                }
                if (field.content === '' || field.content == undefined) {
                    return layer.msg('消息内容不能为空,请输入消息内容');
                }
                var loading = layer.msg('处理中', {
                    icon: 16,
                    shade: 0.01,
                    time: 0
                });
                $.ajax({
                    url: ,
                    data: JSON.stringify({
                        data: {
                            id: d.params.data.id,
                            version: d.params.data.version,
                            state: field.state,
                            content: field.content,
                            title: field.title
                        },
                    }),
                    type: 'post',
                    contentType: 'application/json; charset=utf-8',
                    success: function (res) {
                        if (res.code == 0) {
                            layer.msg("操作成功");
                            layer.close(loading);
                            layer.close(index);
                            callback();
                        }
                    },
                    error: function (resp) {
                        layer.close(loading);
                        layer.msg('系统错误,请联系管理员。', {
                            icon: 5
                        });
                    }
                });
            }
        })
    }
</script>
<style>
    .LAY-custservice-visit-clickMe {
        color: #077aff;
        padding: 0 5px;
        text-decoration: revert;
        cursor: pointer;
    }

    .w-e-text-container {
        height: 420px !important; /*!important是重点,因为原div是行内样式设置的高度300px*/
    }
</style>

以下是存储到华为云的基本代码,只列出基本的代码,仅供参考

 @Override
    public String yunUploadFile(MultipartFile file) throws Exception {
        String ak = "";
        String sk = "";
        String endPoint = "";
        String bucketName = "";
        //设置链接失效时间
//        long expireSeconds = 3600 * 24 * 365L;
        // 得到文件原名
        String fileName = "sysnotifacation/" + file.getOriginalFilename();
        InputStream inputStream = file.getInputStream();
        //创建云服务器
        ObsClient obsClient = new ObsClient(ak, sk, endPoint);
        PutObjectResult putObjectResult = obsClient.putObject(bucketName, fileName, inputStream);
        int statusCode = putObjectResult.getStatusCode();
        String obsurl = putObjectResult.getObjectUrl();
        logger.info("-------OBS上传状态为:" + statusCode);
        logger.info("-------文件的全路径为:" + obsurl);
        inputStream.close();

//        // 创建ObsClient实例
//        TemporarySignatureRequest request = new TemporarySignatureRequest(HttpMethodEnum.GET, expireSeconds);
//        request.setBucketName(bucketName);
//        request.setObjectKey(file.getOriginalFilename());
//
//        // 设置图片处理参数,对图片依次进行缩放、旋转
//        Map<String, Object> queryParams = new HashMap<String, Object>();
//        queryParams.put("x-image-process", "image/resize,m_fixed,w_100,h_100/rotate,90");
//        request.setQueryParams(queryParams);
//
//        // 生成临时授权URL
//        TemporarySignatureResponse response = obsClient.createTemporarySignature(request);
//        System.out.println(response.getSignedUrl());

        obsClient.close();

//        return response.getSignedUrl();
        return obsurl;
    }

定义的参数根据自己华为云的参数来写就行,其他的数据接口不展示

以上的代码仅供参考,不能复用,有问题可以私信一起研究哈

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_62460384/article/details/125392675

智能推荐

【USACO 2.1.4】荷斯坦奶牛-程序员宅基地

文章浏览阅读381次。【题目描述】纪念“逝去”的Wecing农民JOHN以拥有世界上最健康的奶牛为傲。他知道每种饲料中所包含的牛所需的最低的维他命量是多少。请你帮助农夫喂养他的牛,以保持它们的健康,使喂给牛的饲料的种数最少。给出牛所需的最低的维他命量,输出喂给牛需要哪些种类的饲料,且所需的饲料剂量最少。维他命量以整数表示,每种饲料最多只能对牛使用一次,数据保证存在解。【格式】INPUT...

Android6,android学习网站-程序员宅基地

文章浏览阅读150次。2.1 怎么适配● 在6.0所有权限都需要申请?曰:当然不是。只有属于危险权限的才需要申请。危险权限看下表1-2● 那危险权限也很多啊,也要一个个申请?曰:当然不是。你看看下面的表,都分好组了(9组),对于同一组内的权限,只要有一个被同意,其他的都会被同意。● 谁最帅曰:当然是子信。2.2 列举权限的分组表1-2危险权限分组分组名字分割线PHONEandroid.permission.READ_PHONE_STATEandroid.permission.C_android学习网站

SpringBoot与RocketMQ客户端集成原理解读与示例-程序员宅基地

文章浏览阅读280次。本文将对rocktmq-spring-boot的设计实现做一个简单的介绍,读者可以通过本文了解将RocketMQ Client端集成为spring-boot-starter框架的开发细节,然后通过一个简单的示例来一步一步的讲解如何使用这个spring-boot-starter工具包来配置,发送和消费RocketMQ消息。该项目git地址:https://..._springboot rocketmq的原理

XAMPP中Apache安装SSL证书(Windows Server)_xampp ssl-程序员宅基地

文章浏览阅读3.1k次。什么是SSL证书?SSL证书是一种数字签证,遵从SSL协议,对服务器身份和传输的数据进行加密,使访问更加安全可靠。大家现在访问的所有网站都会使用Https协议,其实就是在Http外边加了一个SSL的外壳,使数据更加安全,同时浏览器可以根据SSL证书来显示网站是否安全等等,谷歌,火狐等浏览器都会在网址的前边提醒用户是否是安全连接。安装完SSL证书就可以用Https进行访问网站了。一般生成证书会选..._xampp ssl

padding的使用-程序员宅基地

文章浏览阅读198次。2019独角兽企业重金招聘Python工程师标准>>> ..._padding只能加给block吗?

android SDK安装代理设置-程序员宅基地

文章浏览阅读496次。 听说google earth 没经China gev的允许而拍摄到了其军事基地(据说就是2012中的诺亚方舟的建造基地),所以将google赶出了China。进而屏蔽google的一些重要IP地址。android SDK 的下载地址便成了本次政治博弈的牺牲品。大陆的developer无法通过正常的方式安装SDK,必须要进行代理地址设置才可以。具体状况如下:运行SDK Setup.exe后会..._sdk安装要代理吗

随便推点

每天进步一点点——swift对象副本修复之简单理解_swift-get-nodes-程序员宅基地

文章浏览阅读1.3w次,点赞2次,收藏2次。一直以来都在使用openstack的swift来做分布式存储,至于为什么使用其来做存储在这里就不说明(网上搜搜其的优点就知道了),随着项目的步步深入,越来越多的问题也随之而来。在项目进行的过程中对swift的理解也越来越多,swift的核心代码行并不是太多,而且也十分容易理解。下面通过实验来理解swift Object的副本修复功能(swift版本为1.9.1)。一. swift的_swift-get-nodes

Mac Jmeter导入外部.jmx文件时报错“com.thoughtworks.xstream.converters.ConversionException”-程序员宅基地

文章浏览阅读8.2k次,点赞3次,收藏4次。热门精选文章,更多技术干货,微信搜索公众号【爱笑的架构师】,回复数字“666”,获取大量免费技术资料,都是经典中的经典:Mac安装Jmeter倒很简单,一行命令足以“brew install jmeter”但是安装完成后open外部.jmx问件时报错,好在网上遇到这种问题的原因差不多,解决办法也差不多,只是有些不全,所以还是有点懵,把自己的笔记记下来,呈现一份完整版有说找到jmeter.log看看错误原因,但是其实错误原因在你导入时已经看到了,所以看不看没影响,黑色的报错窗口没截,就放一个日_com.thoughtworks.xstream.converters.conversionexception

MISRA C指导指南解读系列7(MISRA C规则68-86) _一个函数在最后应该有一个单一的退出点-程序员宅基地

文章浏览阅读1.5k次。 2.1. 函数68.函数的声明应该是在文件的范围内(R) 例如 void myfunc(void) { extern int call(void); /* 违反规则68 */} 69.函数不能使用可变参数格式的样式(_一个函数在最后应该有一个单一的退出点

云计算学习入门:互操作性与可移植性讲解-程序员宅基地

文章浏览阅读509次。不同于传统的位于单位组织内部的 IT 基础设施,云计算的诞生给单位组织的 IT 资源供给带来了前所未有的灵活性——可以瞬时增加、转移或者减少计算资源来快速响应动态的资源需求变化,能在几个小时而不是几周内部署一个新的应用来满足业务需求。为了达到这种更具弹性的计算能力,在设计任何云系统时必须要考虑互操作性与可移植性。互操作性规定,IT 系统中应用软件层以下各层采用开放的通用型组件,杜绝使用云服务提供商各自内部的封闭组件。可移植性规定,IT 系统中应用软件层和数据信息层应采用开放的通用数据格式..

译:6.RabbitMQ Java Client 之 Remote procedure call (RPC,远程过程调用)-程序员宅基地

文章浏览阅读50次。在译:2. RabbitMQ 之Work Queues (工作队列) 我们学习了如何使用工作队列在多个工作人员之间分配耗时的任务。但是如果我们需要在远程计算机上运行一个函数并等待结果呢?嗯,这是一个不同的故事。此模式通常称为远程过程调用或RPC。在本教程中,我们将使用RabbitMQ构建RPC系统:客户端和可伸缩的RPC服务器。由于我们没有任何值得分发的耗时任务,我们将创建..._fibonaccirpc.call("30");

【libuv高效编程】libuv学习超详细教程6 ——libuv check 检查句柄解读_libuv example-程序员宅基地

文章浏览阅读1.6k次。check handle可以被译为检查句柄,如果程序中启动了check handle后,在事件循环中,每当I/O循环退出阻塞的时候都会被执行一遍,它与prepare刚好是相互呼应的,prepare是在I/O循环进入阻塞前,check是在I/O循环退出阻塞后被调用。_libuv example

推荐文章

热门文章

相关标签