layedit html源码编辑,Kz.layedit: 对layui.layedit的拓展，基于layui v2.4.3. 增加了HTML源码模式，图片插入功能添加alt属性（layupload），...

Kz.layedit

在线预览

更新日志

V18.11.27

[优化] 段落格式选择样式，背景改为白色，鼠标加手;

[新增] 自定义样式【CustomTheme】,暂时只支持video添加时进行主题样式选择，提供三个参数，title(下拉框展示项),content(自定义样式html内容).preview(预览图地址),

title分为两类，theme_xxx,class_xxx,一类时video外部包裹div,p,等其他元素的插入(插入视频元素用’nomarlobj‘代替)，class_xxx为给video标签添加样式，暂时还不太完善，不推荐使用

[优化] 修改多图上传图标

[新增] 插入表格功能【table】,最大支持10X10，支持右键删除行\新增行，暂不支持合并单元格

V18.11.25

感谢来自杨黄林的反馈

[合并优化] 图片上传时图片的宽度，高度单位为px，输入时不需输入单位；

[合并优化] 修改图片属性时可以初始化获取设置的图片的宽和；

[合并新增] 文件、视频上传/删除时增加done回调，参数为服务器返回的数据；新增field 上传时的文件参数字段名

[合并优化] 图片、视频地址为空时，确定给出提示，不能为空；

[合并修复] 批量上传时，上传失败会删除相应图片；

[合并优化] 超链接弹窗高度自适应；

[合并优化] 弹窗使用layer自带按钮

[新增] 上传图片视频时可在后台判断服务器是否存在该文件，如存在则返回{code:2,msg:"重复提示",data:{src:"重复文件路径"}}; 会弹窗提示是否调用重复文件，如不需要该功能返回状态码请勿使用2，正常 0，错误 1， 重复 2 、、、

[新增] 编辑器外置样式和js引用【quote】

V18.11.24

[新增] 文字背景色设置[fontBackColor]

[优化] uploadImage/uploadVideo可只设置url，其余均设置可读取默认值。

[已知问题] IE模式下插入表情图片视频等功能均不可用，仅支持少许设置。

V18.11.23

[新增] 多图上传功能[images],配置参数同uploadImage，删除回调同 calldel

V18.11.16

[修复] 空编辑器上传视频并删除后编辑器无法操作问题

[修复] 插入锚点功能

[移除] 字体/字体大小设置

[优化] 右键菜单/段落格式展示效果

[优化] 插入视频同时插入p标签，并在左右各加一个空格符，以处理video标签无法选中问题。

[新增] 图片上传和视频上传文件限制参数 file/filemine/exts --该参数引用自layupload，详细见layuplaod基础参数

[新增] 右键删除视频图片的回调方法设置 calldel:{url:''},该设置会调用post方法传递图片(imgpath)/视频地址(filepath)

[新增] 开发者模式 devmode,默认为false,false时隐藏添加链接的 打开方式和rel属性

[新增] 图片右键添加删除功能

[新增] 超链接添加页面新增链接 文本字段，打开方式默认为新页面

[新增] 图片视频上传时可在后台检测服务器是否存在相同文件，相同可返回服务器文件地址进行调用，前台有提示，返回码为2

[已知问题] 粘贴或赋默认值时会过滤script和style标签，内容中存在错误时编辑器不可用，如存在该问题请检查内容是否正确

v18.11.12

新增图片右键修改功能，可重新上传图片

修复上传视频什么也不选时也能成功添加bug，现在会提示上传视频(感谢hreohill的反馈)

新增 添加水平线/hr(addhr)功能

插入代码新增自定义参数 codeConfig{hide:true|false,default:"javascript/c#/java..."} 设置hide为true时不显示代码选择框，可依据default设置默认语言格式。不设置codeConfig则为原版

5. [已知bug] 字体大小设置目前不可用

6. [待完善]新增 插入锚点(anchors) 功能，前台展示默认为 $锚点$ ,保存和读取存在问题，暂不推荐使用

v18.10.23

修复取消全屏后样式错误问题(部分情况下依旧会出现高度变矮情况)

v18.10.9

新增图片右键修改宽高功能

优化右键面板样式，最大化最小化功能优化

v18.10.8

添加右键触发事件 --居中，居左，居右，删除

回车、居中居左等自动追加p标签

v18.9.29

添加HTML源码模式

图片插入添加alt属性

新增 视频插入、全屏、字体颜色设置功能

项目介绍

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

增加了HTML源码模式，

图片插入功能添加alt属性(layupload)，

视频插入功能，

全屏功能，

段落格式，

字体颜色设置功能。

所有拓展功能菜单按钮图标均引用自layui自带图标

软件架构

软件架构说明

HTML源码模式 引用第三方插件ace,优化源码展示样式。

引用ace编辑器仅保留了html源码样式和tomorrow主题，如有需要可自行更换

安装教程

index.html下为示例文件，可供查看演示功能

将dist下文件layedit.js替换掉layui/lay/modules/layedit.js

正常调用layedit即可

使用说明

配置信息

layui.use(['layedit','layer','jquery'],function() {

var $=layui.jquery;

var layedit = layui.layedit;

layedit.set({

//暴露layupload参数设置接口 --详细查看layupload参数说明

uploadImage: {

url: '/Attachment/LayUploadFile',

field: 'file',//上传时的文件参数字段名

accept: 'image',

acceptMime: 'image/*',

exts: 'jpg|png|gif|bmp|jpeg',

size: 1024 * 10,

done: function (data) {//文件上传接口返回code为0时的回调

}

}

, uploadVideo: {

url: '/Attachment/LayUploadFile',

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: '/Attachment/DeleteFile',

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','code'

, 'strong', 'italic', 'underline', 'del',

,'addhr' //添加水平线

,'|', 'fontFomatt','colorpicker' //段落格式，字体颜色

, 'face', '|', 'left', 'center', 'right', '|', 'link', 'unlink'

, 'image_alt', 'altEdit', 'video'

,'anchors' //锚点

, '|'

, 'table'//插入表格

,'fullScreen'

]

});

var ieditor = layedit.build('layeditDemo');

layedit.setContent(ieditor,"hello layedit",false);

})