当前位置:主页 > 织梦教程 >

织梦DEDECMS使用百度Ueditor编辑器和代码高亮设置教程

栏目分类:织梦教程   发布日期:2017-02-18   来源:资源盒子   浏览次数:
由于织梦自带的ckeditor有一定的局限性,尤其是需要发布代码的博客,ckeditor表现的极其不好,而百度开发的Ueditor功能比较丰富,也比较符合国人的使用习惯,因此,本文将对织梦CMS使用


由于织梦自带的ckeditor有一定的局限性,尤其是需要发布代码的博客,ckeditor表现的极其不好,而百度开发的Ueditor功能比较丰富,也比较符合国人的使用习惯,因此,资源盒子将对织梦CMS使用ueditor进行说明。


步骤:

1.下载对应版本的ueditor

在百度ueditor官网 http://ueditor.baidu.com/website/ 下载跟织梦CMS相对应的ueditor源码。

2.上传ueditor源码

将下载后的ueditor源码上传到 /织梦根目录/include 目录下。

3.修改 inc_fun_funAdmin.php 文件

inc_fun_funAdmin.php 文件在 /织梦根目录/include/inc下,将其下载到本地,用HBuilder或DW打开,在369行:

else if($GLOBALS['cfg_html_editor']=='ckeditor')
    {
        require_once(DEDEINC.'/ckeditor/ckeditor.php');
        $CKEditor = new CKEditor();
        $CKEditor->basePath = $GLOBALS['cfg_cmspath'].'/include/ckeditor/' ;
        $config = $events = array();
        $config['extraPlugins'] = 'dedepage,multipic,addon';
        if($bbcode)
        {
            $CKEditor->initialized = true;
            $config['extraPlugins'] .= ',bbcode';
            $config['fontSize_sizes'] = '30/30%;50/50%;100/100%;120/120%;150/150%;200/200%;300/300%';
            $config['disableObjectResizing'] = 'true';
            $config['smiley_path'] = $GLOBALS['cfg_cmspath'].'/images/smiley/';
            // 获取表情信息
            require_once(DEDEDATA.'/smiley.data.php');
            $jsscript = array();
            foreach($GLOBALS['cfg_smileys'] as $key=>$val)
            {
                $config['smiley_images'][] = $val[0];
                $config['smiley_descriptions'][] = $val[3];
                $jsscript[] = '"'.$val[3].'":"'.$key.'"';
            }
            $jsscript = implode(',', $jsscript);
            echo jsScript('CKEDITOR.config.ubb_smiley = {'.$jsscript.'}');
        }
        $GLOBALS['tools'] = empty($toolbar[$etype])? $GLOBALS['tools'] : $toolbar[$etype] ;
        $config['toolbar'] = $GLOBALS['tools'];
        $config['height'] = $nheight;
        $config['skin'] = 'kama';
        $CKEditor->returnOutput = TRUE;
        $code = $CKEditor->editor($fname, $fvalue, $config, $events);
        if($gtype=="print")
        {
            echo $code;
        }
        else
        {
            return $code;
        }
    }

后面添加:

else if($GLOBALS['cfg_html_editor']=='ueditor')          
    {              
        $fvalue = $fvalue=='' ? '<p></p>' : $fvalue;                  
        $code = '<script type="text/javascript" charset="utf-8" src="'.$GLOBALS['cfg_cmspath'].'/include/ueditor/ueditor.config.js"></script>            
        <script type="text/javascript" charset="utf-8" src="'.$GLOBALS['cfg_cmspath'].'/include/ueditor/ueditor.all.min.js"></script>                   
        <link rel="stylesheet" type="text/css" href="'.$GLOBALS['cfg_cmspath'].'/include/ueditor/themes/default/css/ueditor.min.css"/>                   
        <textarea name="'.$fname.'" id="'.$fname.'" style="width:100%;">'.$fvalue.'</textarea>                   
        <script type="text/javascript">var ue = new baidu.editor.ui.Editor({initialFrameHeight:400});ue.render("'.$fname.'");</script>';                  
        if($gtype=="print")                   
        {                           
            echo $code;                   
        }                   
        else                   
        {                           
            return $code;                   
        }           
    }

之后保存并上传到原目录下覆盖,覆盖之前记得备份。上述添加代码的目的是使CMS获取ueditor。

    4.修改ueditor.config.js文件

    在ueditor目录下,修改ueditor.config.js文件,以引用ueditor编辑器,在30行:

//为编辑器实例添加一个路径,这个不能被注释
UEDITOR_HOME_URL: '/织梦CMS目录/include/ueditor/'

    修改上述织梦CMS目录,完成。

    5.修改后台默认编辑器

    在后台 系统/系统基本参数/核心设置 hmtl编辑器:将 ckeditor 修改为 ueditor,至此,更新一下系统缓存就可以在后台使用ueditor了。

    如果想用系统默认的编辑器,则只需将ueditor修改回ckeditor即可。

    6.更改ueditor图片、多媒体和文件的默认上传目录

    大家知道织梦CMS默认的图片上传目录为 /织梦CMS目录/uploads/allimg 下,而ueditor则不是,为了使ueditor的图片上传目录仍为织梦CMS默认的,则需要修改config.json文件,config.json文件在目录 /织梦CMS目录/include/ueditor/php/ 下,config.json文件文件里写的都很清楚,不但可以修改图片的上传目录,还可以修改上传图片的命名,非常方便。

    7.代码高亮

    对于在网站中出现代码的情况,希望前台页面代码显示高亮,只需要在内容页页头添加JS代码:

<link href="/织梦CMS目录/include/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css" />    
<script type="text/javascript" src="/织梦CMS目录/include/ueditor/third-party/SyntaxHighlighter/shCore.js"></script>

页尾引用语句:

<script type="text/javascript">         SyntaxHighlighter.all();          </script>

8.代码高亮换行问题

    代码高亮之后,在前台并没有出现自动换行的功能,可以使用强制换行代码。在shCoreDefault.css文件搜索如下代码:

.syntaxhighlighter{width:100%!important;margin:.3em 0 .3em 0!important;position:relative!important;overflow:auto!important;background-color:#f5f5f5!important;border:1px solid #ccc!important;border-radius:4px!important;border-collapse:separate!important; }

增加样式word-break:break-all,修改后代码如下:

.syntaxhighlighter
{
    width: 100% !important;
    margin: .3em 0 .3em 0 !important;
    position: relative !important;
    overflow: auto !important;
    background-color: #f5f5f5 !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    border-collapse: separate !important;
    word-break:break-all; /* dier add this */
}

而shCoreDefault.css文件在目录 /织梦CMS目录/include/ueditor/third-party/SyntaxHighlighter/ 下。

    至此,前台就可以显示如本文效果的 代码高亮。

    PS:由于某些模板的原因,代码会显示错乱,因此,出现这种情况,可以先使用织梦CMS默认模板,再进一步调试所使用的模板。

    另外,由于ueditor编辑器具有html标签过滤功能,因此当再次对文章进行编辑时,很多html标签消失了,资源盒子随后将提供解决方法。

解决传送门>>织梦替换ueditor后栏目与单页无法保存内容


打赏本站
Copyright © 2014 资源盒子 版权所有   黔ICP备14004500号-3   TAG
织梦标签工具下载 ↑↓
织梦标签工具下载