zoukankan      html  css  js  c++  java
  • Nodejs之编辑器ueditor

    ueditor编辑器的使用说明。 最近在找nodejs前台界面可以编辑文字发表文章的工具,后来找到了ueditor,感觉还不错,就拿来使用了一下,使用过程如下。

    1.下载及准备

    下载ueditor,官方地址http://ueditor.baidu.com/website/download.html

    示例中使用的是1.4.3完整版。

    新建项目ueditors并支持ejs模板,

    然后修改ejs文件的后缀名为html,

    前面文章都有说明,此处不再一一详解。

    2.导入

    在package.json中加入依赖包ueditor,并npm install,

    将从官网下载好的ueditor包放在public静态目录下。

    public目录是开启端口后默认找到的目录,

    若想放到其他目录,修改下面这句即可。

    app.use(express.static(path.join(__dirname, 'public')));

    3.使用

    因为只是简单的示例,这里我们直接从ueditor下的_examples中复制completeDemo.html中的代码到

    我们的views目录下的index.html文件中。然后修改要导入js文件的src

    图中为我ueditor文件所在的位置,及我的路径

    然后修改ueditor.config.js文件,修改内容如下

     
    URL为编辑器资源文件根路径,serverUrl为请求后台的路径,上传图片时会用到。
    修改editor_api.js文件,editor_api.js是加载所有js依赖的文件,修改如下:
    运行app.js,打开后http://localhost:3000,即可看到文本编辑框界面。
     
    4.配置后台,上传图片
     
    打开app.js,修改配置文件
    该配置用于接收前台界面上传单张及多张图片的请求。
    需要在ueditor中创建一个image文件夹,用以保存上传的图片。
    需要配置config.json文件,直接将php目录中的config.json复制出来就行。
    配置好后重新启动,应该就能上传图片了。
     
    5.注意事项
     
    1.之前在使用时出现的大部分问题,都是导入js文件,路径出现的问题。碰到这种情况,打开开发者工具,导
       入js文件时会发送get请求,查看请求地址在哪,然后调试,一般都能解决。
     
    2.editor_api.js中导入js依赖文件时,是以同步的方式导入,而且document.write也会产生一部分问题,假如你
      只使用ueditor,当然没问题,但是如果你还要在之前导入其它js文件,则之前导入的文件可能会被清空。
     
    3.关于js的同步及异步,以后会另开一篇文章讨论。
     
    4.简单的项目demo地址在:https://github.com/Chen-xy/ueditors
     
  • 相关阅读:
    笔记-归并排序
    Repeated Substring Pattern
    Assign Cookies
    Number of Boomerangs
    Paint Fence
    Path Sum III
    Valid Word Square
    Sum of Two Integers
    Find All Numbers Disappeared in an Array
    First Unique Character in a String
  • 原文地址:https://www.cnblogs.com/Chen-xy/p/4466425.html
Copyright © 2011-2022 走看看