每年培训输出1000+合格IT工程师
培训影响全国各大知名IT企业和部门

在express中使用 ueditor的步骤如下

在express中使用 ueditor的步骤如下:

第一步:下载ueditor

npm install ueditor

第二步: 创建一个router

var ueditor = require("ueditor");
const path = require("path")
//上传相片路径(参照官方文档配置)
router.all("/ueditor/ue", ueditor(path.resolve(__dirname,"..", 'public'), (req, res, next)=> {
    // ueditor 客户发起上传图片请求
    if (req.query.action === 'uploadimage') {
        var foo = req.ueditor;
        var imgname = req.ueditor.filename;
        console.log(imgname)
        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 {
        // console.log('config.json')
        res.setHeader('Content-Type', 'application/json');
        res.redirect('/ueditor/nodejs/config.json');
    }
}));

第三步,下载ueditor ,把文件放在public 下面,在页面加添加

<!DOCTYPE html>
<html>
<head>
    <title>{{title}}</title>
    <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>
    <script type="text/javascript" charset="utf-8" src="/ueditor/lang/zh-cn/zh-cn.js"> </script>
    <style type="text/css">
        div{
            width:100%;
        }
    </style>
 </head>
<body>

<script id="editor" type="text/plain" style="width:1024px;height:500px;" ></script>
<button onclick="getContent()">getContent</button>

<script>
      var ue = UE.getEditor('editor');
      function getContent() {
          var arr = [];
          arr.push("使用editor.getContent()方法可以获得编辑器的内容");
          arr.push("内容为:");
          arr.push(UE.getEditor('editor').getContent());
          alert(arr.join("\n"));
      }
</script>
</body>
</html>
赞(1) 打赏
未经允许不得转载:徐礼文的技术博客 » 在express中使用 ueditor的步骤如下
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