So führen Sie die Ueditor- und Knotenhintergrundkonfiguration mit Vue ein

Dieser Artikel stellt hauptsächlich die Einführung von ueditor in vue und die detaillierte Erklärung der Knotenhintergrundkonfiguration vor. Jetzt teile ich ihn mit Ihnen und gebe Ihnen eine Referenz.

Kürzlich wollte ein Kunde des Unternehmens die Produkte unseres Unternehmens verwenden. Er hatte ursprünglich geplant, Quill zu verwenden, stellte jedoch fest, dass Quill diese nicht erfüllen konnte seine Bedürfnisse überhaupt. Nach einer Untersuchung der Rich-Text-Editoren auf dem Markt scheint es, dass nur noch Baidus ueditor übrig ist. Obwohl es hässlich ist, spielt es keine Rolle. Die Website der Regierung und dieser Effekt sind besser 🎜>

Laden Sie Baidu ueditor herunter, welche Version auch immer für Sie geeignet ist (in diesem Artikel wird die PHP-Version als Beispiel verwendet). Wenn Sie keine besonders umfassenden Funktionen benötigen, können Sie UM

und legen Sie den entsprechenden Ordner in statisch

ab, ändern Sie ueditor.confg.js, auf das der Front-End-Vue-Teil verweist, und legen Sie den Pfad window.UEDITOR_HOME_URL = "/static/utf8-php fest /"

1. 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"
    // ............ 下面忽略................

   Nach dem Login kopieren
Beim Schreiben von Vue-Dateien habe ich statisch im Pfad von Webpack konfiguriert. Ich kann es entsprechend ändern. Die verschiedenen Methoden in ueditor finden Sie in der index.html von das Baidu ueditor-Paket, das ich heruntergeladen habe.

2. <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>

   Nach dem Login kopieren
   Notizen
Der Pfad in Schritt 3 muss das letzte „/“ haben

Die serverUrl in Schritt 3 wird als entsprechende Serveradresse geschrieben

1. Knoten-Backend-Verarbeitung

2. Express-Implementierung

Jemand im Internet hat die Express-Version bereits implementiert. Wer Express nutzt, hat Glück. Es kann jedoch nicht direkt verwendet werden, wenn im Browser „: unexpected“ angezeigt wird, sodass beim Zurückgeben der Konfiguration keine Umleitung erfolgt, sondern direkt ein JSONP- und JSONP-Inhalt zurückgegeben wird config.json unter der PHP-Datei im Ueditor-Paket von Baidu. Denken Sie daran, reguläre Ausdrücke zu verwenden oder die Kommentare direkt von Hand zu entfernen.

Zu diesem Zeitpunkt stellen Sie möglicherweise fest, dass kein Fehler gemeldet wird, aber der Bild-Upload-Fehler auftritt und ein 404 gemeldet wird. Tatsächlich wurde das Bild erfolgreich hochgeladen, aber nicht korrekt geladen, da der zurückgegebene Pfad nur der Pfad und nicht die vollständige URL ist und die Anforderung an die Front-End-Dienstdomäne gestellt wird. (z. B. „http://localhost:8080/**“). Ändern Sie zu diesem Zeitpunkt „imageUrlPrefix“ in config.json: „http://localhost:3000“, um den Bildpfad zu vervollständigen. Lösen Sie das domänenübergreifende Problem selbst -----

res.jsonp(config.json)

imageUrlPrefix zu config.json hinzufügen Backend-Domäne

1. koa-Implementierung

Dies ist eine relativ anspruchsvolle Bibliothek, und die Generator-Schreibmethode wird in Version 3 entfernt. Der Generator ist jetzt Es wird nach und nach nicht mehr unterstützt. Verwenden Sie daher die asynchrone Schreibmethode. Ich verwende hauptsächlich die Wait-Busboy-Bibliothek, um die Dateiverarbeitung zu implementieren.

2. Umsetzung des Urteils

   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哦~~

   Nach dem Login kopieren
Das oben Gesagte habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Verwendung von Webpack zur Lösung des Problems übermäßig großer bundle.js-Dateien

So füllen Sie den Standard aus Avatar in Javascript

6 Arten regulärer Ausdrücke in JavaScript (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonSo führen Sie die Ueditor- und Knotenhintergrundkonfiguration mit Vue ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!