layedit 改进版

layedit 改进版

Kz.layedit

已更新项目配置使用说明 Kz.layedit 使用说明

在线预览 码云 Gitee Pages

现存缺陷

由于本人是职业后端,前端水平有限,故存在一些 bug 短期内无法修复

  • word 粘贴的图片只能获取本机 temp 路径,且无法判别是否是图片,无法以 file 形式上传后台,故后续不继续考虑和实现 word 图片粘贴问题 ,参照 ueditor 后发现也没有实现该功能,仅仅是过滤了标签多余样式
  • 修改字体/字体大小 会清除选中文本段落格式,短期内可能无法修复
  • 插入视频 默认以 div 包裹,前后插入一个 来实现选中居中和删除操作。
  • 关于 getRangeAt(0)报错,由于我个人使用时无论弹窗还是直接使用或在 form 表单中均未能复现,请遇到该问题的人附上详细错误和调用环境、操作过程等可能导致该问题或有助于解决该问题的信息
  • 撤销重做仅仅是简单实现,无法满足正常需求,不推荐使用,后续优化概率较小,除非我找到能很好解决这个问题的办法
  • 虽然对移动端做了适配,但是使用体验不咋的,已经放弃治疗.以后估计只会优化界面,避免出现宽,高溢出的情况。不建议移动端做富文本编辑.

其他问题可先查看 issues 有没有类似问题,如果没有可直接提 issues,也方便其他人查看,不再翻评论 smile-55a7d101bd6dd48c0a9152293cce951f

项目介绍

对 layui.layedit 的拓展,基于 layui v2.4.3.

  • 增加了 HTML 源码模式,
  • 图片插入功能添加 alt 属性(layupload),
  • 视频插入功能,
  • 全屏功能,
  • 段落格式,
  • 字体颜色设置功能。
  • 所有拓展功能菜单按钮图标均引用自 layui 自带图标

软件架构

软件架构说明

  1. HTML 源码模式 引用第三方插件 ace,优化源码展示样式。
  2. 引用 ace 编辑器仅保留了 html 源码样式和 tomorrow 主题,如有需要可自行更换

安装教程

  1. index.html 下为示例文件,可供查看演示功能
  2. 将 dist 下文件 layedit.js 替换掉 layui/lay/modules/layedit.js
  3. 正常调用 layedit 即可

2.6.x

将 Content 文件夹下的 layEditor 文件夹复制到项目的 layui 拓展组件路径,然后参考 index.html 进行加载

    layui.config({
      base: 'Content/layui-2.6.x/layui/'
    }).extend({
      layEditor: "../../layeditor/layedit"
    });

使用说明

具体参照示例文件 index.html

更新日志

v21.04.11 感谢曾记大排档提供修复方案

  1. [修复]设置字体大小时会正确的保留选择段落样式。
  2. [新增]行间距设置
  3. [修复]在富文本中选择多行进行切换字体大小时替换为一行
  4. [修复]如果富文本有选择范围处,上传并插入多张图片没效
  5. [优化]多图上传中修改了预览图片样式
  6. [优化]字体大小设置样式调整

v20.04.04

  1. [修复] 删除空元素报错,原因为判定图片的条件设置错误,已修正

v19.04.12

  1. [修复#IVA7B] 插入表格后无法提交问题 感谢ftlh2005的反馈

v19.03.22

  1. [修复] 多图上传设置宽高报错问题

V19.03.20

  1. [修复] 当 p 标签内存在多张图片时 back 键调用 callDel 删除时始终获取的是第一张图片 src 的 bug
  2. [新增] del 键删除图片调用 callDel 回调方法

V19.03.18

  1. [修复] 粘贴图片时错误的粘贴到编辑器顶部而不是鼠标光标处

V19.03.02

  1. [修复] 全屏下查看源代码内容过长时最后几行看不到问题
  2. [优化] 全屏模式下背景色改为白色

V19.01.26

  1. [修复] 监听事件 container.tagName 为 undefined 错误 感谢yianyao的反馈

V19.01.25

  1. [优化] ctrl+b 加粗使用 strong 标签替换原版 b 标签
  2. [修复] 段落格式 和 字体大小 可能出现点击后即自动关闭的问题

V19.01.24

  1. [优化] 支持从 word 粘贴内容保留格式,去除多余标签

V19.01.23

  1. [移除] V19.01.22-beta-[3] 报 无法获取图片路径 的提示,,不过原先会提示的图片依旧无法从服务器删除
  2. [修复] 编辑器内容为空时回车换行添加的标签为 div,昨天更新时不小心覆盖掉了、已修复为追加 p 标签
  3. [修复] 图片上传宽高兼容%后设置无效问题 –感谢不愿意透露姓名的网友反馈 smile-55a7d101bd6dd48c0a9152293cce951f

V19.01.22-beta

  1. [优化] 图片上传宽高兼容%设置
  2. [修复] 编辑器内容为空时回车换行添加的标签为 div
  3. [测试] back 退格键删除图片时调用 callDel 配置参数回调服务器删除附件,需配置参数 backDelImg:true (待删除),目前不支持没有 p 标签或其他元素包裹的 img 图片删除,会报无法获取图片路径的弹出层,这是正常提示、、

V19.01.19 (感谢biancangming的反馈)

  1. [修复] 粘贴图片不调用 uploadImage.done 方法
  2. [新增] 插入代码配置 codeConfig 新增参数 class,可根据需要自定义样式,不填默认为 layui-code

V19.01.18

  1. [修复] IR5LC 火狐浏览器菜单宽度异常问题
  2. [新增] preview 预览样式设置参数 previewAttr,支出对预览弹出层的 area,offset 参数设置,修改默认值为 area:[‘50%’,’100%’],offset:’r’。
  3. [修复] 空编辑器插入视频出现 getRangeAt 错误和同步 textarea 异常问题

V19.01.16-beta

  1. [优化] 插入图片时如果不填写描述属性和宽高时,不再添加 style=”” alt=”” 空属性
  2. [修复] 附件上传没有添加 data 和 headers 参数,由于我个人不使用这两个参数且测试时都时拿上传图片测试、、、所以未能测试出该问题,对因此造成困扰的人感到抱歉=.=

V19.01.10-beta

  1. [修复] 取消回车/插入元素自动加 p 标签包裹,防止特殊情况下的段落异常,ul->li 标签内文字需 p 标签或 span 等包裹,否则回车会新建 ul 标签导致段落错乱

V19.01.05

  1. [新增] 附件上传自动插入编辑器设置 autoInsert, 添加设置参数 uploadFiles{autoInsert:true} 即可选中文件上传完之后自动插入编辑器,无需点确认按钮