简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Heim
Artikel
Fragen und Antworten
Kurs
Thema
Herunterladen
Spiel
Wörterbuch
kürzliche Updates

Heim  >  Artikel  >  Backend-Entwicklung  >  Der Rich-Text-Editor CKeditor ist in das Flask-Framework von Python integriert

Der Rich-Text-Editor CKeditor ist in das Flask-Framework von Python integriert

高洛峰
高洛峰Original
2017-03-03 13:39:151887Durchsuche

CKeditor ist derzeit einer der besten sichtbaren und verfügbaren Webseiten-Editoren, geschrieben in JavaScript. Es zeichnet sich durch leistungsstarke Funktionen, einfache Konfiguration, Cross-Browser, Unterstützung mehrerer Programmiersprachen und Open Source aus. Es ist sehr beliebt und es ist einfach, relevante technische Dokumente im Internet zu finden. Viele inländische WEB-Projekte und große Websites verwenden CKeditor.

CKeditor herunterladen
Besuchen Sie die offizielle Website von CKeditor, rufen Sie die Download-Seite auf, wählen Sie „Standardpaket“ (im Allgemeinen sind die Funktionen ausreichend) und klicken Sie dann auf die Schaltfläche „CKEditor herunterladen“. Laden Sie die Installationsdateien im ZIP-Format herunter. Wenn Sie weitere Funktionen ausprobieren möchten, können Sie das Komplettpaket herunterladen.

Entpacken Sie CKeditor nach dem Herunterladen in das Verzeichnis static/ckeditor des Flask-Projekts.

CKeditor im Flask-Projekt verwenden
Um CKeditor im Flask-Projekt zu verwenden, müssen Sie nur zwei Schritte ausführen:

CKeditor im 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tag einführen Hauptskriptdatei. Sie können lokale Dateien oder Referenzdateien im CDN importieren.
Verwenden Sie CKEDITOR.replace(), um das vorhandene 4750256ae76b6b9d804861d8f69e79d3-Tag durch CKEditor zu ersetzen.
Beispielcode: 

<!DOCTYPE html>
<html>
  <head>
    <title>A Simple Page with CKEditor</title>
    <!-- 请确保CKEditor文件路径正确 -->
    <script src="{{ url_for(&#39;static&#39;, filename=&#39;ckeditor/ckeditor.js&#39;) }}"></script>
  </head>
  <body>
    <form>
      <textarea name="editor1" id="editor1" rows="10" cols="80">
        This is my textarea to be replaced with CKEditor.
      </textarea>
      <script>
        // 用CKEditor替换<textarea id="editor1">
        // 使用默认配置
        CKEDITOR.replace(&#39;editor1&#39;);
      </script>
    </form>
  </body>
</html>

Da CKeditor gut genug ist, kann im zweiten Schritt auch einfach eine Klasse namens ckeditor zum 4750256ae76b6b9d804861d8f69e79d3-Attribut hinzugefügt werden Wenn Sie den Wert angeben, wird er von CKeditor automatisch ersetzt. Zum Beispiel: 

<!DOCTYPE html>
<html>
  <head>
    <title>A Simple Page with CKEditor</title>
    <!-- 请确保CKEditor文件路径正确 -->
    <script src="{{ url_for(&#39;static&#39;, filename=&#39;ckeditor/ckeditor.js&#39;) }}"></script>
  </head>
  <body>
    <form>
      <textarea name="editor1" id="editor1" class="ckeditor" rows="10" cols="80">
        This is my textarea to be replaced with CKEditor.
      </textarea>
    </form>
  </body>
</html>

CKEditor-Skriptdateien können auch auf Dateien im CDN verweisen. Hier sind mehrere Referenzlinks: 

<script src="//cdn.ckeditor.com/4.4.6/basic/ckeditor.js"></script>

Basisversion (Miniversion)

<script src="//cdn.ckeditor.com/4.4.6/standard/ckeditor.js"></script>

Standardversion

<script src="//cdn.ckeditor.com/4.4.6/full/ckeditor.js"></script>

Vollversion
Upload-Funktion aktivieren
In der Standardkonfiguration aktiviert CKEditor die Upload-Funktion nicht Die Aktivierung der Upload-Funktion ist ebenfalls recht einfach und Sie müssen lediglich die Konfiguration ändern. Werfen wir einen Blick auf mehrere verwandte Konfigurationswerte:

  • filebrowserUploadUrl: Datei-Upload-Pfad. Wenn festgelegt, wird die Schaltfläche zum Hochladen in den Link-, Bild- und Flash-Dialogfenstern angezeigt.

  • filebrowserImageUploadUrl: Bild-Upload-Pfad. Wenn nicht festgelegt, wird der filebrowserUploadUrl-Wert verwendet.

  • filebrowserFlashUploadUrl: Flash-Upload-Pfad. Wenn nicht festgelegt, wird der filebrowserUploadUrl-Wert verwendet.

Der Einfachheit halber legen wir hier nur den filebrowserUploadUrl-Wert fest, und sein Wert wird auf /ckupload/ gesetzt (diese URL wird später in Flask definiert).

Es gibt zwei Hauptmethoden zum Festlegen von Konfigurationswerten:

Methode 1: Einstellung über die Konfigurationsdatei config.js im CKEditor-Stammverzeichnis: 

CKEDITOR.editorConfig = function( config ) {
  // ...
  // file upload url
  config.filebrowserUploadUrl = &#39;/ckupload/&#39;;
  // ...
};

Methode 2: Geben Sie den Einstellungswert als Parameter in CKEDITOR.replace() ein:

<script>
CKEDITOR.replace(&#39;editor1&#39;, {
  filebrowserUploadUrl: &#39;/ckupload/&#39;,
});
</script>

