node使用UEditor富文本编辑器的方法实例


Posted in Javascript onJuly 11, 2017

大部分编辑器的后台是基于java、php、asp等,很少有基于node.js的。今天就做一个基于node的

最近在做一个微信素材编辑器的小项目,使用到了UEditor编辑器,使用中出现了许多问题。

1.介绍

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

2.下载

下载地址 :https://3water.com/codes/45434.html

选择开发版 ,因为我们使用node ,所以随便下一个版本,这里下载1.4.3.3 jsp 版本

下载完成解压。

3.创建项目

使用express生成器生成一个项目,并安装好依赖模块

$express ue-test -ejs 
$cd ue-test && npm install

把刚刚压缩好的文件重命名为ueditor 放入ue-test/pubilc 中

修改index.ejs页面:

<!DOCTYPE html> 
<html> 
 <head> 
  <title><%= title %></title>  
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> 
  <script type="text/javascript" charset="utf-8" src="../ueditor/ueditor.config.js"></script> 
  <script type="text/javascript" charset="utf-8" src="../ueditor/ueditor.all.min.js"> </script> 
  <!--建议手动加在语言,避免在ie下有时因为加载语言失败导致编辑器加载失败--> 
  <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型,比如你在配置项目里配置的是英文,这里加载的中文,那最后就是中文--> 
  <script type="text/javascript" charset="utf-8" src="../ueditor/lang/zh-cn/zh-cn.js"></script> 
 </head> 
 <body> 
   <script id="editor" type="text/plain" style="width:1024px;height:500px;"></script> 
 </body> 
 
 
<script type="text/javascript"> 
 
  //实例化编辑器 
  //建议使用工厂方法getEditor创建和引用编辑器实例,如果在某个闭包下引用该编辑器,直接调用UE.getEditor('editor')就能拿到相关的实例 
  var ue = UE.getEditor('editor'); 
 
</script> 
</html>

然后启动项目,编辑器初始化成功!(注意引入文件路径的问题,如果初始化失败可以f12查看报错进行调试)

我们这里为什么要这样引入路径 可以看这里 (API)

node使用UEditor富文本编辑器的方法实例

4.后端配置

仅仅这样是不能进行上传的

我们需要要配置后端文件。

 修改 ueditor.config.js 文件

//找到这一行代码 修改成这样,这里的url为请求的路径 
// 服务器统一请求接口路径 
    ,serverUrl: URL + "ue"

接下来我们安装ueditor 模块

$npm install ueditor --save

ueditor模块有一个示例,照着修改就好了

修改app.js:

//加载ueditor 模块 
var ueditor = require("ueditor"); 
 
//使用模块 
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来做 
    res.setHeader('Content-Type', 'text/html');//IE8下载需要设置返回头尾text/html 不然json返回文件会被直接下载打开 
  } 
  // 客户端发起图片列表请求 
  else if (req.query.action === 'listimage') { 
    var dir_url = '/images/ueditor/'; 
    res.ue_list(dir_url); // 客户端会列出 dir_url 目录下的所有图片 
  } 
  // 客户端发起其它请求 
  else { 
    // console.log('config.json') 
    res.setHeader('Content-Type', 'application/json'); 
    res.redirect('/ueditor/jsp/config.json'); 
  } 
}));

修改完成重启一下服务就好了,

node使用UEditor富文本编辑器的方法实例

node使用UEditor富文本编辑器的方法实例

node使用UEditor富文本编辑器的方法实例

5.其他配置

自动保存

//启用自动保存 
,enableAutoSave: true 
//自动保存间隔时间, 单位ms 
,saveInterval: 500

发现这样启用自动保存没有成功,不知道为什么。

另一个方法是在实例编辑器之后调用

//实例化编辑器 
//建议使用工厂方法getEditor创建和引用编辑器实例,如果在某个闭包下引用该编辑器,直接调用UE.getEditor('editor')就能拿到相关的实例 
var ue = UE.getEditor('editor'); 
 
//注意一定要延时。要等这玩意载入成功。 
setTimeout(function () { 
  ue.execCommand('drafts'); 
}, 500);

自动保存成功!!

取消自动保存

启用自动保存的时候会发现一直提示,是不是很烦,反正我是不能忍,怎么办呢?

node使用UEditor富文本编辑器的方法实例

设置一下自动保存间隔时间,把它设长一点就好了。

//启用自动保存 
 ,enableAutoSave: true 
 //自动保存间隔时间, 单位ms 
 ,saveInterval: 500 * 60 *60

这样烦人的自动保存提示就不会出来了。

只取消提示

上面我取消自动保存之后会发现使用起来不舒服,每次刷新页面,上次编辑的就没有了。

我们能不能只取消提示,而保留自动保存功能呢。

我在网上找了下,并没有发现。

那我们就自己写一个简单的保存吧。

我们可以使用html5的 localStorage 本地存储功能,当我们离开当前页面时候,把编辑器内容存储到本地,进入页面时候提取数据。上代码:

//实例化编辑器 
var ue = UE.getEditor('editor'); 
$(function() { 
  //初始化数据,读localstroage  
 var allData = {}; 
 if (localStorage.getItem('ueditor_content')!=null && localStorage.getItem('ueditor_content')!="") { 
    allData =  JSON.parse(localStorage.getItem('ueditor_content'));  
  }  
 
 //延时加载数据 要等编辑器加载成功,反正我不延时的时候没有成功。 
 setTimeout(function () { 
    ue.setContent (allData) 
 }, 500);  
 
 //离开页面或者刷新页面触发方法 
  window.onbeforeunload = function() { 
    localStorage.setItem("ueditor_content", JSON.stringify(ue.getContent())); 
  }  
 
})

