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 相关文章推荐
javascript 继承实现方法
Aug 26 Javascript
随窗体滑动的小插件sticky源码
Jun 21 Javascript
文本框回车提交与禁止提交示例
Sep 27 Javascript
解析JavaScript中instanceof对于不同的构造器或许都返回true
Dec 03 Javascript
JavaScript中的prototype和constructor简明总结
Apr 05 Javascript
JavaScript获取flash对象与网上的有所不同
Apr 21 Javascript
jquery实现页面关键词高亮显示的方法
Mar 12 Javascript
jQuery实现文件上传进度条特效
Aug 12 Javascript
jquery表单提交带错误信息提示效果
Mar 09 Javascript
node.js自动上传ftp的脚本分享
Jun 16 Javascript
Vue-不允许嵌套式的渲染方法
Sep 13 Javascript
vuex实现像调用模板方法一样调用Mutations方法
Nov 06 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
谈谈关于php的优点与缺点
2013/04/11 PHP
php使用curl检测网页是否被百度收录的示例分享
2014/01/31 PHP
Linux中用PHP判断程序运行状态的2个方法
2014/05/04 PHP
PHP中feof()函数实例测试
2014/08/23 PHP
分享php代码将360浏览器导出的favdb的sqlite数据库文件转换为html
2015/12/09 PHP
PHP实现的网站目录扫描索引工具
2016/09/08 PHP
解决tp5在nginx下修改配置访问的问题
2019/10/16 PHP
JavaScript与C# Windows应用程序交互方法
2007/06/29 Javascript
Dreamweaver jQuery智能提示插件,支持版本提示,支持1.6api
2011/07/31 Javascript
jquery统计输入文字的个数并对其进行判断
2014/01/07 Javascript
ArtEditor富文本编辑器增加表单提交功能
2016/04/18 Javascript
Bootstrap作品展示站点实战项目2
2016/10/14 Javascript
基于jQuery实现的单行公告活动轮播效果
2017/08/23 jQuery
微信小程序实现弹出菜单功能
2018/06/12 Javascript
webpack4 处理CSS的方法示例
2018/09/03 Javascript
Vue.js数字输入框组件使用方法详解
2019/10/19 Javascript
JS通过识别id、value值对checkbox设置选中状态
2020/02/19 Javascript
javascript单张多张图无缝滚动实例代码
2020/05/10 Javascript
Vue+Java+Base64实现条码解析的示例
2020/09/23 Javascript
[02:04]2016国际邀请赛中国区预选赛VG.R晋级之路
2016/07/01 DOTA
python通过socket查询whois的方法
2015/07/18 Python
Django的数据模型访问多对多键值的方法
2015/07/21 Python
Python日期时间模块datetime详解与Python 日期时间的比较,计算实例代码
2018/09/14 Python
Python利用字典破解WIFI密码的方法
2019/02/27 Python
Django使用 Bootstrap 样式修改书籍列表过程解析
2019/08/09 Python
tensorflow 实现自定义layer并添加到计算图中
2020/02/04 Python
使用PyQt5实现图片查看器的示例代码
2020/04/21 Python
HTML5 canvas 基本语法
2009/08/26 HTML / CSS
个性大学生自我评价
2013/12/04 职场文书
捐款倡议书范文
2014/02/02 职场文书
应届毕业生求职信
2014/05/26 职场文书
洗手间标语
2014/06/23 职场文书
关于艺术节的开幕致辞
2016/03/04 职场文书
浅谈python中的多态
2021/06/15 Python
canvas实现贪食蛇的实践
2022/02/15 Javascript
nginx.conf配置文件结构小结
2022/04/08 Servers