Kz.layedit
/
index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
		<title>layedit demo</title>
		<link href="Content/Layui-KnifeZ/css/layui.css" rel="stylesheet" />
		<script src="Content/Layui-KnifeZ/layui.js"></script>
		<script src="Content/ace/ace.js"></script>
		<style>
			.layui-layedit-tool .layui-colorpicker-xs {
				border: 0;
			}

			.layui-layedit-tool .layui-colorpicker-trigger-span i {
				display: none !important;
			}
		</style>
	</head>

	<body>
		<div class="layui-form">
			<div class="layui-form-item">
				<button id="openlayer" class="layui-btn layui-btn-normal">Click Me</button>
				<a class="layui-btn layui-btn-primary" href="https://gitee.com/KnifeZ/Kz.layedit" target="_blank">项目主页</a>
				<a
					class="layui-btn layui-btn-primary"
					href="https://blog.knifez18.com/post/132412429623461713.html"
					target="_blank"
					>使用说明</a
				>
			</div>
			<div class="layui-form-item">
				<textarea id="layeditDemo"></textarea>
			</div>
		</div>

		<script>
			layui.use(['layedit', 'layer', 'jquery'], function () {
				var $ = layui.jquery,
					layer = layui.layer,
					layedit = layui.layedit
				layedit.set({
					//暴露layupload参数设置接口 --详细查看layupload参数说明
					uploadImage: {
						url: 'your url',
						accept: 'image',
						acceptMime: 'image/*',
						exts: 'jpg|png|gif|bmp|jpeg|gif|jfif',
						size: 1024 * 10,
						data: {
							name: '测试参数',
							age: 99,
						},
						done: function (data) {
							console.log(data)
						},
					},
					uploadVideo: {
						url: 'your url',
						accept: 'video',
						acceptMime: 'video/*',
						exts: 'mp4|flv|avi|rm|rmvb',
						size: 1024 * 10 * 2,
						done: function (data) {
							console.log(data)
						},
					},
					uploadFiles: {
						url: 'your url',
						accept: 'file',
						acceptMime: 'file/*',
						size: '20480',
						autoInsert: true, //自动插入编辑器设置
						done: function (data) {
							console.log(data)
						},
					},
					//右键删除图片/视频时的回调参数，post到后台删除服务器文件等操作，
					//传递参数：
					//图片： imgpath --图片路径
					//视频： filepath --视频路径 imgpath --封面路径
					//附件： filepath --附件路径
					calldel: {
						url: 'your url',
						done: function (data) {
							console.log(data)
						},
					},
					rightBtn: {
						type: 'layBtn', //default|layBtn|custom  浏览器默认/layedit右键面板/自定义菜单 default和layBtn无需配置customEvent
						customEvent: function (targetName, event) {
							//根据tagName分类型设置
							switch (targetName) {
								case 'img':
									alert('this is img')
									break
								default:
									alert('hello world')
									break
							}
							//或者直接统一设定
							//alert("all in one");
						},
					},
					//测试参数
					backDelImg: true,
					//开发者模式 --默认为false
					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', //默认样式
					},
					//新增iframe外置样式和js
					quote: {
						style: ['Content/css.css'],
						//js: ['/Content/Layui-KnifeZ/lay/modules/jquery.js']
					},
					//自定义样式-暂只支持video添加
					//, customTheme: {
					//    video: {
					//        title: ['原版', 'custom_1', 'custom_2']
					//        , content: ['', 'theme1', 'theme2']
					//        , preview: ['', '/images/prive.jpg', '/images/prive2.jpg']
					//    }
					//}
					//插入自定义链接
					customlink: {
						title: '插入layui官网',
						href: 'https://www.layui.com',
						onmouseup: '',
					},
					facePath: 'http://knifez.gitee.io/kz.layedit/Content/Layui-KnifeZ/',
					devmode: true,
					videoAttr: ' preload="none" ',
					//预览样式设置，等同layer的offset和area规则，暂时只支持offset ,area两个参数
					//默认为 offset:['r'],area:['50%','100%']
					//, previewAttr: {
					//    offset: 'r'
					//    ,area:['50%','100%']
					//}
					tool: [
						'html',
						'undo',
						'redo',
						'code',
						'strong',
						'italic',
						'underline',
						'del',
						'addhr',
						'|',
						'removeformat',
						'fontFomatt',
						'fontfamily',
						'fontSize',
						'lineHeight',
						'fontBackColor',
						'colorpicker',
						'face',
						'|',
						'left',
						'center',
						'right',
						'|',
						'link',
						'unlink',
						'images',
						'image_alt',
						'video',
						'attachment',
						'anchors',
						'|',
						'table',
						'customlink',
						'fullScreen',
						'preview',
					],
					height: '500px',
				})
				var ieditor = layedit.build('layeditDemo')
				//设置编辑器内容
				layedit.setContent(
					ieditor,
					'<h1>hello layedit</h1><p>对layui.layedit的拓展，基于layui v2.4.3.增加了HTML源码模式、插入table、批量上传图片、图片插入、超链接插入功能优化、视频插入功能、全屏功能、段落、字体颜色、背景色设置、锚点设置等功能。</p><br><br><div>by KnifeZ </div>',
					false
				)
				layedit.setContent(ieditor, '<h2>追加模式</h2>', true)
				layedit.setContent(ieditor, "<p><img src='/imgs/2019-1-9-01.PNG'>test<span>111222</span></p>", true)
				layedit.setContent(ieditor, '<h2>hello world</h2>', true)
				$('#openlayer').click(function () {
					layer.open({
						type: 2,
						area: ['700px', '500px'],
						fix: false, //不固定
						maxmin: true,
						shadeClose: true,
						shade: 0.5,
						title: 'title',
						content: 'add.html',
					})
				})
			})
		</script>
	</body>
</html>