vue を使用して ueditor とノードのバックグラウンド設定を導入する方法

この記事では、vue での ueditor の導入とノードのバックグラウンド設定についての詳細な説明を中心に紹介しますので、参考にしてください。

最近、当社の顧客が当社の製品を使用したいと考えていましたが、当初は Quill を使用する予定でしたが、Quill ではそのニーズをまったく満たすことができないことがわかりました。 。市販されているリッチテキストエディタを調べたところ、Baiduのueditorだけが残っているようです。醜いですが～～～、問題はありません、政府のウェブサイトとこの効果はより優れています

vueはueditorを紹介します

手順

1. Baidu ueditorのダウンロード、どのバージョンでも大丈夫です（この記事はPHPを使用しています）特に包括的な機能が必要ない場合は、UM

2. 対応するフォルダーをstatic

3. に置き、フロントエンドの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>

注意事項

1. ステップ3のパスには最後の「/」が必要です

2. ステップ3のserverUrlは、対応するサーバーアドレスとして書き込まれます

ノードバックエンド処理

Express の実装

インターネット上の一部の人々はすでに Express バージョンを実装しています。Express を使用している人は幸運です。ただし、直接使用すると、ブラウザで「: unexcected」が報告されるため、設定を返すときにリダイレクトせずに、jsonp と jsonp のコンテンツを直接返すようにコードを変更しました。 Baidu の ueditor パッケージの php ファイルの下にある config.json を必ず正規表現を使用するか、手動でコメントを直接削除してください。
現時点では、エラーは報告されていないかもしれませんが、画像をアップロードするとエラーが発生し、404 が報告されます。実際、画像は正常にアップロードされましたが、返されたパスは完全な URL ではなく単なるパスであり、要求はフロントエンド サービス ドメインに対して行われるため、正しく読み込まれていません。 (例: "http://localhost:8080/**")。このとき、config.jsonの「imageUrlPrefix」を「http://localhost:3000」に変更し、イメージパスを完成させます。クロスドメインの問題を自分で解決する-----

1. res.jsonp(config.json)

2. config.json

koa実装のimageUrlPrefixにバックエンドドメインを追加します

これtime 比較的高機能なライブラリですが、v3 ではジェネレーターの書き込みメソッドが削除される予定です。ジェネレーターは徐々にサポートされなくなるため、非同期の書き込みメソッドを使用します。ファイル処理の実装には主に await-busboy ライブラリを使用します。

判決の実施

const ActionType = ctx.query.action
// 当ActionType为config时返回与express中一样的json
// 当为uploadimage或uploadfile时处理
处理上传
const parse = require('await-busboy')
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 === 'uploadimage' && img_type.indexOf(path.extname(part.filename)) >= 0 ){
   filename = 'pic_'+ (new Date()).getTime() + '_' + part.filename
   file_path = path.join(img_path, filename)
  } else if (ActionType === 'uploadfile'){
   filename = 'file_'+(new Date()).getTime()+'_'+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哦~~

以上、皆様の参考になれば幸いです。

関連記事:

Webpackを使用して過度に大きいbundle.jsファイルの問題に対処する

JavaScriptでデフォルトのアバターを入力する方法

JavaScriptの6つの正規表現(詳細なチュートリアル)

以上がvue を使用して ueditor とノードのバックグラウンド設定を導入する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。