Flask verarbeitet Upload-Anfragen
Die Upload-Funktion von CKEditor ist eine einheitliche Schnittstelle, d. h. eine Schnittstelle kann das Hochladen von Bildern, Dateien und Flash-Uploads verarbeiten. Werfen wir zunächst einen Blick auf den Code: 

def gen_rnd_filename():
  filename_prefix = datetime.datetime.now().strftime(&#39;%Y%m%d%H%M%S&#39;)
  return &#39;%s%s&#39; % (filename_prefix, str(random.randrange(1000, 10000)))

@app.route(&#39;/ckupload/&#39;, methods=[&#39;POST&#39;])
def ckupload():
  """CKEditor file upload"""
  error = &#39;&#39;
  url = &#39;&#39;
  callback = request.args.get("CKEditorFuncNum")
  if request.method == &#39;POST&#39; and &#39;upload&#39; in request.files:
    fileobj = request.files[&#39;upload&#39;]
    fname, fext = os.path.splitext(fileobj.filename)
    rnd_name = &#39;%s%s&#39; % (gen_rnd_filename(), fext)
    filepath = os.path.join(app.static_folder, &#39;upload&#39;, rnd_name)
    # 检查路径是否存在，不存在则创建
    dirname = os.path.dirname(filepath)
    if not os.path.exists(dirname):
      try:
        os.makedirs(dirname)
      except:
        error = &#39;ERROR_CREATE_DIR&#39;
    elif not os.access(dirname, os.W_OK):
      error = &#39;ERROR_DIR_NOT_WRITEABLE&#39;
    if not error:
      fileobj.save(filepath)
      url = url_for(&#39;static&#39;, filename=&#39;%s/%s&#39; % (&#39;upload&#39;, rnd_name))
  else:
    error = &#39;post error&#39;
  res = """

<script type="text/javascript">
 window.parent.CKEDITOR.tools.callFunction(%s, &#39;%s&#39;, &#39;%s&#39;);
</script>

""" % (callback, url, error)
  response = make_response(res)
  response.headers["Content-Type"] = "text/html"
  return response

Der Erfassungs- und Speicherteil der hochgeladenen Datei ist relativ einfach und entspricht einem Standard-Datei-Upload. Hier sprechen wir hauptsächlich darüber, wie man nach erfolgreichem Upload zurückruft.

Nachdem die CKEditor-Datei hochgeladen wurde, gibt der Server eine HTML-Datei zurück. Das JS-Skript ruft eine Rückruffunktion auf URL zum CKEditor zur Verarbeitung.

Die drei Parameter sind:

  • CKEditorFuncNum: Seriennummer der Rückruffunktion. CKEditor übermittelt es über URL-Parameter an den Server

  • URL: URL der hochgeladenen Datei

  • Fehler: Fehlermeldung. Wenn kein Fehler vorliegt, geben Sie eine leere Zeichenfolge zurück

Blueprints verwenden
Blueprints werden häufig in großen Anwendungen verwendet und die Schritte und Apps von CKEditor sind integriert in der Blueprint-Ansicht sind die Ansichten grundsätzlich gleich.

1. Beim Erstellen eines Blueprints müssen Sie den absoluten Pfad des statischen Verzeichnisses des Blueprints angeben 

demo = Blueprint(&#39;demo&#39;, static_folder="/path/to/static")

2 . Die entsprechende URL muss hinzugefügt werden. Blueprint-Endpunkt 

<script src="{{url_for(&#39;.static&#39;, filename=&#39;ckeditor/ckeditor.js&#39;)}}"></script>

<script type="text/javascript">
  CKEDITOR.replace(
    "ckeditor_demo", {
      filebrowserUploadUrl: &#39;./ckupload/&#39;
    }
  );
</script>

3. Legen Sie den Endpunktwert fest 


response = form.upload(endpoint=demo)
Weitere Artikel zur Integration des Rich-Text-Editors CKeditor in das Flask-Framework von Python finden Sie auf der chinesischen PHP-Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Integrieren Sie den Texteditor xhEditor in die Flask-Site von PythonNächster Artikel：Integrieren Sie den Texteditor xhEditor in die Flask-Site von Python

In Verbindung stehende Artikel

Mehr sehen