vue를 사용하여 ueditor 및 노드 배경 구성을 도입하는 방법-JS 튜토리얼-php.cn

vue를 사용하여 ueditor 및 노드 배경 구성을 도입하는 방법

亚连

풀어 주다： 2018-06-13 18:10:24

원래의

2262명이 탐색했습니다.

이 글은 주로 vue의 ueditor 소개와 노드 배경 구성에 대한 자세한 설명을 소개하고 있습니다.

최근 우리 회사의 고객이 백엔드 관리에 리치 텍스트 편집기에 대한 요구 사항이 많았으나 처음에는 Quill이 자신의 요구 사항을 전혀 충족할 수 없다는 것을 알게 되었습니다. . 시중에 나와 있는 리치 텍스트 편집기를 조사해보니 바이두의 유에디터만 남은 것 같습니다. 못생겼어도 상관없지만 정부 홈페이지와 이 효과가 더 좋습니다

vue에서 ueditor를 소개합니다

Steps

Baidu ueditor 다운로드는 어떤 버전이든 괜찮습니다. (이 글에서는 PHP를 사용합니다. 버전을 예시로 들었습니다), 특별히 포괄적인 기능이 필요하지 않다면 UM
해당 폴더를 static
Fnt-end vue 부분에서 참조하는 ueditor.confg.js를 수정하고 window.UEDITOR_HOME_URL = "/static/utf8-php/"

window.UEDITOR_HOME_URL = "/static/utf8-php/"

 var URL = window.UEDITOR_HOME_URL || getUEBasePath();
 /**
  * 配置项主体。注意，此处所有涉及到路径的配置别遗漏URL变量。
  */
 window.UEDITOR_CONFIG = {

  //为编辑器实例添加一个路径，这个不能被注释
  UEDITOR_HOME_URL: URL
  // 服务器统一请求接口路径
  , serverUrl: "http://localhost:3000/ueditor/ue"
 // ............ 下面忽略................

로그인 후 복사

vue 파일을 작성하세요. webpack의 경로에 맞게 설정해두었습니다. ueditor에서 다양한 방법을 찾을 수 있습니다. 다운로드한 Baidu ueditor 패키지의 index.html에서 찾으세요.

<template>
 <p class="hello">
 <script id="editor" type="text/plain"></script>
 <button @click="show">你敢点一下吗？</button>
 </p>
</template>

<script>
export default {
 name: &#39;HelloWorld&#39;,
 data () {
 return {
  editor: null
 }
 },
 methods: {
 show () {
  console.log(this.editor.getContent())
 }
 },
 mounted () {
 require(&#39;static/utf8-php/ueditor.config.js&#39;)
 require(&#39;static/utf8-php/ueditor.all.min.js&#39;)
 require(&#39;static/utf8-php/lang/zh-cn/zh-cn.js&#39;)
 require(&#39;static/utf8-php/ueditor.parse.min.js&#39;)
 this.editor = window.UE.getEditor(&#39;editor&#39;)
 },
 destroyed () {
 this.editor.destroy()
 }
}
</script>

로그인 후 복사

Notes

3단계의 경로에는 마지막 "/"가 있어야 합니다
3단계의 serverUrl은 해당 서버 주소

노드 백엔드 처리

Express 구현

인터넷상의 일부 사람들은 이미 Express 버전을 구현했습니다. 하지만 직접 사용하면 사용할 수 없습니다. 브라우저에 ": unexpected"가 보고됩니다. 구성을 반환할 때 리디렉션하지 않고 jsonp 및 jsonp 콘텐츠를 직접 반환하도록 코드를 변경했습니다. Baidu ueditor 패키지의 php 파일 아래에 있는 config.json 정규식을 사용하거나 직접 주석을 제거해야 합니다. json에는 주석이 없습니다.
이때는 오류가 보고되지 않는 것을 볼 수 있지만, 이미지 업로드 시 오류가 발생하며 404가 보고됩니다. 실제로 이미지는 성공적으로 업로드되었으나, 반환된 경로가 전체 URL이 아닌 경로일 뿐이고 프런트엔드 서비스 도메인으로 요청이 이루어지기 때문에 올바르게 로드되지 않습니다. (예: "http://localhost:8080/**"). 이때 config.json: "http://localhost:3000"에서 "imageUrlPrefix"를 수정하여 이미지 경로를 완성합니다. 도메인 간 문제를 직접 해결 -----

res.jsonp(config.json)
백엔드 도메인을 config.json

koa 구현

의 imageUrlPrefix에 추가하세요. 이번에는 비교적 정교한 라이브러리이며, v3에서는 Generator 작성 방법이 제거될 예정이며, Generator는 점차 더 이상 지원되지 않으므로 비동기 작성 방법을 사용합니다. 저는 파일 처리를 구현하기 위해 주로 wait-busboy 라이브러리를 사용합니다.

판단 실행

const ActionType = ctx.query.action
// 当ActionType为config时返回与express中一样的json
// 当为uploadimage或uploadfile时处理
处理上传
const parse = require(&#39;await-busboy&#39;)
const parts = parse(ctx)
 let part,
  stream,
  tmp_name,
  file_path,
  filename
 while ((part = await parts)) {
  if (part.length) {
   // 此处解析到form的fields
   console.log({ key: part[0], value: part[1] })
  } else {
  // 此处解析到文件并以可读流形式返回，通过nodejs官方API存储
  if(ActionType === &#39;uploadimage&#39; && img_type.indexOf(path.extname(part.filename)) >= 0 ){
   filename = &#39;pic_&#39;+ (new Date()).getTime() + &#39;_&#39; + part.filename
   file_path = path.join(img_path, filename)
  } else if (ActionType === &#39;uploadfile&#39;){
   filename = &#39;file_&#39;+(new Date()).getTime()+&#39;_&#39;+part.filename
   file_path = path.join(files_path, filename)
  }
  stream = fs.createWriteStream(path.join(static_path,file_path))
  part.pipe(stream)
  tmp_name = part.filename
 }
 // 返回json要引用koa-jsonp哦~~

로그인 후 복사

위 내용은 모든 사람을 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.