江苏龙网

  1. 主页 > 生活百科 > >

ueditor 百度编辑器的代码块显示功能的设置

百度编辑器

百度编辑器(ueditor)功能丰富，在移动端的适配也做的不错，而且自带了代码块的编辑和高亮显示功能 。
打开代码块的编辑和显示功能，有下面3个步骤：
1/3 编辑器的菜单配置【ueditor 百度编辑器的代码块显示功能的设置】注意菜单项的配置是否包括了插入代码的菜单项；
菜单名称：insertcode，菜单项的默认配置文件是 ueditor.config.js
toolbars = [[    'source','insertcode',    'bold', 'italic', 'underline', 'strikethrough', 'customstyle', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', '|',    'lineheight', '|','fontfamily', 'fontsize', '|',    'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify','indent' ,'removeformat', '|',    'link',    'insertimage',  'insertvideo', 'attachment', '|', 'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells',    'spechars']]; 
2/3 编辑器中插入代码块配置好菜单后，编辑器工具菜单栏里会显示【代码语言】项的菜单

ueditor 百度编辑器的代码块显示功能的设置

文章插图
 
编辑代码块内容
ueditor 百度编辑器的代码块显示功能的设置

文章插图
 
从html模式可以看到，代码是放在<pre></pre>标签中
3/3 内容显示时代码块的渲染前端显示内容时，需要引入SyntaxHighlighter插件，并调用初始化方法后才会进行渲染
<script type="text/JAVAscript" src=https://www.isolves.com/it/cxkf/bk/2020-09-15/"/lib/ueditor1_4_3_2/third-party/SyntaxHighlighter/shCore.js">渲染效果
ueditor 百度编辑器的代码块显示功能的设置

文章插图
 




    推荐阅读


    上一篇：中国访问美国服务器要如何加速？

    下一篇：在浏览器中异步下载文件监听下载进度