layui中富文本编辑器添加代码高亮以及文章展示中代码高亮的展示

今天药忘吃喽~ 2022-09-10 15:18 467阅读 0赞

layui富文本编辑器地址：[https://www.layui.com/doc/modules/layedit.html\#tool][https_www.layui.com_doc_modules_layedit.html_tool]

使用版本：最新----v2.6.8

# 1、富文本显示代码区并编辑 #

原本的文档中没有关于代码显示的功能。

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAR2luX0Nob3U_size_20_color_FFFFFF_t_70_g_se_x_16][]

如果想要显示这类场景

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAR2luX0Nob3U_size_19_color_FFFFFF_t_70_g_se_x_16][]

需要在工具条新增字段

code

即这样：

tool: [
                    'strong' //加粗
                    , 'italic' //斜体
                    , 'underline' //下划线
                    , 'del' //删除线
                    , 'code' //代码区域
                    , '|' //分割线
                    , 'left' //左对齐
                    , 'center' //居中对齐
                    , 'right' //右对齐
                    , 'link' //超链接
                    , 'unlink' //清除链接
                    // ,'face' //表情
                    , 'image' //插入图片
                    , 'help' //帮助
                ]

然后运行时即可看到该字段：并使用。

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAR2luX0Nob3U_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

# 2、在文章展示中对代码区域进行展示 #

1、首先，点击代码后会生成格式文字：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAR2luX0Nob3U_size_20_color_FFFFFF_t_70_g_se_x_16 2][]

这样的源代码默认样式为:

在layui的代码高亮文档中也是如此：[https://www.layui.com/doc/modules/code.html][https_www.layui.com_doc_modules_code.html]

所以在前台展示页面中需要添加一个code的解码方式。

我是使用最简单的方式：

layui.code({
                elem: 'pre', //默认值为.layui-code  正文用pre进行保存
                title:'代码展示'
            });

这样是会对富文本中 <pre>进行解析；然后生成代码高亮区域。（具体配置方式参考layui：[https://www.layui.com/doc/modules/code.html][https_www.layui.com_doc_modules_code.html]）

最终的展示效果即为：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAR2luX0Nob3U_size_20_color_FFFFFF_t_70_g_se_x_16 3][]

目前已满足我的要求。

以上

[https_www.layui.com_doc_modules_layedit.html_tool]: https://www.layui.com/doc/modules/layedit.html#tool
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAR2luX0Nob3U_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/92ba700ce13c49b0a31ebf88970fdff0.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAR2luX0Nob3U_size_19_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/d09302cb0e3745b9a80c1d3b3c5b75e6.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAR2luX0Nob3U_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/0e80391eceaa4979817b365f2c9d3435.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAR2luX0Nob3U_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220829/062e71bc9d3a494aa786d88d557c098c.png
[https_www.layui.com_doc_modules_code.html]: https://www.layui.com/doc/modules/code.html
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAR2luX0Nob3U_size_20_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220829/1908d0ee1347425fb85982d06d80b8d6.png