美化后的layui富文本编辑器，layedit 美化

## Kz.layedit 已更新项目配置使用说明 [Kz.layedit使用说明](https://blog.knifez18.com/post/132412429623461713.html) - layui2.6.x以上版本使用请参考分支 [feature/2.6.x](https://gitee.com/KnifeZ-group/Kz.layedit/tree/feature%2F2.6.x/) ### 在线预览 [码云Gitee Pages](http://knifez.gitee.io/kz.layedit/index.html) ### 现存缺陷 **由于本人是职业后端，前端水平有限，故存在一些bug短期内无法修复** - word粘贴的图片只能获取本机temp路径，且无法判别是否是图片，无法以file形式上传后台，故后续不继续考虑和实现word图片粘贴问题 ，参照ueditor后发现也没有实现该功能，仅仅是过滤了标签多余样式 - ~~修改字体/字体大小 会清除选中文本段落格式，短期内可能无法修复~~ - 插入视频 默认以div包裹，前后插入一个```&nbsp;```来实现选中居中和删除操作。 - 关于getRangeAt(0)报错，由于我个人使用时无论弹窗还是直接使用或在form表单中均未能复现，请遇到该问题的人附上详细错误和调用环境、操作过程等可能导致该问题或有助于解决该问题的信息 - 撤销重做仅仅是简单实现，无法满足正常需求，不推荐使用，后续优化概率较小，除非我找到能很好解决这个问题的办法 - 虽然对移动端做了适配,但是使用体验不咋的,已经放弃治疗.以后估计只会优化界面,避免出现宽,高溢出的情况。不建议移动端做富文本编辑. #### 其他问题可先查看issues有没有类似问题，如果没有可直接提issues，也方便其他人查看，不再翻评论 :smile: ### 项目介绍 对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即可 ### 使用说明 配置信息(具体查看示例文件 index.html) ``` layui.use(['layedit','layer','jquery'],function() { var $=layui.jquery; var layedit = layui.layedit; layedit.set({ //暴露layupload参数设置接口 --详细查看layupload参数说明 uploadImage: { url: 'your url', field: 'file',//上传时的文件参数字段名 accept: 'image', acceptMime: 'image/*', exts: 'jpg|png|gif|bmp|jpeg', size: 1024 * 10, done: function (data) {//文件上传接口返回code为0时的回调 } } , uploadVideo: { url: 'your url', field: 'file',//上传时的文件参数字段名 accept: 'video', acceptMime: 'video/*', exts: 'mp4|flv|avi|rm|rmvb', size: 1024 * 2 * 10, done: function (data) {//文件上传接口返回code为0时的回调 } } //右键删除图片/视频时的回调参数，post到后台删除服务器文件等操作， //传递参数： //图片： imgpath --图片路径 //视频： filepath --视频路径 imgpath --封面路径 , calldel: { url: 'your url', done: function (data) {//data删除文件接口返回返回的数据 } } //开发者模式 --默认为false , devmode: true //插入代码设置 , codeConfig: { hide: false, //是否显示编码语言选择框 default: 'javascript' //hide为true时的默认语言格式 } //新增iframe外置样式和js , quote:{ style: ['/Content/Layui-KnifeZ/css/layui.css','/others'], js: ['/Content/Layui-KnifeZ/lay/modules/jquery.js'] } , //fontFomatt:["p","span"] //自定义段落格式 ，如不填，默认为 ["p", "h1", "h2", "h3", "h4", "h5", "h6", "div"]~~ , tool: [ 'html','undo','redo','code' , 'strong', 'italic', 'underline', 'del', ,'addhr' //添加水平线 ,'|', 'fontFomatt','colorpicker' //段落格式，字体颜色 , 'face', '|', 'left', 'center', 'right', '|', 'link', 'unlink' , 'image_alt', 'altEdit', 'video' ,'anchors' //锚点 , '|' , 'table'//插入表格 ,'customlink'//插入自定义链接 ,'fullScreen' ] }); var ieditor = layedit.build('layeditDemo'); layedit.setContent(ieditor,"hello layedit",false); }) ``` ### 更新日志 #### v21.04.11 感谢<a href="https://gitee.com/user_ye">曾记大排档</a>提供修复方案 1. [修复]设置字体大小时会正确的保留选择段落样式。 2. [新增]行间距设置 3. [修复]在富文本中选择多行进行切换字体大小时替换为一行 4. [修复]如果富文本有选择范围处，上传并插入多张图片没效 5. [优化]多图上传中修改了预览图片样式 6. [优化]字体大小设置样式调整 #### v20.04.04 1. [修复] [删除空元素报错](https://gitee.com/KnifeZ/dashboard/issues?id=IWXV7)，原因为判定图片的条件设置错误，已修正 #### v19.04.12 1. [修复<a href="https://gitee.com/KnifeZ/Kz.layedit/issues/IVA7B?from=project-issue">#IVA7B</a>] 插入表格后无法提交问题 感谢<a href="https://gitee.com/user_ye">ftlh2005</a>的反馈 #### 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错误 感谢<a href="https://gitee.com/yianyao">yianyao</a>的反馈 #### 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: #### V19.01.22-beta 1. [优化] 图片上传宽高兼容%设置 2. [修复] 编辑器内容为空时回车换行添加的标签为div 3. [测试] back退格键删除图片时调用callDel配置参数回调服务器删除附件,需配置参数 backDelImg:true （待删除），目前不支持没有p标签或其他元素包裹的img图片删除，会报无法获取图片路径的