温馨提示×

php ueditor代码高亮显示怎么设置

PHP
小樊
111
2024-08-20 01:23:35
栏目: 编程语言

要在PHP中使用UEditor实现代码高亮显示,可以按照以下步骤操作:

  1. 在UEditor的配置文件config.json中添加代码高亮插件。找到"toolbars",在其中添加"code"插件,如下所示:
"toolbars": [
    [
        "source",
        "|",
        "undo",
        "redo",
        "|",
        "bold",
        "italic",
        "underline",
        "fontborder",
        "strikethrough",
        "superscript",
        "subscript",
        "removeformat",
        "formatmatch",
        "autotypeset",
        "blockquote",
        "pasteplain",
        "|",
        "forecolor",
        "backcolor",
        "insertorderedlist",
        "insertunorderedlist",
        "selectall",
        "cleardoc",
        "|",
        "rowspacingtop",
        "rowspacingbottom",
        "lineheight",
        "|",
        "customstyle",
        "paragraph",
        "fontfamily",
        "fontsize",
        "|",
        "directionalityltr",
        "directionalityrtl",
        "indent",
        "|",
        "justifyleft",
        "justifycenter",
        "justifyright",
        "justifyjustify",
        "|",
        "touppercase",
        "tolowercase",
        "|",
        "link",
        "unlink",
        "anchor",
        "|",
        "imagenone",
        "imageleft",
        "imageright",
        "imagecenter",
        "|",
        "simpleupload",
        "insertimage",
        "emotion",
        "scrawl",
        "insertvideo",
        "music",
        "attachment",
        "map",
        "gmap",
        "insertframe",
        "highlightcode",
        "webapp",
        "pagebreak",
        "template",
        "background",
        "|",
        "horizontal",
        "date",
        "time",
        "spechars",
        "snapscreen",
        "wordimage",
        "|",
        "inserttable",
        "deletetable",
        "insertparagraphbeforetable",
        "insertrow",
        "deleterow",
        "insertcol",
        "deletecol",
        "mergecells",
        "mergeright",
        "mergedown",
        "splittocells",
        "splittorows",
        "splittocols",
        "charts",
        "|",
        "print",
        "preview",
        "searchreplace",
        "drafts",
        "help"
    ]
]
  1. 在UEditor的config.json中找到"code"配置,设置代码高亮显示的语言类型。例如:
"code": {
    "highlight": true,
    "highlightLanguages": []
}
  1. 在UEditor的引入页面中引入prism.js和prism.css文件,用于实现代码高亮显示。可以在UEditor的官网或者GitHub上下载这两个文件。

  2. 在UEditor的引入页面中添加代码高亮显示的初始化代码,例如:

<script type="text/javascript">
    UE.getEditor('editor', {
        toolbars: [['highlightcode']],
    });
</script>

通过以上步骤设置,即可在UEditor中实现代码高亮显示功能。

0