一、引入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("", "&gt"));

v.call(t, "pre", {

//text: i.code,

text: "" + i.code.replaceAll("", "&gt") + "",

//"lay-lang": i.lang

},

e)

})

},

3、预览功能拓展

尝试着搞了一下,还可以。。这个就是一个弹框就挺简单,顶部代码有说明

layui让文字和div平行_layui富文本的使用注意事项以及拓展相关推荐

  1. layui源码详细分析系列之富文本编辑器模块

    所谓的富文本编辑器就是内嵌在浏览器上.所见即所得的文本编辑器,它的形式如下: layui框架中内置了layedit模块,该模块就是富文本编辑器模块,在最近两天中我自己使用原生js实现了简易的富文本编辑 ...

  2. React H5 使用div自定义简单富文本编辑器

    最近项目中h5端要实现图文上传,而且还要支持用户用户输入的格式,例如换行啥的,那么使用输入控件保存输入内容,图片上传控件就不合适了,因为很难知道用户的输入样式. 如果使用一些现有的富文本编辑器,貌似又 ...

  3. 文字+图片的混编(富文本)

    在实际项目开发过程中,我们常会遇到一段文字中既要有图片又要有文字,例如我们经常使用的QQ.微信的聊天对话框中,表情和文字共存就是一种典型的图文混排. QQ20150827-1.png 可以直接使用Qu ...

  4. 富文本编辑器iceEditor中上传word并回显

    项目中有需求,用户通过全选word中的图片和文字,然后直接粘贴到富文本编辑器中,可以正常显示,但是实际开发中发现word多图片粘上去的时候图片全部都是file本地路径,无法正常显示,于是考虑另一种思路 ...

  5. 文本编辑器_markdown编辑器与富文本编辑器优缺点比较

    其实对于用户来说,Markdown编辑器和富文本编辑器的作用是一样的,功能上也没有什么区别,在Markdown诞生之前大家都是用富文本编辑器的,也没见什么功能不能实现的,而两者主要区别在于他们的使用方 ...

  6. vue中使用tinymce富文本

    安装 方式一: npm install @tinymce/tinymce-vue -S npm install tinymce -S 方式二: 将下面的配置粘到package.json文件depend ...

  7. bootstrap前台富文本框的书写。

    首先砍一下效果图: 页面红色框处即为富文本框的一些格式化调整. 此处只贴富文本框处的代码: <div class="form-group"><label clas ...

  8. markdown编辑器与富文本编辑器优缺点比较,哪个更好用

     其实对于用户来说,Markdown编辑器和富文本编辑器的作用是一样的,功能上也没有什么区别,在Markdown诞生之前大家都是用富文本编辑器的,也没见什么功能不能实现的,而两者主要区别在于他们的使用 ...

  9. 使用vue的富文本编辑器操作

    使用vue的富文本编辑器操作 vue的富文本编辑器使用以及多图片文件上传与回显 一. vue-quill-edit 1. 安装vue的富文本 cd 当前的vue项目路径 npm install qui ...

最新文章

  1. 美团O2O排序解决方案——线下篇
  2. Spring常见的十八中异常Exception
  3. JAVA调用shell脚本实例
  4. keepalived配置高可用集群
  5. 基于Tkinter和百度Aip的人体关键点检测
  6. Linux服务器出现:No space left on device的解决方法
  7. 用js(javascript)完成点击一个按钮会使相应的div背景颜色发生改变
  8. 双向链表的插入和删除
  9. 盘点世界顶级五大黑客:个个都是神
  10. oracle用户剩余空间,ORACLE 中删除了表肿么硬盘剩余空间没变?
  11. 你需要了解的群体重测序都在这里(一)
  12. Kubernetes1.23.5集群部署
  13. 树莓派4b署filebrowser+aria2
  14. mysql怎么建表语句_mysql 建表语句
  15. Mac上切割音频,切歌,截取铃声,MP3文件处理,视频剪切,视频剪裁,视频转换
  16. 三相电能质量分析仪操作程序
  17. 联想E460重装系统
  18. windows下基于Aria2的下载工具
  19. k米魔云8服务器系统在哪购买,线上KTV“K米·魔云6”上市发布会在贵州举行
  20. 【项目管理一点通】(11) 找到项目的节点和里程碑

热门文章

  1. 101个免费的VMware工具
  2. Maven学习总结(48)——利用wagon-maven-plugin插件自动化部署Jar包/war包到Linux远程服务器
  3. Redis学习总结(8)——Redis常见使用场景总结
  4. Spring Boot学习总结(12)——Spring Boot Admin 2.0应用监控示例
  5. Java基础学习总结(47)——JAVA输入输出流再回忆
  6. ActiveMQ学习总结(9)——Linux中安装ActiveMQ
  7. Mysql学习总结(16)——Mysql之数据库设计规范
  8. pdf虚拟打印机下载win7_虚拟打印机(smartprinter) v4.2官方版
  9. SQL优化器原理 - Auto Hash Join
  10. AngularJS国际化配置