layui.layedit富文本编辑器

点击layui.layedit文档官网教程地址

1.导入layUi框架

[layUi官网下载](https://www.layui.com/)引入layui/dist/css/layui.css和layui/dist/layui.js

2.定义一个多行文本框，使用layui的layedit模块渲染出富文本编辑器

<textarea id="demo" style="display: none;"></textarea>
<script>
layui.use('layedit', function(){var layedit = layui.layedit;layedit.build('demo',{'strong' //加粗,'italic' //斜体,'underline' //下划线,'del' //删除线,'|' //分割线,'left' //左对齐,'center' //居中对齐,'right' //右对齐,'link' //超链接,'unlink' //清除链接,'face' //表情,'image' //插入图片,'help' //帮助,height: 180 //设置编辑器高度}); //建立编辑器
});
</script>

LayEdit提供的方法：

方法名	描述
var index = layedit.build(id, options)	- index：即该方法返回编辑器的索引 - 参数 id：实例元素textarea的id值 - 参数 options：编辑器的可配置项
layedit.set(options)	设置编辑器的全局属性,可配置项build方法的options
layedit.getContent(index)	获得编辑器的内容(含标签),index即执行layedit.build返回的值
layedit.getText(index)	获得编辑器的纯文本内容
layedit.sync(index)	用于同步编辑器内容到textarea（一般用于异步提交）
layedit.getSelection(index)	获取编辑器选中的文本

options设置可配置项对象：

属性	类型	描述
tool	Array	重新定制编辑器工具栏，如： tool: [‘link’, ‘unlink’, ‘face’]
hideTool	Array	不显示编辑器工具栏，一般用于隐藏默认配置的工具bar
height	Number	设定编辑器的初始高度
uploadImage	Object	设定图片上传接口，如：uploadImage: {url: ‘/upload/’, type: ‘post’}

layui.layedit富文本编辑器相关推荐

js显示PHP源代码命令,layedit富文本编辑器中如何添加显示源码功能（代码）
本篇文章给大家带来的内容是关于layedit 富文本编辑器中如何添加显示源码功能(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 由于项目需要用到富文本编辑器,并且要有显示源码 ...
基于 Layui 的富文本编辑器和封面的实现方案
文章目录前言素材文件 1. 富文本编辑器的实现步骤 1.1 添加 layui 表单行 1.2 导入富文本必须的 script 脚本 1.3 初始化富文本编辑器 2. 图片封面裁剪的实现步骤 2.1 ...
LAYUI 整合富文本编辑器
最近用layui搭一个后台, 在发文章的时候有用到富文本编辑器 ,这里记录一下. 本人用的是 kindeditor富文本编辑器,因为layui自带的富文本感觉功能不是很多. kindeditor 下载 ...
php layui富文本编辑器,Kz.layedit-layui.layedit富文本编辑器拓展
摘要: 本插件基于layui.layedit,增加了HTML源码模式,片插入功能添加alt属性(layupload),视频插入功能,全屏功能,段落格式,字体颜色设置,右键菜单操作,插入锚点,水平线功能 ...
layui的富文本编辑器如何上传图片,以及后期处理
为什么80%的码农都做不了架构师?>>> 前端页面以及JS如下: <form class="layui-form" action="&quo ...
富文本转换字符串 php,layedit 富文本编辑器 php下字符与表情转换
在使用富文本编辑器layedit的时候,在添加表情的时候,编辑器会自动将表情拼成img标签展示. 当我们保存的时候就很尴尬了,一个表情占用了几十个字符,造成了大量的浪费. 所以,我们的需要保存成特定的 ...
layui循环遍历数据_Layui之动态循环遍历出的富文本编辑器显示
这篇记得是工作中的例子描述: 平常的富文本显示都是根据静态的html获取id来显示,比如: 富文本内容 layui.use([ "form", "layer" ...
layui富文本编辑器上传图片
layui是贤心大神的开源前端框架,也是对后端菜鸟非常友好的一个框架,平常开发的时候就比较喜欢使用这个,最近刚好写网站就到了layui的富文本编辑器,遇到一些有意思的事情,就和大家聊聊. 首先准备工作 ...
Layui富文本编辑器图片上传接口(.NET C#)
本来想偷懒找个现成的接口,搜了一下发现没有现成的,那我在这写一个并分享给大家吧. demo打包好了在我的csdn下载中心:http://download.csdn.net/download/xiang ...

layui.layedit富文本编辑器

点击layui.layedit文档官网教程地址

1.导入layUi框架

2.定义一个多行文本框，使用layui的layedit模块渲染出富文本编辑器

layui.layedit富文本编辑器相关推荐

最新文章

热门文章