织梦dedecms整合百度编辑器Ueditor成功实现代码高亮

织梦5.7自身编辑器没有代码高亮功能,本文教你如何用百度编辑器Ueditor在dedecms后台发布带代码高亮的功能!

百度编辑器Ueditor

Ueditor百度编辑器 

一 、下载百度编辑器Ueditor(适合DEDECMS系统V5.7)  http://down.chinaz.com/soft/31257.htm

     解压缩包后得到include文件夹(utf-8),包含两个文件夹:inc、Ueditor;

    dedecms系统里打开include文件夹,粘贴inc文件夹并同名替换和新增Ueditor文件夹;

二、后台参数设置

    "系统"--"系统基本参数"--"核心设置",找到"HTML编辑器"项目,设置为Ueditor;

    (请注意:由于linux系统区分文件名的大小写,因此请将解压的文件夹名Ueditor改成小写)

三、修改模板文件

    压缩包里百度编辑器还需两个文件,久久经验网引用的两个资源文件:css/shCoreDefault.css shCore.js

    将文章内容详情页的htm模板文件打开,将css和js文件引入(注意文件的路径):

  1. <link rel="stylesheet" type="text/css" href="{dede:global.cfg_templets_skin/}/style/shCoreDefault.css"/> 
  2. <script type="text/javascript" charset="UTF-8" src="{dede:global.cfg_templets_skin/}/js/shCore.js"></script> 

    在htm模板文件底部加入如下代码:

  1. <script type="text/javascript"
  2.     SyntaxHighlighter.highlight(); 
  3.     var editor_a = new baidu.editor.ui.Editor(); 
  4.     editor_a.render( 'myEditor' ); 
  5. </script> 

四、发布文章

    如果一切顺利,那么你将看到和本文一样的代码高亮效果。如果没有达到预期,很可能是文件路径的问题,请检查。

    OK!

 

 

相关经验

导读书签
书签初始化中…