用UEditor富文本web编辑器结合代码高亮插件prism.js美化你的博客

来源：互联网发布：用sql语句删除数据文件编辑：程序博客网时间：2024/05/16 03:56

好长时间没有更新了，近来打算搭建一个自己的博客，一直在学习和做技术储备。既然是技术博客肯定是会用到代有许多展示代码的地方，而我这个人又有那么一丢丢强迫症，代码看着不舒服了，就想看了，相比许多攻城狮跟在下有相同的感受吧。闲话少叙，直奔主题。

查看原文！

用到的两个插件：

UEditor 富文本web编辑器
prism.js 代码高亮插件

UEditor富文本web编辑器

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

具体内容，可以去官网了解---->UEditor 官网。

这里先简单介绍我的做法（假设你已经有了一些nodejs基础）：

1、首先去 UEditor的官方github仓库 clone仓库到本地，并根据他的说明文档进行操作。如下图

2、然后会在你的项目目录里多出一个 dist 目录，如下图

这个dist/utf8-php 目录下，就是所有需要用到的文件，可能是因为我下载的是php语言版本的，所以构建出来是php的，这不影响前端使用，因为我服务器端用的nodejs，所以我把 dist/utf8-php/php 目录删除。

然后直接双击里面的 index.html 打开即可看到如下图所示的样子

UEditor的前端功能就可以用了，官网有一个简单的demo.html 的内容，大家可以用这个来做demo，从编辑到上传服务器到再显示到博客中的过程（事实上我也是这么干的）。

3、构建简单项目目录

（1）新建一个文件夹（我这里命名为UEditor_prism），然后打开命令行（或终端），cd（change directory）到这个新建的文件夹（UEditor_prism）。

（2）然后执行 npm init 命令创建package.json文件，输入一些你的描述信息，或者一路确定就好，最后会在改目录下生成一个如图所示的package.json文件。

（3）然后修改package.json文件如下：

