webman使用summernote富文本编辑器

2024-05-25 11:52

本文主要是介绍webman使用summernote富文本编辑器,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

前言

Summernote富文本编辑器功能强大,可以直接从word直接复制内容过来而不破坏原有的文档格式,非常适合做商品详情等内容的编辑工具。本文将展示如何在php高性能框架webman中使用summernote编辑器。

下载

去Bootstrap 中文网、Summernote、jQuery官网下载bootstrap、summernote和jquery所需要的css、js和font文件

css文件复制到plugin/admin/public/admin/css目录

js文件复制到plugin/admin/public/admin/js目录

font文件将summernote解压得到的整个font目录并复制到plugin/admin/public/admin/css目录下

使用

  • 引入css

    <link rel="stylesheet" href="/app/admin/admin/css/summernote.min.css" />
    <link rel="stylesheet" href="/app/admin/admin/css/bootstrap.min.css" />
    
  • 引入js

    <script src="/app/admin/admin/js/jquery-3.7.1.min.js"></script>
    <script src="/app/admin/admin/js/bootstrap.min.js"></script>
    <script src="/app/admin/admin/js/summernote.min.js"></script>
    
  • 设置字段

    例如商品详情字段,需要设置一个有id和一个name属性的div

    <div class="layui-form-item"><label class="layui-form-label required">商品详情</label><div class="layui-input-block"><div id="summernote" name="desciption"></div></div>
    </div>
    
  • 初始化编辑器,复制下面的js到script中需要修改ajax上传的url地址和插入到summernote的div的id属性名,例如我的id是summernote

    //调用富文本编辑
    $(document).ready(function () {$('#summernote').summernote({height: 500,width:800,minHeight: 300,maxwidth: 800,minwidth: 800,maxHeight: 500,focus: false,callbacks: {onImageUpload: function (files, editor) {var $files = $(files);// 通过each方法遍历每一个file$files.each(function () {var file = this;// FormData,新的form表单封装,具体可百度,但其实用法很简单,如下var data = new FormData();// 将文件加入到file中,后端可获得到参数名为“file”data.append("file", file);// ajax上传$.ajax({data: data,type: "POST",url: "/app/admin/upload/image",// div上的actioncache: false,contentType: false,processData: false,// 成功时调用方法,后端返回json数据success: function (response) {console.log(response)if (response.msg != "上传成功") {alert("上传失败:" + response.msg)} else {// 插入到summernote$('#summernote').summernote('insertImage', response.data.url);}},});})}}});
    });
    
  • 给富文本编辑器赋值,修改默认的给表单初始化数据逻辑,例如我这里添加一个商品详情desciption字段的判断,并将字段值赋值给编辑器

    // 给表单初始化数据
    layui.each(res.data[0], function (key, value) {let obj = $('*[name="'+key+'"]');if (typeof obj[0] === "undefined" || !obj[0].nodeName) return;if (obj[0].nodeName.toLowerCase() === "textarea") {obj.val(layui.util.escape(value));} else {obj.attr("value", value);}//富文本-商品详情赋值,div上必须加上name属性,value为你的字段名if (key == 'desciption'){$('#summernote').summernote('code', value);}
    });
    
  • 获取富文本内容并提交,我这里是修改提交事件逻辑,将富文本编辑器内容并赋值给商品详情字段data.field.desciption

    //提交事件
    layui.use(["form", "popup"], function () {layui.form.on("submit(save)", function (data) {data.field[PRIMARY_KEY] = layui.url().search[PRIMARY_KEY];//富文本-商品详情获取数据data.field.desciption = $('#summernote').summernote('code');layui.$.ajax({url: UPDATE_API,type: "POST",dateType: "json",data: data.field,success: function (res) {if (res.code) {return layui.popup.failure(res.msg);}return layui.popup.success("操作成功", function () {parent.refreshTable();parent.layer.close(parent.layer.getFrameIndex(window.name));});}});return false;});
    });
    
  • 其他

    使用bootstrap.css或干扰layui-form-label样式(如图),可以在当前页面标签添加内联样式修复

    <style>label.layui-form-label{width: 100px;}
    </style>
    

这篇关于webman使用summernote富文本编辑器的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1001428

相关文章

C/C++ chrono简单使用场景示例详解

《C/C++chrono简单使用场景示例详解》:本文主要介绍C/C++chrono简单使用场景示例详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友... 目录chrono使用场景举例1 输出格式化字符串chrono使用场景China编程举例1 输出格式化字符串示

Python验证码识别方式(使用pytesseract库)

《Python验证码识别方式(使用pytesseract库)》:本文主要介绍Python验证码识别方式(使用pytesseract库),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全... 目录1、安装Tesseract-OCR2、在python中使用3、本地图片识别4、结合playwrigh

Python使用Code2flow将代码转化为流程图的操作教程

《Python使用Code2flow将代码转化为流程图的操作教程》Code2flow是一款开源工具,能够将代码自动转换为流程图,该工具对于代码审查、调试和理解大型代码库非常有用,在这篇博客中,我们将深... 目录引言1nVflRA、为什么选择 Code2flow?2、安装 Code2flow3、基本功能演示

使用vscode搭建pywebview集成vue项目实践

《使用vscode搭建pywebview集成vue项目实践》:本文主要介绍使用vscode搭建pywebview集成vue项目实践,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录环境准备项目源码下载项目说明调试与生成可执行文件核心代码说明总结本节我们使用pythonpywebv

C++类和对象之默认成员函数的使用解读

《C++类和对象之默认成员函数的使用解读》:本文主要介绍C++类和对象之默认成员函数的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、默认成员函数有哪些二、各默认成员函数详解默认构造函数析构函数拷贝构造函数拷贝赋值运算符三、默认成员函数的注意事项总结一

使用Python和Matplotlib实现可视化字体轮廓(从路径数据到矢量图形)

《使用Python和Matplotlib实现可视化字体轮廓(从路径数据到矢量图形)》字体设计和矢量图形处理是编程中一个有趣且实用的领域,通过Python的matplotlib库,我们可以轻松将字体轮廓... 目录背景知识字体轮廓的表示实现步骤1. 安装依赖库2. 准备数据3. 解析路径指令4. 绘制图形关键

详解如何使用Python从零开始构建文本统计模型

《详解如何使用Python从零开始构建文本统计模型》在自然语言处理领域,词汇表构建是文本预处理的关键环节,本文通过Python代码实践,演示如何从原始文本中提取多尺度特征,并通过动态调整机制构建更精确... 目录一、项目背景与核心思想二、核心代码解析1. 数据加载与预处理2. 多尺度字符统计3. 统计结果可

Linux基础命令@grep、wc、管道符的使用详解

《Linux基础命令@grep、wc、管道符的使用详解》:本文主要介绍Linux基础命令@grep、wc、管道符的使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录grep概念语法作用演示一演示二演示三,带选项 -nwc概念语法作用wc,不带选项-c,统计字节数-

SpringCloud中的@FeignClient注解使用详解

《SpringCloud中的@FeignClient注解使用详解》在SpringCloud中使用Feign进行服务间的调用时,通常会使用@FeignClient注解来标记Feign客户端接口,这篇文章... 在Spring Cloud中使用Feign进行服务间的调用时,通常会使用@FeignClient注解

MySQL的ALTER TABLE命令的使用解读

《MySQL的ALTERTABLE命令的使用解读》:本文主要介绍MySQL的ALTERTABLE命令的使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1、查看所建表的编China编程码格式2、修改表的编码格式3、修改列队数据类型4、添加列5、修改列的位置5.1、把列