Fork me on GitHub

标签 ueditor 下的文章

升级UEditor的SyntaxHighlighter

博客文本编辑器使用的是UEditor1.4.3,和Bootstrap还有不兼容,语法高亮效果也很差,于是看了下自带SyntaxHighlighter的版本,竟然是1.5.1的,而且js文件有160kb。官网SyntaxHighlighter最新版本已经更新到3.0.83了,于是准备给UEditor的SyntaxHighlighter升下级。

升级SynTaxHighlighter

一、下载

  • 首先下载SyntaxHighlighter最新版,解压。
  • 将scripts目录下的js压缩成一个文件(注意:shCore.js这个核心文件要放在最前面),我这里压缩为shCore.min.js。
  • styles目录中的文件包含基本样式shCore.css,主题基本样式shCoreXX.css以及其对应主题样式shThemeXX.css,我把每个主题与基本样式压缩成一个主题样式shCoreXX.min.css,8个主题,这里生成了8个文件。

二、修改UEditor

  • 将上面生成的9个文件复制到UEditor目录下third-party/SyntaxHighlighter/目录中,并修改UEditor目录下的 ueditor.parse.js 文件,将 sh_js属性 设置为 shCore.min.js 增加语法高亮设置:
    /*!
     * UEditor
     * version: ueditor
     * build: Thu May 29 2014 16:47:49 GMT+0800 (中国标准时间)
     */
     
    (function(){
        (function(){
        UE = window.UE || {};
        //语法高亮设置
        UE.sh_config = {
            sh_js : "shCore.min.js",
            sh_theme : "Default"
        };
        var isIE = !!window.ActiveXObject;
        //定义utils工具
       var utils = {
  • 并修改加载SyntaxHighlighter的文件名:
UE.parse.register('insertcode',function(utils){
    var pres = this.root.getElementsByTagName('pre');
    if(pres.length){
        if(typeof XRegExp == "undefined"){
            var jsurl,cssurl;
            if(this.rootPath !== undefined){
                jsurl = utils.removeLastbs(this.rootPath)  + '/third-party/SyntaxHighlighter/'+UE.sh_config.sh_js;
                cssurl = utils.removeLastbs(this.rootPath) + '/third-party/SyntaxHighlighter/shCore'+UE.sh_config.sh_theme+'.min.css';
            }else{
                jsurl = this.highlightJsUrl;
                cssurl = this.highlightCssUrl;
            }

然后就修改完成啦,再将文件压缩一下就可以了。

三、使用方法

依然保持UEditor原来的使用方法,编辑内容展示,增加了两个可选配置,语法解析文件和高亮主题:

<script>
    UE.sh_config.sh_js="shCore.min.js";    //语法解析文件
    UE.sh_config.sh_theme="Default";    //语法高亮主题
    uParse(".article-content",{rootPath: "/js/ueditor"});
</script>

一共有8种主题可选:Default,Django,Eclipse,Emacs,FadeToGrey,MDUltra,Midnight,RDark

效果

Midnight:

1408548337165875.jpg

RDark:

1408548337540451.jpg

Default:

1408548339694916.jpg

UEditor入门

UEditor

UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码。

1 入门部署和体验

1.1 下载编辑器

到官网下载 UEditor 最新版:UEditor官方地址

1.2 创建demo文件

解压下载的包,在解压后的目录创建 demo.html 文件,填入下面的html代码

<!DOCTYPE HTML><html lang="en-US"><head>
<meta charset="UTF-8">
<title>ueditor demo</title></head><body>
<!-- 加载编辑器的容器 -->
<script id="container" name="content" type="text/plain">
    这里写你的初始化内容
</script>
<!-- 配置文件 -->
<script type="text/javascript" src="ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
    var ue = UE.getEditor('container');
</script></body></html>

1.3 在浏览器打开demo.html

如果看到了下面这样的编辑器,恭喜你,初次部署成功!

请输入图片描述

1.4 传入自定义的参数

编辑器有很多可自定义的参数项,在实例化的时候可以传入给编辑器:

var ue = UE.getEditor('container', {
autoHeight: false});

配置项也可以通过 ueditor.config.js 文件修改,具体的配置方法请看前端配置项说明

1.5 设置和读取编辑器的内容

通过 getContent 和 setContent 方法可以设置和读取编辑器的内容

var ue = UE.getContent();//对编辑器的操作最好在编辑器ready之后再做ue.ready(function() {
//设置编辑器的内容
ue.setContent('hello');
//获取html内容,返回: <p>hello</p>
var html = ue.getContent();
//获取纯文本内容,返回: hello
var txt = ue.getContentTxt();});

UEditor 的更多API请看API文档

2 详细文档

UEditor 官网:http://ueditor.baidu.com

UEditor API 文档:http://ueditor.baidu.com/doc

UEditor Github 地址:http://github.com/fex-team/ueditor