{  "name": "ueditor_prism",  "version": "1.0.0",  "description": "",  "main": "index.js",  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1"  },  "author": "",  "license": "ISC",  "dependencies": {    "body-parser": "^1.17.1",    "express": "^4.14.1"  }}

添加该demo的依赖包，express和body-parser。然后运行 npm install ，安装依赖包，等待安装完成，完成后的项目目录应该如下所示：

（4）然后我们创建项目的入口文件，在UEditor_prism目录下创建 index.js 文件，并输入一下内容：

// 请求依赖，其中 path 为 nodejs 的内部模块，不需要安装// express 和 body-parser 为第三方模块，需要手动安装（package.json里的 dependencies 字段）var express = require('express'),path = require('path'),bodyParser = require('body-parser');// 创建 express 实例var app = express();// 设置改项目的静态文件目录，即改服务启动后，如：访问 http://localhost:8008/img/bg.jpg// 其实指向的是 UEditor_prism/public/img/bg.jpg 文件app.use(express.static(path.join(__dirname, 'public')));// 解析 http 传输的内容app.use(bodyParser.urlencoded({ extended: true }));// 收到 来自 http://localhost:8008/editor 的 post 请求时，会做如下处理app.post('/editor', function(req, res, next){console.log(req.body);res.send(req.body.content);});// 最后启动服务，监听在 8008 端口app.listen('8008', function(){console.log('Server listening on port 8008!');});

（5）然后，在UEditor_prism目录下，新建 public 目录，放置静态文件，并把之前下载的UEditor目录下的dist/utf8-php 目录下的内容复制到 public 目录下，现在的目录结构应该是如下所示：

到这步，基本的项目结构和目录就搭建好了，先告一段落。

prism 代码高亮显示插件

prism是一款轻量的、可以定制的代码高亮显示插件，官网：http://prismjs.com，一定要去官网看看，你会被它惊艳到的。

选择完成后，下边会有你选择的主题预览，最后分别下载 js 和 css 文件，把下载下来的文件命名为prism.js 和 prism.css，并放到项目的 public 目录下。

由于这个demo中用到了ajax方法，所以我们把 jquery 也放到public 目录下。

编写demo页面及简单功能实现

要实现功能：在UEditor里编辑内容，然后通过ajax的方法把编辑好的内容异步传给服务器，服务器直接返回接受到的内容（这里省略了保存到数据库的步骤），然后把返回的内容中的代码以高亮的形式显示在页面上。

1、首先，把public目录下的index.html改为demo.html （这样更方便大家理解，public为静态文件目录这一点）。然后，把demo.html 的内容修改如下：

<!DOCTYPE HTML><html lang="en-US"><head>    <meta charset="UTF-8">    <title>ueditor demo</title>    <!-- 引入 prism 的css 和 js -->    <link rel="stylesheet" type="text/css" href="prism.css">    <script type="text/javascript" src="prism.js"></script></head><body>    <!-- 加载编辑器的容器 -->    <script id="container" name="content" type="text/plain">这里写你的初始化内容</script>    <!-- 提交按钮 -->    <input id="submit" type="button" value="提交">    <!-- 用来放置服务器返回的内容 -->    <div id="result" style="border: 1px solid #ddd; padding: 20px;"></div>    <!-- 配置文件 -->    <script type="text/javascript" src="ueditor.config.js"></script>    <!-- 编辑器源码文件 -->    <script type="text/javascript" src="ueditor.all.js"></script>    <!-- 引入jquery -->    <script type="text/javascript" src="jquery-2.1.4.min.js"></script>    <!-- 实例化编辑器 -->    <script type="text/javascript">        var ue = UE.getEditor('container');        ue.ready(function() {            $('#submit').click(function(){                var contentHtml = ue.getContent();                                // 把编辑好的内容提交给服务器                $.post('/editor', {                    content: contentHtml                }, function(res) {                    $('#result').html(res);                });            });        });    </script></body></html>

2、在命令行（终端）中运行， node index 如下图：

然后打开浏览器，输入 http://localhost:8008/demo.html 会看到如下界面。

到这里，可以松一口气了，激动人心的时刻来了！我们试着插入一段代码，并点击提交按钮看看我们的成果吧！

结果可以正常返回，但是好像不是以我们选的 theme 的样子显示的，而且也没有高亮显示啊！why？

3、带着这个疑问，回头看 UEditor 给我输出的内容，如下

红框里的是服务器接收到客户端传过来的内容，服务器原封不动的返回，我们注意到，代码部分是用<pre>标签包裹的，而且class属性中的“brush:”后面为这段代码所用的语言。

再去看看 prism 的官方文档，

官方说明，只有在<code>标签里，并且 <code> 标签要有一个类似于 “language-css” 之类的class，才能正确工作。找到问题的所在，我们就可以去想办法解决了。

4、我们要做的就是在 <pre> 标签中插入一个带有 class=“language-XXX” 的 <code> 标签，并把原先 <pre> 标签里的内容插入到 <code> 标签内，然后再调用 prism 的一个方法，来格式化这些异步获取的数据中的代码。

修改 demo.html 的内容如下：

<!DOCTYPE HTML><html lang="en-US"><head>    <meta charset="UTF-8">    <title>ueditor demo</title>    <!-- 引入 prism 的css 和 js -->    <link rel="stylesheet" type="text/css" href="prism.css">    <script type="text/javascript" src="prism.js"></script></head><body>    <!-- 加载编辑器的容器 -->    <script id="container" name="content" type="text/plain">这里写你的初始化内容</script>    <!-- 提交按钮 -->    <input id="submit" type="button" value="提交">    <!-- 用来放置服务器返回的内容 -->    <div id="result" style="border: 1px solid #ddd; padding: 20px;"></div>    <!-- 配置文件 -->    <script type="text/javascript" src="ueditor.config.js"></script>    <!-- 编辑器源码文件 -->    <script type="text/javascript" src="ueditor.all.js"></script>    <!-- 引入jquery -->    <script type="text/javascript" src="jquery-2.1.4.min.js"></script>    <!-- 实例化编辑器 -->    <script type="text/javascript">        // 实例化编辑器        var ue = UE.getEditor('container');        ue.ready(function() {            $('#submit').click(function(){                // 获取 UEditor 输出的内容                var contentHtml = ue.getContent();                                // 把编辑好的内容提交给服务器                $.post('/editor', {                    content: contentHtml                }, function(res) {                    insertCodeElement(res, '#result');                });            });        });        // 插入 code 标签函数        // @param  content 为异步获取的内容        // @param  container 为放置这些内容的容器        function insertCodeElement(content, container){            container = container || document;            // 创建一个 div 来放置获取到的内容，这样就可以把 content 字符串内容转换成 dom            // 方便我们对这个 dom 进行操作（只是创建 div，并没有插入到文档，他只存在于内存中）            var parent = document.createElement('div');            parent.innerHTML = content;                        // 找到 parent 中的所有 pre 标签，并遍历            var $pres = $(parent).find('pre');            $pres.each(function(index, el) {                var $el = $(el),                    html = $el.html(),                    code = document.createElement('code'),                    elClass = $el.attr('class'),                    // 获取 pre 标签中，class 属性中包含的本段代码所有的编程语言                    language = elClass.substring(6, elClass.indexOf(';'));                code.className = 'language-' + language;                code.innerHTML = html;                $el.html(code);            });            $(container).html(parent.innerHTML);            // 最后，调用 Prism 的方法来高亮代码            Prism.highlightAll();        }    </script></body></html>

然后，刷新浏览器，在试一遍，就会发现，Every thing is OK!

内容中的代码部分按照我们预选的主题和高亮显示出来了！

有没有很酷！赶快去装修你的博客吧！

慢着！demo的源码上传到github上了，好奇的你是不是想去看一看呢-----> https://github.com/Angewell/UEditor_Prism

真的是从网上搜了好多篇之后才决定写这个的，来帮助像我一样的小白们的！希望能帮到有需要的你！

0 0