当前位置: 首页 > news >正文

layui使用富文本已经使用第三方插件Kz.layedit来优化layui的富文本

官方提供的编辑器功能太少

没有字体颜色,不能传图片,视频等扩展

官方文档说的很清楚,简易的富文本使用layui提供的的确十分方便,但是缺少的元素很多。像什么标题,元素,等简单的都没有。小编我当初页为此苦恼啊。临时换富文本,成本太高了。幸好发现了大牛在layedit基础上改编的富文本;

1.根据官方文档提供的layedit

   layui.use('layedit', function(){var layedit = layui.layedit;/***layedit的上传图片*/layedit.set({uploadImage: {url:  '/upload/layuiUploadOne' //接口url,type: 'post' //默认post}});layedit.build('demo', {height: 500 //设置编辑器高度});});

大概效果如下富文本编辑器- 在线演示 - Layui

<div style="width:100%;"><textarea id="txtaContentGuDing" style="display: none;"></textarea>
</div>
<div id="hdContentGuDing" style="display: none;"><%=strTemplContentGuDing %></div>//赋值的时候后台取到的值临时放在这里layui.use(['form', 'layedit', 'upload', 'laydate'], function () {var form = layui.form;var layedit = layui.layedit;var laydate = layui.laydate;var $ = layui.$;var upload = layui.upload;layedit.set({uploadImage: {url: '/layeditUPIMG.ashx', //接口urltype: 'post' //默认post}});//layedit配置开始(固定备注)//layedit.set一定要放在 layedit.build 前面,否则配置全局接口将无效。indexsGuDing = layedit.build('txtaContentGuDing', {//'html', 'code', tool: ['colorpicker', 'fontBackColor', 'strong', 'italic', 'underline', 'del', 'addhr', '|', 'fontfomatt', 'colorpicker', 'face', '|', 'left', 'center', 'right', '|', 'link', 'unlink'],height: 300, // 设置编辑器高度});//layedit配置结束(固定备注)//layedit赋值开始(固定备注)var strContentGuDing = $("#hdContentGuDing").html(); //这里用DIV来临时存值,是因为内容有图片,所以不能用hidden控件if (strContentGuDing != "") {layedit.setContent(indexsGuDing, strContentGuDing, false);//flag是true,是追加模式,flag是false,赋值模式}//layedit赋值结束(固定备注)
});

原参考代码

<script type="text/javascript">layui.use(['form', 'layedit', 'upload', 'laydate'], function () {var form = layui.form;var layedit = layui.layedit;var laydate = layui.laydate;var $ = layui.$;var upload = layui.upload;//普通图片上传var uploadInst = upload.render({elem: '#uploadImage', url: '/upload/layuiUploadOne', before: function (obj) {//预读本地文件示例,不支持ie8obj.preview(function (index, file, result) {$('#showImage').attr('src', result); //图片链接(base64)});}, done: function (res) {//如果上传失败if (res.code > 0) {return layer.msg('上传失败');}$("#activeLogo").val(res.data.src);//上传成功return layer.msg('图片上传成功!');}, error: function () {//演示失败状态,并实现重传var demoText = $('#demoText');demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');demoText.find('.demo-reload').on('click', function () {uploadInst.upload();});}});//自定义日期格式var myDate = new Date();laydate.render({elem: '#startTime',type: 'datetime'});laydate.render({elem: '#overTime',type: 'datetime'});//上传图片layedit.set({uploadImage: {url: '/upload/layuiUploadOne', type: 'post' //默认post},devmode: true//是否自动同步到textarea, autoSync: true//内容改变监听事件, onchange: function (content) {console.log(content);}//插入代码设置 --hide:false 等同于不配置codeConfig, codeConfig: {hide: true,  //是否隐藏编码语言选择框default: 'javascript', //hide为true时的默认语言格式encode: true //是否转义, class: 'layui-code' //默认样式}, facePath: 'http://knifez.gitee.io/kz.layedit/Content/Layui-KnifeZ/', devmode: true, videoAttr: ' preload="none" ', tool: ['html', //显示富文本源码'undo', //撤销'redo',//重做'code', //代码'strong',//加粗'italic', //斜体'underline', //下划线'del', //删除线'addhr', //水平线'|','removeformat', //清楚文字样式'fontFomatt',//段落格式'fontfamily',//字体'fontSize', //字体大小'fontBackColor',//字体背景色'colorpicker',//字体颜色'face',//表情'|','left', //左对齐'center', //居中'right', //右对齐'|',
//              'link', //链接
//              'unlink', //清除链接
//              'images', //多图上传'image_alt', //图片alt
//              'video',//视频
//              'attachment',//插入附件
//              'anchors'//添加锚点, '|', 'table',//表格'customlink'//自定义链接, 'fullScreen',//全屏'preview'//预览]});var index = layedit.build('demo', {height: 300 //设置编辑器高度,});//建立编辑器//将编辑器内容同步到textarea中layedit.sync(index);form.verify({content: function (value) {return layedit.sync(index);}});form.on('submit(addActive)', function (data) {console.log(data.field);//当前容器的全部表单字段,名值对形式:{name: value}return false; //阻止表单跳转。如果需要表单跳转,去掉这段即可。});});
</script>

转自:layui使用富文本已经使用第三方插件Kz.layedit来优化layui的富文本_layui-knifez_源码plus的博客-CSDN博客

GIT源代码Kz.layedit: 对layui.layedit的拓展,基于layui v2.4.3.增加了HTML源码模式、插入table、批量上传图片、图片插入、超链接插入功能优化、视频插入功能、全屏功能、段落、字体颜色、背景色设置、锚点设置等功能。 Kz.layedit包资源地址:https://download.csdn.net/download/wybshyy/88314305

0积分 

相关文章:

layui使用富文本已经使用第三方插件Kz.layedit来优化layui的富文本

官方提供的编辑器功能太少 没有字体颜色&#xff0c;不能传图片&#xff0c;视频等扩展 官方文档说的很清楚&#xff0c;简易的富文本使用layui提供的的确十分方便&#xff0c;但是缺少的元素很多。像什么标题&#xff0c;元素&#xff0c;等简单的都没有。小编我当初页为此苦…...

某公司二面面试题总结

你们公司开发遵守怎么样的代码规范&#xff1f; 当编写Java代码时&#xff0c;遵守良好的代码规范对于代码的可读性和可维护性至关重要。以下是一些更详细的Java代码规范建议&#xff1a; 命名规范&#xff1a; 类名应该采用名词或名词短语&#xff0c;使用驼峰命名法&#xf…...

Ubuntu编译运行socket.io

本篇文章记录一下自己在ubuntu上编译运行socket.io的过程&#xff0c;客户端选用的是socket.io的c的库&#xff0c;编译起来倒不难&#xff0c;但是说到运行的话&#xff0c;对我来说确实是花了点功夫。毕竟程序要能运行起来才能更方便地去熟悉代码&#xff0c;因此今天我就记录…...

h5开发网站-页面内容不够高时,如何定位footer始终位于页面的最底部

一、问题描述&#xff1a; 在使用h5开发页面时&#xff0c;会遇到这个情况&#xff1a;当整个页面高度不足以占满显示屏一屏&#xff0c;页脚不是在页面最底部&#xff0c;影响用户视觉。想让页脚始终在页面最底部&#xff0c;我们可能会想到用&#xff1a; 1.min-height来控…...

手机也可以搭建个人博客?安卓Termux+Hexo搭建属于你自己的博客网站【cpolar实现公网访问】

文章目录 前言 1.安装 Hexo2.安装cpolar3.远程访问4.固定公网地址 前言 Hexo 是一个用 Nodejs 编写的快速、简洁且高效的博客框架。Hexo 使用 Markdown 解析文章&#xff0c;在几秒内&#xff0c;即可利用靓丽的主题生成静态网页。 下面介绍在Termux中安装个人hexo博客并结合…...

Support for password authentication was removed on August 13, 2021 解决方案

打开你的github&#xff0c;Setting 点击Developer settings。 点击generate new token 按照需要选择scope 生成token&#xff0c;以后复制下来。 给git设置token样式的remote url git remote set-url origin https://你的tokengithub.com/你的git用户名/仓库名称.git然后就可…...

MPP 与 SMP 的区别,终于有人讲明白了【文末送书】

文章目录 导读01 SMP1. SMP 的典型特征2. SMP的优缺点 02 分布式MPP计算架构1. MPP 架构核心原理2. MPP 典型特征3. MPP优缺点 写作末尾 导读 当今数据计算领域主要的应用程序和模型可大致分为在线事务处理&#xff08;On-line Transaction Processing &#xff0c;OLTP&#…...

华为OD机试真题【寻找最大价值的矿堆】

1、题目描述 【寻找最大价值的矿堆】 给你一个由 ‘0’&#xff08;空地&#xff09;、’1’&#xff08;银矿&#xff09;、’2’&#xff08;金矿&#xff09;组成的的地图&#xff0c; 矿堆只能由上下左右相邻的金矿或银矿连接形成。超出地图范围可以认为是空地。 假设银矿…...

Java Maven 项目读取项目版本号

java读取 pom.xml 文件中设置的版本号 1. 在 src/main/resources/下新建 app.properties 文件&#xff1a; app.version${project.version} 2. 在pom.xml 中增加 <build> <resources> <resource> <directory>src/main/resources</di…...

Lesson4-1:OpenCV图像特征提取与描述---角点特征

学习目标 理解图像的特征知道图像的角点 1 图像的特征 大多数人都玩过拼图游戏。首先拿到完整图像的碎片&#xff0c;然后把这些碎片以正确的方式排列起来从而重建这幅图像。如果把拼图游戏的原理写成计算机程序&#xff0c;那计算机就也会玩拼图游戏了。 在拼图时&#xff…...

C++ 基础(一)题目练习

一、使用输出运算符输出一个长方形&#xff0c; 如下图所示&#xff1a; #include <iostream> using namespace std; int main() {cout << "*******" << endl;cout << "*******" << endl;cout << "*******"…...

Webpack5入门到原理

Webpack5学习 尚硅谷Webpack5新版视频教程 B站直达&#xff1a;https://www.bilibili.com/video/BV14T4y1z7sw 百度网盘&#xff1a;https://pan.baidu.com/s/114lJRGua2uHBdLq_iVLOOQ 提取码&#xff1a;yyds 阿里云盘&#xff1a;https://www.aliyundrive.com/s/UMkmCzdWsGh&…...

地形有通挂支隘险远六种情况

地形有通、挂、支、隘、险、远六种情况 【安志强趣讲《孙子兵法》第34讲】 第十一篇&#xff1a;地形篇 【全文大白话】 地形有各种情况&#xff0c;行军有各种情况&#xff0c;用好地形获得交战的主动权。 【原文】 孙子曰&#xff1a;地形有通者&#xff0c;有挂者&#xff0…...

C++多态案例-设计计算器类

1.前置知识点 多态是面向对象的三大特性之一 多态分为两类 静态多态&#xff1a;函数重载和运算符重载都属于静态多态&#xff0c;复用函数名动态多态&#xff1a;派生类和虚函数实现运行时多态 静态多态和动态多态的区别 静态多态的函数地址早绑定-----编译阶段确定函数地…...

复制tr的一行数据或者复制数据使用,使用jq和php

效果图&#xff1a; 2.Html <!--复制的tr数据&#xff0c;s----------------------------------------------------------------------------------------------->{foreach from$arrs keykk itemvv} <tr><td style"text-align:center;" >1</t…...

软件测试的基础(1)

程序员(开发) :编写程序代码(实现产品需求) 产品:收集并设计需求-需求文档(根据用户需求进行产品设计) UI设计师:设计界面,向外展示的形态 前端:用代码实现页面的显示 DBA:数据库设计(系统数据之间的关联) 运维:版本控制和发布、升级迭代,环境搭建和维护 客服:客户支持,…...

基于Java+SpringBoot+Vue前后端分离库存管理系统设计和实现

博主介绍&#xff1a;✌全网粉丝30W,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专…...

Secrets in Kubernetes (K8s)

摘要 在Kubernetes&#xff08;K8s&#xff09;中&#xff0c;Secrets是一种用于存储敏感数据的资源对象。它可以用于存储密码、API密钥、数据库凭证等敏感信息&#xff0c;以便在应用程序中使用。 设计实现说明如下&#xff1a; 加密存储&#xff1a;Kubernetes使用Base64编…...

模板测试和深度测试在cocoscreator中的应用

模板测试(Stencil Test)&#xff1a; 当片段着色器处理完一个片段之后&#xff0c;模板测试(Stencil Test)会开始执行&#xff0c;和深度测试一样&#xff0c;它也可能会丢弃片段。接下来&#xff0c;被保留的片段会进入深度测试&#xff0c;它可能会丢弃更多的片段。模板测试…...

手机便签功能在哪里?如何在便签里添加文字图片视频?

手机已成为我们生活中不可或缺的工具&#xff0c;而在使用手机的过程中&#xff0c;我们经常需要随手记录一些重要的事情。那么&#xff0c;如何高效便捷地记录这些事情呢&#xff1f;答案就是使用手机便签软件。但是&#xff0c;有很多人不知道手机便签功能在哪里&#xff1f;…...

云原生核心技术 (7/12): K8s 核心概念白话解读(上):Pod 和 Deployment 究竟是什么?

大家好&#xff0c;欢迎来到《云原生核心技术》系列的第七篇&#xff01; 在上一篇&#xff0c;我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在&#xff0c;我们就像一个拥有了一块崭新数字土地的农场主&#xff0c;是时…...

ubuntu搭建nfs服务centos挂载访问

在Ubuntu上设置NFS服务器 在Ubuntu上&#xff0c;你可以使用apt包管理器来安装NFS服务器。打开终端并运行&#xff1a; sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享&#xff0c;例如/shared&#xff1a; sudo mkdir /shared sud…...

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现(服务端执行命令请求的过程 - 初始化服务器)

服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...

SpringCloudGateway 自定义局部过滤器

场景&#xff1a; 将所有请求转化为同一路径请求&#xff08;方便穿网配置&#xff09;在请求头内标识原来路径&#xff0c;然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...

用docker来安装部署freeswitch记录

今天刚才测试一个callcenter的项目&#xff0c;所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...

RabbitMQ入门4.1.0版本(基于java、SpringBoot操作)

RabbitMQ 一、RabbitMQ概述 RabbitMQ RabbitMQ最初由LShift和CohesiveFT于2007年开发&#xff0c;后来由Pivotal Software Inc.&#xff08;现为VMware子公司&#xff09;接管。RabbitMQ 是一个开源的消息代理和队列服务器&#xff0c;用 Erlang 语言编写。广泛应用于各种分布…...

LangFlow技术架构分析

&#x1f527; LangFlow 的可视化技术栈 前端节点编辑器 底层框架&#xff1a;基于 &#xff08;一个现代化的 React 节点绘图库&#xff09; 功能&#xff1a; 拖拽式构建 LangGraph 状态机 实时连线定义节点依赖关系 可视化调试循环和分支逻辑 与 LangGraph 的深…...

tauri项目,如何在rust端读取电脑环境变量

如果想在前端通过调用来获取环境变量的值&#xff0c;可以通过标准的依赖&#xff1a; std::env::var(name).ok() 想在前端通过调用来获取&#xff0c;可以写一个command函数&#xff1a; #[tauri::command] pub fn get_env_var(name: String) -> Result<String, Stri…...

如何配置一个sql server使得其它用户可以通过excel odbc获取数据

要让其他用户通过 Excel 使用 ODBC 连接到 SQL Server 获取数据&#xff0c;你需要完成以下配置步骤&#xff1a; ✅ 一、在 SQL Server 端配置&#xff08;服务器设置&#xff09; 1. 启用 TCP/IP 协议 打开 “SQL Server 配置管理器”。导航到&#xff1a;SQL Server 网络配…...

密码学基础——SM4算法

博客主页&#xff1a;christine-rr-CSDN博客 ​​​​专栏主页&#xff1a;密码学 &#x1f4cc; 【今日更新】&#x1f4cc; 对称密码算法——SM4 目录 一、国密SM系列算法概述 二、SM4算法 2.1算法背景 2.2算法特点 2.3 基本部件 2.3.1 S盒 2.3.2 非线性变换 ​编辑…...