敲代码不为别的，就是为了找个媳妇 › node随笔 › Ueditor 的使用 与 刨坑，这只是koa2 中的使用方式

周大胖子 发表于 2019-1-15 17:27:37

Ueditor 的使用 与 刨坑，这只是koa2 中的使用方式

本帖最后由 周大胖子 于 2019-1-15 17:32 编辑

先说正确用法：
1. 去官方下载 ueditor [百度富文本编辑器]；
2. 把下载好的文件 解压到 koa2 的根目录；
3. 改写ueditor.config.js 配置 serverUrl 为对应路由地址
serverUrl: "/editor/controller"

4.安装插件 koa2-ueditor   
   cnpm install --save koa2-ueditor
5.在路由的某模块中应用，其模块确保跟路由地址保持一致 ，我在index 模块中使用的
6.把php/config.json 里的文件内容拿出来，写到 响应中，改掉 接口文件地址 尾部带“ *PathFormat”: 的参数
贴全部代码
const router = require('koa-router')()
// 测试ueitor
const ueditor = require('koa2-ueditor')

router.get('/', async (ctx, next) => {
await ctx.render('index', {
    title: ' 权客商标分类管理中心'
})
})



// 需要传一个数组：静态目录和 UEditor 配置对象
// 比如要修改上传图片的类型、保存路径 [就是php/config.json的直接内容]
router.all('/editor/controller', ueditor(['public', {
/* 上传图片配置项 */
"imageAllowFiles": [".png", ".jpg", ".jpeg"],
"imagePathFormat": "/upload/image/{yyyy}{mm}{dd}/{filename}",// 保存为原文件名

/* 截图工具上传 */
"snapscreenActionName": "uploadimage", /* 执行上传截图的action名称 */
"snapscreenPathFormat": "/upload/image/{yyyy}{mm}{dd}/{filename}",
/* 上传保存路径,可以自定义保存路径和文件名格式 */

/* 抓取远程图片配置 */
"catcherLocalDomain": ["127.0.0.1", "localhost", "img.baidu.com"],
"catcherActionName": "catchimage", /* 执行抓取远程图片的action名称 */
"catcherFieldName": "source", /* 提交的图片列表表单名称 */
"catcherPathFormat": "/upload/image/{yyyy}{mm}{dd}/{filename}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
"catcherUrlPrefix": "", /* 图片访问路径前缀 */
"catcherMaxSize": 2048000, /* 上传大小限制，单位B */
"catcherAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 抓取图片格式显示 */

/* 上传视频配置 */
"videoActionName": "uploadvideo", /* 执行上传视频的action名称 */
"videoFieldName": "upfile", /* 提交的视频表单名称 */
"videoPathFormat": "/upload/image/{yyyy}{mm}{dd}/{filename}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
"videoUrlPrefix": "", /* 视频访问路径前缀 */
"videoMaxSize": 102400000, /* 上传大小限制，单位B，默认100MB */
"videoAllowFiles": [
".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid"], /* 上传视频格式显示 */

/* 上传文件配置 */
"fileActionName": "uploadfile", /* controller里,执行上传视频的action名称 */
"fileFieldName": "upfile", /* 提交的文件表单名称 */
"filePathFormat": "/upload/file/{yyyy}{mm}{dd}/{filename}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
"fileUrlPrefix": "", /* 文件访问路径前缀 */
"fileMaxSize": 51200000, /* 上传大小限制，单位B，默认50MB */
"fileAllowFiles": [
      ".png", ".jpg", ".jpeg", ".gif", ".bmp",
      ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
      ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",
      ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",
      ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"
], /* 上传文件格式显示 */

/* 列出指定目录下的图片 */
"imageManagerActionName": "listimage", /* 执行图片管理的action名称 */
"imageManagerListPath": "/upload/image/", /* 指定要列出图片的目录 */
"imageManagerListSize": 20, /* 每次列出文件数量 */
"imageManagerUrlPrefix": "", /* 图片访问路径前缀 */
"imageManagerInsertAlign": "none", /* 插入的图片浮动方式 */
"imageManagerAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 列出的文件类型 */

/* 列出指定目录下的文件 */
"fileManagerActionName": "listfile", /* 执行文件管理的action名称 */
"fileManagerListPath": "/upload/file/", /* 指定要列出文件的目录 */
"fileManagerUrlPrefix": "", /* 文件访问路径前缀 */
"fileManagerListSize": 20, /* 每次列出文件数量 */
"fileManagerAllowFiles": [
      ".png", ".jpg", ".jpeg", ".gif", ".bmp",
      ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
      ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",
      ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",
      ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"
] /* 列出的文件类型 */

}]))

module.exports = router

===============以上配置全部结束 ======【注意 这是不跨域的上传】========
然后贴下页面html代码吧
<!-- 编辑器.s -->
      <script
          id="editor"
          type="text/plain"
          style="width:100%;height:500px;"
      ></script>
      <br />
      <!-- 编辑器.e --><!-- 编辑器 -->
<script type="text/javascript" charset="utf-8" src="ueditor.config.js"></script>
<script
type="text/javascript"
charset="utf-8"
src="ueditor.all.min.js"
></script>
<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script
type="text/javascript"
charset="utf-8"
src="lang/zh-cn/zh-cn.js"
></script>
<!-- 编辑器js -->
<script>
//建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
var ue = UE.getEditor("editor");
</script>


贴完收工；【滚去在public 下创建 所需目录，其实不创建也会自动生成 哈哈哈哈哈哈哈】


下载网址： https://ueditor.baidu.com/website/download.html
koa2-ueditor 插件网址： https://www.npmjs.com/package/koa2-ueditor

周大胖子 发表于 2019-1-15 17:29:49

现在来说说跨域上传的问题：
ueditor 本来是不支持跨域上传的，但是你可以改啊！怎么改 你问我我问谁啊？ 总之我捣鼓了好一会 没有答案，不 准确的说是8个小时，网上的小伙子留了无数的坑， 我贴一堆网址， 以下网址 全是扯淡，但是思路都对
Ueditor
1.存放位置问题

答：放于 nodejs koa2的根目录，使用 静态资源配置进行调用


2.删除多余的菜单【在congfig 文件中】

删除项包括：'map', 'gmap',

3.关于跨域 使用【就是把PHP文件夹整个剪切到public 文件目录下，然后配置】

   参考文献：https://blog.csdn.net/patire/article/details/78550636

4. ueditor跨域上传，虽然图片上传成功，但是提示上传错误，图片不展示的解决方法
   
   参考文献：https://www.cnblogs.com/chatyuan/p/9896471.html
   参考文献：https://blog.csdn.net/qq_40014544/article/details/80235722
   参考文献：https://blog.csdn.net/tdcqfyl/article/details/81569880

周大胖子 发表于 2019-5-5 16:01:32

本帖最后由 周大胖子 于 2019-5-5 16:03 编辑

遇到一个BUG明明上传成功 却报了一个404仿佛：https://bbs.csdn.net/topics/390854584这样一个错误；

后来找到原因是因为 我用 router.all 接收时，并没有返回啥。

报啥404还不是我没接收也没处理嘛， 来扩展一下后面加段代码
, async(ctx,next)=>{

// console.log(ctx.body);
})

查看完整版本: Ueditor 的使用 与 刨坑，这只是koa2 中的使用方式