【踩坑】Layui富文本编辑器修复不正常显示

最新推荐文章于 2023-01-31 10:59:08 发布
最新推荐文章于 2023-01-31 10:59:08 发布
阅读量2.3k 收藏 1
点赞数
分类专栏： 前端学习 文章标签： javascript html5 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43144516/article/details/106366928
版权

最近学习项目，使用Layui写前端，看着网上轻松构建的富文本编辑器，心中很不是滋味，因为同样的代码，我构建出来是这样的。

  <textarea class="layui-textarea" name="content" id="content" placeholder="请输入内容" ></textarea>


<script type="text/javascript">
layui.use('layedit', function(){
  
var layedit = layui.layedit;

var editIndex = layedit.build('content');
});

</script>

作为富文本编辑器，连输入框都没有！

然后我煞费苦心，与成功案例比对了半天，最后终于发现，在引入layui的时候，增添一点点东西就可以了。

原来，layui的引入是：

    <link rel="stylesheet" href="/resources/css/index.css"  media="all" />
    <link rel="stylesheet" href="/resources/css/public.css"  media="all" />

现在，只需要引入thymeleaf就可以正确显示富文本编辑器！即将上面两行改为：

<html lang="en"xmlns:th="http://www.thymeleaf.com">
<head>
...
<link rel="stylesheet" href="resources/layui/css/layui.css" th:href="@{/resources/layui/css/layui.css}"
          media="all"/>
    <link rel="stylesheet" href="resources/css/public.css" th:href="@{/resources/css/public.css}" media="all"/>
...
</head>

其他什么也不用改变，富文本编辑器的生成结果就变为：

终于修复了，嚯嚯嚯虚浮咯

踩坑的感觉太痛苦了，希望兄弟们能从这得到帮助。

 