6.添加音乐

添加音乐好坑啊,

node使用UEditor富文本编辑器的方法实例

这是什么鬼,我要的是这样的效果好么。

node使用UEditor富文本编辑器的方法实例

要不然你就这样也好

node使用UEditor富文本编辑器的方法实例

有会的老司机请指导指导!

7.解决图片过大超出编辑器

有时候图片宽度超出了编辑器的宽度,我们会想让他等比缩放

在配置里面找了下,没找到这个配置。不过编辑器提供了一个iframe.css让我们写自己的配置

node使用UEditor富文本编辑器的方法实例

我们可以在里面设置:

img { 
 max-width: 100%; /*图片自适应宽度*/ 
}

这样图片再怎么拉伸宽度都超不过边界。别看很简单,但是花了不少时间研究。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE和Firefox的Javascript兼容性总结[推荐收藏]
Oct 19 Javascript
javascript在网页中实现读取剪贴板粘贴截图功能
Jun 07 Javascript
JavaScript实现点击按钮切换网页背景色的方法
Oct 17 Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
Nov 17 Javascript
JavaScript学习笔记整理_用于模式匹配的String方法
Sep 19 Javascript
基于jquery实现弹幕效果
Sep 29 Javascript
JS全角与半角转化实例(分享)
Jul 04 Javascript
JS监控关闭浏览器操作的实例详解
Sep 12 Javascript
Bootstrap modal只加载一次数据的解决办法(推荐)
Nov 24 Javascript
vuejs 动态添加input框的实例讲解
Aug 24 Javascript
阿望教你用vue写扫雷小游戏
Jan 20 Javascript
交互式可视化js库gojs使用介绍及技巧
Feb 18 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
Jul 11 #Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
Jul 11 #Javascript
JS自定义滚动条效果简单实现代码
Oct 27 #Javascript
jQuery实现节点的追加、替换、删除、复制功能示例
Jul 11 #jQuery
微信小程序分页加载的实例代码
Jul 11 #Javascript
Bootstrap弹出框(Popover)被挤压的问题小结
Jul 11 #Javascript
React入门教程之Hello World以及环境搭建详解
Jul 11 #Javascript
You might like
《魔兽争霸3》重制版究竟重制了什么?玩家:这么糊弄真的好吗?
2020/05/04 魔兽争霸
Yii2实现自定义独立验证器的方法
2017/05/05 PHP
PHP简单获取随机数的常用方法小结
2017/06/07 PHP
php+ajax实现异步上传文件或图片功能
2017/07/18 PHP
php之header的不同用法总结(实例讲解)
2017/11/28 PHP
php微信公众号开发之校园图书馆
2018/10/20 PHP
Laravel5框架自定义错误页面配置操作示例
2019/04/17 PHP
Firefox window.close()的使用注意事项
2009/04/11 Javascript
非常强大的 jQuery.AsyncBox 弹出对话框插件
2011/08/29 Javascript
JQuery结合CSS操作打印样式的方法
2013/12/24 Javascript
js弹窗返回值详解(window.open方式)
2014/01/11 Javascript
JavaScript使用push方法添加一个元素到数组末尾用法实例
2015/04/06 Javascript
javascript每日必学之基础入门
2016/02/16 Javascript
js 判断各种数据类型的简单方法(推荐)
2016/08/29 Javascript
javascript验证香港身份证的格式或真实性
2017/02/07 Javascript
vue组件间通信子与父详解(二)
2017/11/07 Javascript
vue.js模仿京东省市区三级联动的选择组件实例代码
2017/11/22 Javascript
webpack vue项目开发环境局域网访问方法
2018/03/20 Javascript
微信小程序之swiper轮播图中的图片自适应高度的方法
2018/04/23 Javascript
在Vue中使用antv的示例代码
2020/06/29 Javascript
Python学习小技巧之利用字典的默认行为
2017/05/20 Python
Python爬虫小技巧之伪造随机的User-Agent
2018/09/13 Python
python 递归深度优先搜索与广度优先搜索算法模拟实现
2018/10/22 Python
pygame游戏之旅 如何制作游戏障碍
2018/11/20 Python
python django下载大的csv文件实现方法分析
2019/07/19 Python
django 控制页面跳转的例子
2019/08/06 Python
python 两个数据库postgresql对比
2019/10/21 Python
Tensorflow: 从checkpoint文件中读取tensor方式
2020/02/10 Python
在jupyter notebook中调用.ipynb文件方式
2020/04/14 Python
用pip给python安装matplotlib库的详细教程
2021/02/24 Python
CSS3实现多背景展示效果通过CSS3定位多张背景
2014/08/10 HTML / CSS
新西兰最大的品牌运动鞋购物网站:Platypus NZ
2017/10/27 全球购物
2014光棍节单身联谊活动策划书
2014/10/10 职场文书
2015年初中元旦晚会活动总结
2014/11/28 职场文书
会计专业2019暑假实习报告
2019/06/21 职场文书
python装饰器代码解析
2022/03/23 Python