layui中富⽂本编辑器添加代码⾼亮以及⽂章展⽰中代码⾼亮的
展⽰
layui富⽂本编辑器地址：
使⽤版本：最新----v2.6.8
1、富⽂本显⽰代码区并编辑
原本的⽂档中没有关于代码显⽰的功能。
如果想要显⽰这类场景
需要在⼯具条新增字段
code
即这样：
tool: [
'strong' //加粗
, 'italic' //斜体
, 'underline' //下划线
, 'del' //删除线
, 'code' //代码区域
, '|' //分割线
, 'left' //左对齐
, 'center' //居中对齐
, 'right' //右对齐
, 'link' //超链接
, 'unlink' //清除链接
/
/ ,'face' //表情
, 'image' //插⼊图⽚
, 'help' //帮助
]
然后运⾏时即可看到该字段：并使⽤。
2、在⽂章展⽰中对代码区域进⾏展⽰
1、⾸先，点击代码后会⽣成格式⽂字：
这样的源代码默认样式为:
<pre lay-lang="javascript" lay-encode="true" class="layui-code">123123</pre>
在layui的代码⾼亮⽂档中也是如此：
所以在前台展⽰页⾯中需要添加⼀个code的解码⽅式。
我是使⽤最简单的⽅式：
elem: 'pre', //默认值为.layui-code  正⽂⽤pre进⾏保存
title:'代码展⽰'
});
这样是会对富⽂本中 <pre>进⾏解析；然后⽣成代码⾼亮区域。（具体配置⽅式参考layui：）最终的展⽰效果即为：优秀的富文本编辑器
⽬前已满⾜我的要求。以上

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。