node.js为express添加富文本编辑器——ueditor

先大概预览下我目录结构

1，首先下载ueditor模块

npm install ueditor --save

2，先下载PHP版本的ueditor：http://ueditor.baidu.com/website/download.html

在public目录下创建一个名字为ueditor的文件夹，将下载下来的ueditor包解压后把里面的所有文件都复制粘贴到ueditor文件夹中。

编辑文件ueditor.config.js，将里面的内容修改为如下：

serverUrl: URL + "ue"

3，后台编辑

//app.js
注意添加的模块和修改的地方

var bodyParser = require('body-parser')  //express默认应该会加载，若没有手动添加
var ueditor = require("ueditor")         //重点加载
app.use(bodyParser.urlencoded({
 extended: true       //默认是false,现在改为true
}))
app.use(bodyParser.json());  //express默认应该是加载的



app.use("/ueditor/ue", ueditor(path.join(__dirname, 'public'), function(req, res, next) {
 // ueditor 客户发起上传图片请求
 if(req.query.action === 'uploadimage'){
 var foo = req.ueditor;

 var imgname = req.ueditor.filename;

 var img_url = '/images/ueditor/';
 res.ue_up(img_url); //你只要输入要保存的地址 。保存操作交给ueditor来做
 }
 // 客户端发起图片列表请求
 else if (req.query.action === 'listimage'){
 var dir_url = '/images/ueditor/';
 res.ue_list(dir_url); // 客户端会列出 dir_url 目录下的所有图片
 }
 // 客户端发起其它请求
 else {

 res.setHeader('Content-Type', 'application/json');
 res.redirect('/ueditor/php/config.json')  //这里的路径要加载对否则就不能上传图片。如果你下载的是JSP那就对应jsp目录
}}));

4，客户端编辑

在你需要显示编辑器的页面加载

//添加这3个文件
script(src="./ueditor/ueditor.config.js")
script(src="./ueditor/ueditor.all.min.js")
script(src="./ueditor/lang/zh-cn/zh-cn.js")


//在需要插入编辑器的位置，加入
textarea(value="" name="con_text" style="width:500px;min-height:420px;display:none")
script(id="editor" type="text/plain" style="width:1024px;height:500px;")
script.
 var ue = UE.getEditor('editor');




//页面最底部添加，这些都是编辑器提供的方法
$('#context').click(function(){
 $.ajax({
   type: 'post',
   url: 'admin_index',
   data:{con_text:getContent()}  //利用getContent()获取到的内容，传给name="con_text",提交到数据库里
 });
 return false;
});

function isFocus(e){
 alert(UE.getEditor('editor').isFocus());
 UE.dom.domUtils.preventDefault(e)
 }
 function setblur(e){
 UE.getEditor('editor').blur();
 UE.dom.domUtils.preventDefault(e)
 }
 function insertHtml() {
 var value = prompt('插入html代码', '');
 UE.getEditor('editor').execCommand('insertHtml', value)
 }
 function createEditor() {
 enableBtn();
 UE.getEditor('editor');
 }
 function getAllHtml() {
 alert(UE.getEditor('editor').getAllHtml())
 }
 function getContent() { //其中这个能获取内容包括HTML标签
 var arr = [];
 // arr.push("使用editor.getContent()方法可以获得编辑器的内容");
 // arr.push("内容为：");
 arr.push(UE.getEditor('editor').getContent());
 // alert(arr.join("\n"));
 return arr;
 }
 function getPlainTxt() {
 var arr = [];
 arr.push("使用editor.getPlainTxt()方法可以获得编辑器的带格式的纯文本内容");
 arr.push("内容为：");
 arr.push(UE.getEditor('editor').getPlainTxt());
 alert(arr.join('\n'))
 }
 function setContent(isAppendTo) {
 var arr = [];
 arr.push("使用editor.setContent('欢迎使用ueditor')方法可以设置编辑器的内容");
 UE.getEditor('editor').setContent('欢迎使用ueditor', isAppendTo);
 alert(arr.join("\n"));
 }
 function setDisabled() {
 UE.getEditor('editor').setDisabled('fullscreen');
 disableBtn("enable");
 }

 function setEnabled() {
 UE.getEditor('editor').setEnabled();
 enableBtn();
 }

 function getText() {
 //当你点击按钮时编辑区域已经失去了焦点，如果直接用getText将不会得到内容，所以要在选回来，然后取得内容
 var range = UE.getEditor('editor').selection.getRange();
 range.select();
 var txt = UE.getEditor('editor').selection.getText();
 alert(txt)
 }

 function getContentTxt() {
 var arr = [];
 // arr.push("使用editor.getContentTxt()方法可以获得编辑器的纯文本内容");
 // arr.push("编辑器的纯文本内容为：");
 arr.push(UE.getEditor('editor').getContentTxt());
 return arr;
 }
 function hasContent() {
 var arr = [];
 arr.push("使用editor.hasContents()方法判断编辑器里是否有内容");
 arr.push("判断结果为：");
 arr.push(UE.getEditor('editor').hasContents());
 alert(arr.join("\n"));
 }
 function setFocus() {
 UE.getEditor('editor').focus();
 }
 function deleteEditor() {
 disableBtn();
 UE.getEditor('editor').destroy();
 }
 function disableBtn(str) {
 var div = document.getElementById('btns');
 var btns = UE.dom.domUtils.getElementsByTagName(div, "button");
 for (var i = 0, btn; btn = btns[i++];) {
 if (btn.id == str) {
 UE.dom.domUtils.removeAttributes(btn, ["disabled"]);
 } else {
 btn.setAttribute("disabled", "true");
 }
 }
 }
 function enableBtn() {
 var div = document.getElementById('btns');
 var btns = UE.dom.domUtils.getElementsByTagName(div, "button");
 for (var i = 0, btn; btn = btns[i++];) {
 UE.dom.domUtils.removeAttributes(btn, ["disabled"]);
 }
 }

 function getLocalData () {
 alert(UE.getEditor('editor').execCommand( "getlocaldata" ));
 }

 function clearLocalData () {
 UE.getEditor('editor').execCommand( "clearlocaldata" );
 alert("已清空草稿箱")
 }