代码拉取完成，页面将自动刷新
同步操作将从 KnifeZ Group/Kz.layedit 强制同步，此操作会覆盖自 Fork 仓库以来所做的任何修改，且无法恢复！！！
确定后同步将在后台操作，完成时将刷新页面，请耐心等待。
<!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>about kz.layedit</title>
<link href="Content/Layui-KnifeZ/css/layui.css" rel="stylesheet" />
<script src="Content/Layui-KnifeZ/layui.js"></script>
</head>
<body>
<div class="layui-content">
<h1 class="site-h1"><i class="layui-icon">��</i>富文本编辑器文档 - layui.layedit</h1>
<div class="site-tips site-text">
<p>国内外有许多优秀、强大的HTML编辑器，但普遍都有一个共性：异常地臃肿（少则几千行，多则上万行代码）、UI陈旧，并且基本都好几年没更新了。而现在，随着Layui的发布，我们有必要重新为富文本做一些新的定义。LayEdit仍旧<em>遵循极简</em>的设计风格，无论是UI上，还是接口使用上，<em>都尽可能地避免一些繁杂的功能和配置</em>。如果你正苦苦寻找一款轻量的Web富文本编辑器，那么LayEdit会是你不错的选择。</p>
</div>
<div class="site-tips site-text">
<p>模块加载名称：<a>layedit</a></p>
</div>
<div style="margin: 15px 0; text-align: center; background-color: #F2F2F2;">
<ins class="adsbygoogle" style="display: none !important; width: 728px; height: 90px;" data-ad-client="ca-pub-6111334333458862" data-ad-slot="9841027833"></ins>
</div>
<div class="site-title">
<fieldset><legend><a name="use">使用</a></legend></fieldset>
</div>
<div class="site-text">
<p>跟那些过往的编辑器一样，你需要放置一个标签（一般为textarea文本域）作为编辑器的目标元素，然后调用 <em>layedit.build('id')</em> 即可，如下所示：</p>
<pre class="layui-code layui-box layui-code-view"><h3 class="layui-code-h3">code<a href="http://www.layui.com/doc/modules/code.html" target="_blank">layui.code</a></h3><ol class="layui-code-ol"><li><textarea id="demo" style="display: none;"></textarea></li><li><script></li><li>layui.use('layedit', function(){</li><li> var layedit = layui.layedit;</li><li> layedit.build('demo'); //建立编辑器</li><li>});</li><li></script></li><li> </li></ol></pre>
<p>然后你会看到一个如下模样（部分工具Bar未配置出来），它跟Layui的所有存在体一样，兼容IE6/7以外的全部浏览器。</p>
<p style="margin: 20px 0;">
<textarea id="Lay_docDemo_layedit" style="display: none;" class="layui-hide"><p><a href="http://www.layui.com/" target="_blank"><u>Layui</u></a>是一款由贤心个人原创的UI框架，这正是我们对高质量的承诺。尽管现在市面上有太多依托在 <em>Vue/React</em> 光环下的前端方案，但我们仍然定位现在这样一个模式，是为了呈现一个<strong>极简</strong>的解决手段，那就是无需依赖过多看似逼格的工具，直接信手即用。而恰是因为原创，有些事情远比人们想象中的那么简单，尤其是在追求尽善尽美的强迫症的引领下，我常常徘徊在轮子的制造、摧毁又重建的漩涡中，所以<a href="http://www.layui.com/" target="_blank">Layui</a>一拖再拖，从计划到现在，似乎已经接近1年。在我全职接近两个月的SOHO后，Layui的第一个版本终于发布！</p>
<p style="text-align: right"><br><br>2016.10.14</p>
</textarea><div class="layui-layedit"><div class="layui-unselect layui-layedit-tool"><i class="layui-icon layedit-tool-b" title="加粗" lay-command="Bold" layedit-event="b" "=" ">��</i><i class=" layui-icon layedit-tool-i" title="斜体" lay-command="italic" layedit-event="i" "=" ">��</i><i class="layui-icon layedit-tool-u" title="下划线" lay-command="underline" layedit-event="u" "=" ">�@</i><i class=" layui-icon layedit-tool-d" title="删除线" lay-command="strikeThrough" layedit-event="d" "=" ">�I</i><span class="layedit-tool-mid"></span><i class="layui-icon layedit-tool-left" title="左对齐" lay-command="justifyLeft" layedit-event="left" "=" ">�C</i><i class=" layui-icon layedit-tool-center" title="居中对齐" lay-command="justifyCenter" layedit-event="center" "=" ">�A</i><i class="layui-icon layedit-tool-right" title="右对齐" lay-command="justifyRight" layedit-event="right" "=" ">�B</i><span class=" layedit-tool-mid"></span><i class="layui-icon layedit-tool-link" title="插入链接" layedit-event="link" "=" ">�F</i><i class="layui-icon layedit-tool-unlink layui-disabled" title="清除链接" lay-command="unlink" layedit-event="unlink" "=" ">�G</i><i class=" layui-icon layedit-tool-face" title="表情" layedit-event="face" "=" ">�J</i><i class="layui-icon layedit-tool-image" title="图片" layedit-event="image">�D<input type="file" name="file"></i></div><div class="layui-layedit-iframe"><iframe id="LAY_layedit_1" name="LAY_layedit_1" textarea="Lay_docDemo_layedit" frameborder="0" style="height: 180px;"></iframe></div></div>
</p>
</div>
<div class="site-title">
<fieldset><legend><a name="base">基础方法</a></legend></fieldset>
</div>
<div class="site-text">
<p>LayEdit提供了相当精简的方法，如下：</p>
<table class="layui-table">
<thead>
<tr>
<th>方法名</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>var index = layedit.build(id, options)</td>
<td>
用于建立编辑器的核心方法
<br> <em>index</em>：即该方法返回的索引
<br>参数 <em>id</em>： 实例元素（一般为textarea）的id值
<br>参数 <em>options</em>：编辑器的可配置项，下文会做进一步介绍
</td>
</tr>
<tr></tr>
<tr>
<td>layedit.set(options)</td>
<td>
设置编辑器的全局属性
<br>即上述build方法的options
</td>
</tr>
<tr>
<td>layedit.getContent(index)</td>
<td>
获得编辑器的内容
<br>参数 <em>index</em>： 即执行layedit.build返回的值
</td>
</tr>
<tr>
<td>layedit.getText(index)</td>
<td>
获得编辑器的纯文本内容
<br>参数 <em>index</em>： 同上
</td>
</tr>
<tr>
<td>layedit.sync(index)</td>
<td>
用于同步编辑器内容到textarea（一般用于异步提交）
<br>参数 <em>index</em>： 同上
</td>
</tr>
<tr>
<td>layedit.getSelection(index)</td>
<td>
获取编辑器选中的文本
<br>参数 <em>index</em>： 同上
</td>
</tr>
</tbody>
</table>
</div>
<div class="site-title">
<fieldset><legend><a name="set">编辑器基本设置</a></legend></fieldset>
</div>
<div class="site-text">
<p>在建立编辑器的方法 <em>layedit.build(id, options)</em> 的第二个参数（options）中，允许我们对编辑器进行一些设置，如：</p>
<pre class="layui-box layui-code-view"><h3 class="layui-code-h3">code<a href="http://www.layui.com/doc/modules/code.html" target="_blank">layui.code</a></h3><ol class="layui-code-ol"><li>layedit.build('id', {</li><li> height: 180 //设置编辑器高度</li><li>});</li><li> </li></ol></pre>
<p>options可提供支持的参数如下表</p>
<table class="layui-table">
<thead>
<tr>
<th>属性</th>
<th>类型</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>tool</td>
<td>Array</td>
<td>重新定制编辑器工具栏，如： tool: ['link', 'unlink', 'face']</td>
</tr>
<tr>
<td>hideTool</td>
<td>Array</td>
<td>不显示编辑器工具栏，一般用于隐藏默认配置的工具bar</td>
</tr>
<tr>
<td>height</td>
<td>Number</td>
<td>设定编辑器的初始高度</td>
</tr>
<tr>
<td>uploadImage</td>
<td>Object</td>
<td>设定图片上传接口，如：uploadImage: {url: '/upload/', type: 'post'}</td>
</tr>
</tbody>
</table>
</div>
<div class="site-title">
<fieldset><legend><a name="tool">自定义工具Bar</a></legend></fieldset>
</div>
<div class="site-text">
<p>通过下述方式可自定义编辑器的工具Bar</p>
<pre class="layui-code layui-box layui-code-view"><h3 class="layui-code-h3">code<a href="http://www.layui.com/doc/modules/code.html" target="_blank">layui.code</a></h3><ol class="layui-code-ol"><li>layedit.build('id', {</li><li> tool: ['left', 'center', 'right', '|', 'face']</li><li>}); </li><li> </li></ol></pre>
<p>目前layedit可选的Bar有（顺序可以自由排列）：</p>
<pre class="layui-code layui-box layui-code-view layui-code-notepad" lay-skin="notepad"><h3 class="layui-code-h3">code<a href="http://www.layui.com/doc/modules/code.html" target="_blank">layui.code</a></h3><ol class="layui-code-ol"><li>tool: [</li><li> 'strong' //加粗</li><li> ,'italic' //斜体</li><li> ,'underline' //下划线</li><li> ,'del' //删除线</li><li> </li><li> ,'|' //分割线</li><li> </li><li> ,'left' //左对齐</li><li> ,'center' //居中对齐</li><li> ,'right' //右对齐</li><li> ,'link' //超链接</li><li> ,'unlink' //清除链接</li><li> ,'face' //表情</li><li> ,'image' //插入图片</li><li> ,'help' //帮助</li><li>]</li><li> </li></ol></pre>
</div>
<div class="site-title">
<fieldset><legend><a name="uploadImage">插入图片接口</a></legend></fieldset>
</div>
<div class="site-text">
<p>LayEdit提供了向编辑器插入图片的支持，前提是配置了 <em>uploadImage</em>，如：</p>
<pre class="layui-code layui-box layui-code-view"><h3 class="layui-code-h3">code<a href="http://www.layui.com/doc/modules/code.html" target="_blank">layui.code</a></h3><ol class="layui-code-ol"><li>layedit.set({</li><li> uploadImage: {</li><li> url: '' //接口url</li><li> ,type: '' //默认post</li><li> }</li><li>});</li><li>//注意：layedit.set 一定要放在 build 前面，否则配置全局接口将无效。</li><li>layedit.build('demo'); //建立编辑器</li><li> </li></ol></pre>
<p>也就是说LayEdit并不提供服务端的图片接受，但你需要在图片上传成功后对LayEdit返回如下格式的JSON信息：</p>
<pre class="layui-code layui-box layui-code-view layui-code-notepad" lay-skin="notepad"><h3 class="layui-code-h3">code<a href="http://www.layui.com/doc/modules/code.html" target="_blank">layui.code</a></h3><ol class="layui-code-ol"><li>{</li><li> "code": 0 //0表示成功，其它失败</li><li> ,"msg": "" //提示信息 //一般上传失败后返回</li><li> ,"data": {</li><li> "src": "图片路径"</li><li> ,"title": "图片名称" //可选</li><li> }</li><li>}</li><li> </li></ol></pre>
</div>
<div class="site-title">
<fieldset><legend><a name="other">下版更新预告</a></legend></fieldset>
</div>
<div class="site-text">
<p>也许你会觉得LayEdit的功能实在有点少吧，尤其是跟百度的UE这些重量级编辑器相比。是的，LayEdit的工具Bar还并不多，这主要是受制于Layui第一个版本的发布时间，一个功能丰富的编辑器需要较长时间的打磨，而Layui 1.0显然等不及。但我们会在后续版本视情况针对LayEdit进行功能升级，其中会包括：<em>HTML源代码编辑、字体颜色、字体大小、字体格式、插入表格、插入列表、插入引用块、插入代码、插入附件、分割线、预览、二次开发工具Bar的接口支持等等</em>。</p>
<p>在保证功能完备的同时，也会格外注重代码的轻量性。</p>
</div>
<div class="layui-elem-quote">
<p>Layui - 用心与你沟通</p>
</div>
</div>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。