阿源仔
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序踩坑
03-29
不支持important color不支持父级覆盖 如果视图滚动，则上层的vew背景色是半透明的，没法遮挡 事件绑定不支持delagate吧 wx.login 不支持断网设置，会很慢，只能超时 获取网络状态，不管有无网络都是会触发success，只是networkType不同。没网的时候ios和adr返回值不同，分别为fail和none view 是 display：block。text是inline。只有text的可以选中 input 如果value是通过data赋值的，同时又绑定了bindinput，有可能会触发循环，导致文字闪烁 按钮点击多次，对多次执行，比如页面跳转 template的
LayUI ---layedit编辑器 在进行from表单中的使用 --无法获取值和从后台获取值进行赋值
zhang_cl_cn的博客
05-24 3198
首先抛出官方文档的地址：富文本编辑器 简单示例： <!--前提是已经将所需要的js以及css文件进行引入过了--> <textarea id="demo" style="display: none;"></textarea> <script> layui.use('layedit', function(){ var layedit = layui...
安卓踩坑记录之自定义Drawable – 解决自定义Drawable不显示的问题
01-03
引言： 只有不断地尝试，不断地摸索，不断地学习，不断地努力，你才能知道原来自己是真的菜，啊哈哈哈哈哈。但是菜归菜，多踩些坑其实是好事，踩一个少一个嘛。博主今天又解决了一个坑，就是之前写过一个自定义Drawable的test，但是运行起来之后却是一片空白，我找了许久，跟官方文档的例子比对了无数次，毕竟第一次见自定义的Drawable，害怕自己写错，最后还是没有找到不一样的地方。相信大家都经历过这种绝望，我明明跟他写的一模一样，为什么运行不出来啊…emmm。 原因： 原来是因为ImageView的布局，我将宽高设为了wrap_content，我的天，这真的是只有实践了才知道啊。解决办法就很简单了噻
bugly热修复集成与踩坑总结
01-03
第一步添加依赖（project–>build:gradle） dependencies { classpath 'com.android.tools.build:gradle:3.1.4' classpath com.tencent.bugly:tinker-support:1.1.5 // NOTE: Do not place your application dependencies here; they belong // in the individual module build.gradle files
PHP+layui的消息推送和踩坑提示音.docx
06-19
thinkphp消息推送适合用不跳会前端的新手phper
layui2.6.8富文本layedit修复图片无法增加超链接，图片不能增加超链接
08-08
layui2.6.8富文本layedit修复图片无法增加超链接，图片不能增加超链接【可以看我的文章】《Layui富文本layedit图片设置超链接后，图片被链接字符串替换了，图片消失不见了，完整解决方案》文章地址：https://blog.csdn.net/cplvfx/article/details/126234718
记录 layui textarea坑
卢小亦的博客
10-19 518
记录 layui textarea坑。
Layui富文本编辑器内容不显示，图片上传等问题
张陈军的博客
06-04 2942
前提 开发环境 后台：PHP （ThinkPHP5.0） 前台：jQuery （Layui.js） 解决问题 富文本编辑器内容不显示 layui图片上传接口编写 layui富文本编辑器图片不显示 代码示例 前台 HTML 一定要记得包裹在form标签，具体提交方式根据业务来，可以是ajax，可以是method，此处选择ajax。 此处一定要记的严格按照layui表单内容写法！防止加载失败！ lay-verify=“content” <!--form元素开始--> &
解决Uediter 表格没有边线的问题（富文本使用）
weixin_44206947的博客
12-07 451
解决Uediter 表格没有边线的问题 在下载的文件根目录下找到ueditor.all.js 做四处修改 1.找到下面代码修改 utils.each(tables, function (table) { removeStyleSize(table, true); domUtils.removeAttributes(table, ['style', 'border'] ); ...
关于最近使用layui框架，其中富文本遇到的问题进行记录。
qq_43198423的博客
07-28 569
{ "code": 0 //0表示成功，其它失败 ,"msg": "" //提示信息 //一般上传失败后返回 ,"data": { "src": "图片路径" ,"title": "图片名称" //可选 } }
使用layui 的layedit定义自己的toolbar方法
12-13
官方文档：http://www.layui.com/demo/layedit.html 官网文档目前是不支持layedit扩展式的。 自己手动实现扩展，定义自己的样式toolbar： 1.样式代码分析 分析页面初始化后加载的样式. layeditIndex=layedit.build('noticeMatterDigest',{tool: ['left', 'center', 'right','|'],height: 120}); 2.根据分析的样式进行js的追加 代码需要写在layui.use(..)页面初始化方法之内。 $(".layui-form .layui-form-item.l
小程序云开发踩坑——云函数调用不了
01-03
一个云函数的创建与使用： 1. project.config.json写上云函数所在目录”cloudfunctionRoot”:...tip：如果调用不成功，首先检查是否有安装依赖，否则，无法开启本地调试，相关操作可以参考：小程序云开发踩坑——开启本
layui 富文本layedit编辑、存储和回显
程序三两行
01-31 2404
layui 富文本layedit编辑、存储和回显
关于layui富文本编辑器的预览功能
冰冰
09-28 3947
查了好多发现都没有layui.layedit关于预览功能的显示,后来才发现是因为太简单,话不多说,直接贴代码 var layeditDemo= layedit.build('layeditDemo'); $(" .layui-layedit .layui-unselect.layui-layedit-tool") .append('<i class="layui-icon lay......
layui富文本编辑器注意点
热门推荐
梦境迷离
11-06 1万+
点击打开一个修改信息的页面，同时显示已有的信息，由于layui 富文本编辑器设置初始化必须在build之前，所有每次点击修改的时候只有第一次点击会build，猜测可能是缓存问题，造成无法获取到数据，原因还是因为数据必须在build之前被设置进去。禁用该页面的浏览器缓存即可。 火狐不需要。ie chrome 都需要禁用。 下面是 thymeleaf 中 js  初始化必须是在构建富
TP5 + layui 富文本编辑器无法显示图片的问题
葬爱家族王富贵
03-18 2102
荆轲刺秦王 layui的富文本编辑器小巧，界面简单大方，缺点也很明显，那就是功能相较于百度的富文本编辑器要少。 本文主要介绍了layui在富文本编辑器中上传完图片后无法正常显示的问题及其解决方案。 其实图片无法显示的问题也很简单，layui在文档里说的也很清楚： 我第一次尝试的时候，文件没有显示出来的根本原因在于，返回的 json数据格式不对，因为他的 code为 0...
关于layui富文本无法获取到值
qq_37580539的博客
08-22 1417
1:首先根据官网文档https://www.layui.com/doc/modules/layedit.html 得知创建富文本很简单复制代码就好了 html: js: 2: //建立编辑器 var layedit; var layeditIndex; layui.use(‘layedit’, function () { layedit = layui.layedit; layeditIndex...
Layui中layedit富文本遇到的坑小结
weng74的博客
06-16 1749
Layui中layedit富文本遇到的坑小结 最近在开发一个微信小程序课程发布的后台页面，使用富文本编辑器因为是使用layui 我就直接考虑layui 提供的富文本编辑器，在开发的过程中就遇到了很多坑，我建议能不使用layedit 就不使用layedit。 1.官方没有提供对应设置文本内容的方法： 可以不用设置 name 因为name设置了layui的form 也无法填充值进行回显 <div class="layui-form-item"> <label class="layui-
layedit无法正常使用，无法弹出layedit以及获取不到数据问题
flysnownet的博客
01-07 2729
问题 页面中弹出layedit时只能第一次弹出，后面弹不出来，而且在父页面获取不到编辑完的值 解决： 1让页面模板加载完成后再去初始化layedit，从而保证layedit每次都能正常弹出 2初始化时记录当前编辑器的id，将其作为表单元素提交时传给父页面 3.父页面根据收到的编辑器id获取内容 代码 父页面代码 // 添加 function add() { ...
layui form innerhtml 获取不到值_【踩坑笔记】layui之单选和复选框不显示
最新发布
05-25
这个问题可能是因为你使用了 innerHTML 来获取表单元素的值，而 innerHTML 只能获取 DOM 元素内部的 HTML 代码，而不包括 DOM 元素的属性和值。 要获取表单元素的值，可以使用 jQuery 或原生 JavaScript 的 value 属性来获取。例如，如果你想获取一个单选框的值，可以使用以下代码： ```javascript var radioValue = $('input[name="radioName"]:checked').val(); ``` 或者： ```javascript var radioValue = document.querySelector('input[name="radioName"]:checked').value; ``` 其中，radioName 是你单选框的 name 属性值。 类似地，如果你想获取一个复选框的值，可以使用以下代码： ```javascript var checkboxValues = []; $('input[name="checkboxName"]:checked').each(function() { checkboxValues.push($(this).val()); }); ``` 或者： ```javascript var checkboxValues = []; var checkboxes = document.querySelectorAll('input[name="checkboxName"]:checked'); for (var i = 0; i < checkboxes.length; i++) { checkboxValues.push(checkboxes[i].value); } ``` 其中，checkboxName 是你复选框的 name 属性值。注意，复选框可以有多个选中的值，所以需要使用一个数组来存储这些值。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值