好长时间没有更新了,近来打算搭建一个自己的博客,一直在学习和做技术储备。既然是技术博客肯定是会用到代有许多展示代码的地方,而我这个人又有那么一丢丢强迫症,代码看着不舒服了,就想看了,相比许多攻城狮跟在下有相同的感受吧。闲话少叙,直奔主题。
用到的两个插件:
- 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
真的是从网上搜了好多篇之后才决定写这个的,来帮助像我一样的小白们的!希望能帮到有需要的你!