layui让文字和div平行_layui富文本的使用注意事项以及拓展
一、引入layui.js文件
二、初始化编辑器
PS:layedit.set({}) 方法必须要在初始化编辑器之前
var editIndex, layedit, layer;
$(function () {
//layui.use(['element', 'jquery', 'form', 'layedit', 'flow'], function () {
layui.use(['layedit'], function () {
//var element = layui.element;
//var form = layui.form;
layer = layui.layer;
layedit = layui.layedit;
//设置图片上传
layedit.set({
uploadImage: {
url: '', //接口url
type: 'post', //默认post
size: '@ViewBag.ImgSize',//文件大小KB
//accept: '.jpg'
}
});
//初始化编辑器
editIndex = layedit.build('remarkEditor', {
tool: ["strong", "italic", "underline", "del", "|", "left", "center", "right", "|", "face", "link", "unlink", "image", "code"],
height: 600, //设置编辑器高度
});
$(".layui-layedit .layui-unselect.layui-layedit-tool").append('');
$(".layedit-tool-preview").click(function () {
layer.open({
title: '在线预览',
shade: 0.2,
content: layedit.getContent(editIndex),
//offset: 'auto',
area: ['90%', '90%'],//(top.window.innerHeight * 0.80).toString()]
});
});
});//layui 结束
});
var editContent = $.trim(layedit.getContent(editIndex)); //取值
layedit.setContent(editIndex, data.Art_FullContent); //赋值
三、最后的效果图就是这样的
四、Tool工具栏的功能可以自己根据layui中layedit.js自行修改吧,防止缓存在layui.js开头的n方法中加上 version: true 就可以了
1、修改URL链接默认target="_blank"
找到 link: function (i) {}方法,b.call()中去除target参数,这个是点击的时候赋值的
下面的参数把e.target 改成固定的 "_blank"就可以了
link: function (i) {
var a = p(i),
l = e(a).parent();
b.call(o, {
href: l.attr("href"),
//target: l.attr("target")
},
function (e) {
var a = l[0];
"A" === a.tagName ? a.href = e.url : v.call(t, "a", {
target: "_blank",//e.target,
href: e.url,
text: e.url
},
i)
})
},
然后超链接弹框的方法 搜索 title: "超链接" 就可以找到,然后注释掉content内容中的 打开方式的
布局即可
type: 1,
id: "LAY_layedit_link",
area: "350px",
shade: .05,
shadeClose: !0,
moveType: 1,
title: "超链接",
skin: "layui-layer-msg",
content: [
'
- ',
'
',
'URL',
'
'',
"
",
"
",
//'
',
//'打开方式',
//'
//'",
//'',
//"
",
//"
",
'
',
' 确定 ',
' 取消 ',
"
",
"
"
].join(""),
本来想加一个显示内容的input,用于显示连接的文本内容,发现加上之后老是取不到值,不知道哪里的问题,如果有知道的就评论说一下吧
后来直接先写好文本,然后选中在点击连接进行绑定也是一样的效果,就是麻烦了一点,将就用吧。。
2、修改插入代码片段功能,这个需要配合highlight插件使用
code: function (e) {
k.call(o,
function (i) {
//console.log(i.code.replaceAll("", ">"));
v.call(t, "pre", {
//text: i.code,
text: "" + i.code.replaceAll("", ">") + "
",
//"lay-lang": i.lang
},
e)
})
},
3、预览功能拓展
尝试着搞了一下,还可以。。这个就是一个弹框就挺简单,顶部代码有说明
layui让文字和div平行_layui富文本的使用注意事项以及拓展相关推荐
- layui源码详细分析系列之富文本编辑器模块
所谓的富文本编辑器就是内嵌在浏览器上.所见即所得的文本编辑器,它的形式如下: layui框架中内置了layedit模块,该模块就是富文本编辑器模块,在最近两天中我自己使用原生js实现了简易的富文本编辑 ...
- React H5 使用div自定义简单富文本编辑器
最近项目中h5端要实现图文上传,而且还要支持用户用户输入的格式,例如换行啥的,那么使用输入控件保存输入内容,图片上传控件就不合适了,因为很难知道用户的输入样式. 如果使用一些现有的富文本编辑器,貌似又 ...
- 文字+图片的混编(富文本)
在实际项目开发过程中,我们常会遇到一段文字中既要有图片又要有文字,例如我们经常使用的QQ.微信的聊天对话框中,表情和文字共存就是一种典型的图文混排. QQ20150827-1.png 可以直接使用Qu ...
- 富文本编辑器iceEditor中上传word并回显
项目中有需求,用户通过全选word中的图片和文字,然后直接粘贴到富文本编辑器中,可以正常显示,但是实际开发中发现word多图片粘上去的时候图片全部都是file本地路径,无法正常显示,于是考虑另一种思路 ...
- 文本编辑器_markdown编辑器与富文本编辑器优缺点比较
其实对于用户来说,Markdown编辑器和富文本编辑器的作用是一样的,功能上也没有什么区别,在Markdown诞生之前大家都是用富文本编辑器的,也没见什么功能不能实现的,而两者主要区别在于他们的使用方 ...
- vue中使用tinymce富文本
安装 方式一: npm install @tinymce/tinymce-vue -S npm install tinymce -S 方式二: 将下面的配置粘到package.json文件depend ...
- bootstrap前台富文本框的书写。
首先砍一下效果图: 页面红色框处即为富文本框的一些格式化调整. 此处只贴富文本框处的代码: <div class="form-group"><label clas ...
- markdown编辑器与富文本编辑器优缺点比较,哪个更好用
其实对于用户来说,Markdown编辑器和富文本编辑器的作用是一样的,功能上也没有什么区别,在Markdown诞生之前大家都是用富文本编辑器的,也没见什么功能不能实现的,而两者主要区别在于他们的使用 ...
- 使用vue的富文本编辑器操作
使用vue的富文本编辑器操作 vue的富文本编辑器使用以及多图片文件上传与回显 一. vue-quill-edit 1. 安装vue的富文本 cd 当前的vue项目路径 npm install qui ...
最新文章
- 美团O2O排序解决方案——线下篇
- Spring常见的十八中异常Exception
- JAVA调用shell脚本实例
- keepalived配置高可用集群
- 基于Tkinter和百度Aip的人体关键点检测
- Linux服务器出现:No space left on device的解决方法
- 用js(javascript)完成点击一个按钮会使相应的div背景颜色发生改变
- 双向链表的插入和删除
- 盘点世界顶级五大黑客:个个都是神
- oracle用户剩余空间,ORACLE 中删除了表肿么硬盘剩余空间没变?
- 你需要了解的群体重测序都在这里(一)
- Kubernetes1.23.5集群部署
- 树莓派4b署filebrowser+aria2
- mysql怎么建表语句_mysql 建表语句
- Mac上切割音频,切歌,截取铃声,MP3文件处理,视频剪切,视频剪裁,视频转换
- 三相电能质量分析仪操作程序
- 联想E460重装系统
- windows下基于Aria2的下载工具
- k米魔云8服务器系统在哪购买,线上KTV“K米·魔云6”上市发布会在贵州举行
- 【项目管理一点通】(11) 找到项目的节点和里程碑
热门文章
- 101个免费的VMware工具
- Maven学习总结(48)——利用wagon-maven-plugin插件自动化部署Jar包/war包到Linux远程服务器
- Redis学习总结(8)——Redis常见使用场景总结
- Spring Boot学习总结(12)——Spring Boot Admin 2.0应用监控示例
- Java基础学习总结(47)——JAVA输入输出流再回忆
- ActiveMQ学习总结(9)——Linux中安装ActiveMQ
- Mysql学习总结(16)——Mysql之数据库设计规范
- pdf虚拟打印机下载win7_虚拟打印机(smartprinter) v4.2官方版
- SQL优化器原理 - Auto Hash Join
- AngularJS国际化配置