1 Star 0 Fork 76

aijialefu / Kz.layedit

forked from KnifeZ Group / Kz.layedit 
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MIT

Kz.layedit

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

在线预览 码云Gitee Pages

现存缺陷

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

  • word粘贴的图片只能获取本机temp路径,且无法判别是否是图片,无法以file形式上传后台,故后续不继续考虑和实现word图片粘贴问题 ,参照ueditor后发现也没有实现该功能,仅仅是过滤了标签多余样式
  • 修改字体/字体大小 会清除选中文本段落格式,短期内可能无法修复
  • 插入视频 默认以div包裹,前后插入一个 来实现选中居中和删除操作。
  • 关于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 感谢曾记大排档提供修复方案

  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:

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} 即可选中文件上传完之后自动插入编辑器,无需点确认按钮

历史日志--V18.*

MIT License Copyright (c) 2018 KnifeZ Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

简介

对layui.layedit的拓展,基于layui v2.4.3.增加了HTML源码模式、插入table、批量上传图片、图片插入、超链接插入功能优化、视频插入功能、全屏功能、段落、字体颜色、背景色设置、锚点设置等功能。 展开 收起
JavaScript
MIT
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
JavaScript
1
https://gitee.com/aijialefu/Kz.layedit.git
git@gitee.com:aijialefu/Kz.layedit.git
aijialefu
Kz.layedit
Kz.layedit
master

搜索帮助

14c37bed 8189591 565d56ea 8189591