Heim > Artikel > Backend-Entwicklung > Integrieren Sie den Texteditor xhEditor in die Flask-Site von Python

Integrieren Sie den Texteditor xhEditor in die Flask-Site von Python

高洛峰Original: 2017-03-03 13:37:061344Durchsuche

Einführung in xhEditor

xhEditor ist ein einfacher, kleiner und effizienter visueller HTML-Editor, der auf Basis von jQuery entwickelt wurde und mit IE 6.0+ kompatibel ist , Firefox 3.0+, Opera 9.6+, Chrome 1.0+, Safari 3.22+.

xhEditor war früher mein Lieblingseditor und er war auch einer der ersten Editoren, der das Hochladen per Drag-and-Drop unterstützte. xhEditor war damals ein ausgezeichneter Editor, der eine gute Benutzererfahrung bot. Leider wurde die Entwicklung eingestellt. Die letzte stabile Version von xhEditor ist 1.1.14, die seit mehr als 2 Jahren nicht aktualisiert wurde (die Entwicklungsversion 1.2.1 wurde 2013 veröffentlicht. Der Autor hat die Entwicklung und Wartung eingestellt und das Community-Forum kann nicht geöffnet werden). alle.

Da xhEditor auf Basis von jQuery entwickelt wurde, werden neue Versionen von jQuery nicht sehr gut unterstützt. Nur Version 1.4 von jQuery wird am besten unterstützt.

Obwohl es nicht mehr aktualisiert wird, ist es in einigen Situationen, in denen ein Rich-Text-Editor benötigt wird, immer noch voll funktionsfähig.

In diesem Artikel wird Version 1.1.14 als Beispiel verwendet, um zu beschreiben, wie der xhEditor-Editor im Flask-Projekt verwendet und die Back-End-Funktionen zum Hochladen von Bildern und Dateien implementiert werden.

Hauptfunktionen von xhEditor:

Vereinfachtes Mini: Erstmaliges Laden von 4 Dateien, einschließlich: 1 js (50 KB) + 2 CSS (10k) + 1 Bild (5k), insgesamt 65k. Wenn JS- und CSS-Dateien gzip-komprimiert und übertragen werden, können sie weiter auf etwa 24 KB reduziert werden.
Einfach zu verwenden: Eine einfache Aufrufmethode und das Hinzufügen eines Klassenattributs können Ihren Textbereich sofort in einen funktionsreichen visuellen Editor verwandeln.
Barrierefreiheit: Bietet umfassende Unterstützung für WAI-ARIA, vollständige Tastatur für feine Bedienung und vollständige Sprachführung und sorgt so für ein perfektes barrierefreies Zugangserlebnis, sodass Menschen mit Behinderungen wunderbar schreiben können Leben.
Integrierter Ajax-Upload: Integrierter leistungsstarker Ajax-Upload, einschließlich HTML4- und HTML5-Upload-Unterstützung (Hochladen mehrerer Dateien, echter Upload-Fortschritt und Datei-Drag-and-Drop-Upload), Zwischenablage Hochladen und Remote-Erfassung Holen Sie sich den Upload und sorgen Sie für das perfekte Benutzer-Upload-Erlebnis.
Automatische Word-Bereinigung: Erkennt und bereinigt Word-Code automatisch, bietet eine effiziente und perfekte Word-Code-Filterlösung und generiert Code, der optimiert und rationalisiert ist, ohne dass Details verloren gehen.
UBB Visual Editing: Bietet eine perfekte UBB-Lösung für die visuelle Bearbeitung, mit der Sie eine sichere und effiziente Codespeicherung erhalten und gleichzeitig den Komfort der visuellen Bearbeitung genießen können.

Verwenden von xhEditor im Flask-Projekt
Zuerst müssen wir Version 1.1.14 des xhEditor-Editors von der offiziellen xhEditor-Website herunterladen und extrahieren zu
Das static/xheditor-Verzeichnis des Flask-Projekts.

Integrieren Sie den Texteditor xhEditor in die Flask-Site von Python

xhEditor bietet zwei Initialisierungsmethoden: Klasseninitialisierung und JavaScript-Initialisierung. Für die Klasseninitialisierung ist lediglich das Festlegen des Klassenattributs von xheditor auf den Textbereich erforderlich, und es wird automatisch zum xhEditor-Editor. Eine Seite kann sich gleichzeitig in mehreren Editoren befinden, und diesem Klassenattribut können Parameter hinzugefügt werden. (PS: CKEditor verfügt auch über diese Funktion)

Für diese beiden Initialisierungsmethoden bietet die offizielle Website einen sehr praktischen Einrichtungsassistenten, der die Konfiguration relativ einfach macht.

Beispielcode:

<head>
<script type="text/javascript" charset="utf-8" src="{{ url_for(&#39;static&#39;, filename=&#39;xheditor/jquery/jquery-1.4.4.min.js&#39;) }}"></script>
<script type="text/javascript" charset="utf-8" src="{{ url_for(&#39;static&#39;, filename=&#39;xheditor/xheditor-1.1.14-zh-cn.min.js&#39;) }}"></script>
<style>.xheditor {width: 640px; height:320px;}</style>
</head>

<body>
<textarea id="content" name="content" class="xheditor {tools:&#39;mfull&#39;}"></textarea>
</body>

Jetzt haben wir einen xhEditor-Editor.

Integrieren Sie den Texteditor xhEditor in die Flask-Site von Python

Aktivieren Sie die Upload-Funktion
Die Upload-Funktion von xhEditor erfordert die Einstellung mehrerer Parameter (nehmen Sie den Bild-Upload als Beispiel):

upImgUrl: Empfangs-URL für den Bilddatei-Upload, zum Beispiel: /upload/, Sie können die integrierte Variable {editorRoot}
upImgExt verwenden : Beschränken Sie lokale Dateien vor dem Hochladen von Bildern. Erweiterung, Standard: jpg, jpeg, gif, png

Unter der Annahme, dass die Empfangs-URL der hochgeladenen Datei /upload/ lautet, lautet unser Editor-Initialisierungscode:

<textarea class="xheditor {tools:&#39;mfull&#39;,upImgUrl:&#39;/upload/&#39;}"></textarea>

Das Gleiche gilt für andere Arten von Datei-Upload-Einstellungen.

Flask verarbeitet Upload-Anfragen
xhEditor unterstützt zwei Upload-Methoden: Standard-HTML4-Upload und HTML5-Upload.

HTML4-Upload verwendet das Standardformular-Upload-Feld. Der Name des Upload-Dateifelds lautet: filedata
Der gesamte POST-Datenfluss von HTML5 Upload ist Upload Die vollständigen Daten der Datei sowie der lokale Dateiname und andere Informationen werden in der Servervariablen HTTP_CONTENT_DISPOSITION gespeichert.

Der zurückgegebene Inhalt muss eine Standard-JSON-Zeichenfolge und die Struktur sein kann wie folgt sein:

{"err":"","msg":"200906030521128703.gif"} 或者
{"err":"","msg":{"url":"200906030521128703.jpg","localfile":"test.jpg","id":"1"}}

Hinweis: Wenn Struktur 2 ausgewählt ist, ist die URL-Variable erforderlich.

文件上传处理示例代码：

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;/upload/&#39;, methods=[&#39;GET&#39;, &#39;POST&#39;])
def upload():
  &#39;&#39;&#39;文件上传函数

  本函数未做上传类型判断及上传大小判断。
  &#39;&#39;&#39;
  result = {"err": "", "msg": {"url": "", "localfile": ""}}

  if request.method == &#39;POST&#39; and &#39;filedata&#39; in request.files:
    # 传统上传模式，IE浏览器使用这种模式
    fileobj = request.files[&#39;filedata&#39;]
    fname, fext = os.path.splitext(fileobj.filename)
    rnd_name = &#39;%s%s&#39; % (gen_rnd_filename(), fext)
    fileobj.save(os.path.join(app.static_folder, &#39;upload&#39;, rnd_name))
    result["msg"]["localfile"] = fileobj.filename
    result["msg"]["url"] = &#39;!%s&#39; % \
      url_for(&#39;static&#39;, filename=&#39;%s/%s&#39; % (&#39;upload&#39;, rnd_name))

  elif &#39;CONTENT_DISPOSITION&#39; in request.headers:
    # HTML5上传模式，FIREFOX等默认使用此模式
    pattern = re.compile(r"""\s.*?\s?filename\s*=\s*[&#39;|"]?([^\s&#39;"]+).*?""", re.I)
    _d = request.headers.get(&#39;CONTENT_DISPOSITION&#39;).encode(&#39;utf-8&#39;)
    if urllib.quote(_d).count(&#39;%25&#39;) > 0:
      _d = urllib.unquote(_d)
    filenames = pattern.findall(_d)
    if len(filenames) == 1:
      result["msg"]["localfile"] = urllib.unquote(filenames[0])
      fname, fext = os.path.splitext(filenames[0])
    img = request.data
    rnd_name = &#39;%s%s&#39; % (gen_rnd_filename(), fext)
    with open(os.path.join(app.static_folder, &#39;upload&#39;, rnd_name), &#39;wb&#39;) as fp:
      fp.write(img)

    result["msg"]["url"] = &#39;!%s&#39; % \
      url_for(&#39;static&#39;, filename=&#39;%s/%s&#39; % (&#39;upload&#39;, rnd_name))

  return json.dumps(result)

远程抓图
一般情况下，当复制站外的图片时，我们希望可以把图片保存到本地，远程抓图就可以完成这个事情。

启用远程抓图功能，需要设置2个参数：

localUrlTest : 非本站域名测试正则表达式
remoteImgSaveUrl : 远程图片抓取接收程序URL

设置这2个参数之后，我们的编辑器初始化代码变成：

复制代码代码如下:

这里表示抓取除localhost之外其它域名的图片。

远程抓图处理示例代码：

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;/uploadremote/&#39;, methods=[&#39;POST&#39;])
def uploadremote():
  """
  xheditor保存远程图片简单实现
  URL用"|"分隔，返回的字符串也是用"|"分隔
  返回格式是字符串，不是JSON格式
  """
  localdomain_re = re.compile(r&#39;https?:\/\/[^\/]*?(localhost:?\d*)\/&#39;, re.I)
  imageTypes = {&#39;gif&#39;: &#39;.gif&#39;, &#39;jpeg&#39;: &#39;.jpg&#39;, &#39;jpg&#39;: &#39;.jpg&#39;, &#39;png&#39;: &#39;.png&#39;}
  urlout = []
  result = &#39;&#39;
  srcUrl = request.form.get(&#39;urls&#39;)
  if srcUrl:
    urls = srcUrl.split(&#39;|&#39;)
    for url in urls:
      if not localdomain_re.search(url.strip()):
        downfile = urllib.urlopen(url)
        fext = imageTypes[downfile.headers.getsubtype().lower()]
        rnd_name = &#39;%s%s&#39; % (gen_rnd_filename(), fext)
        with open(os.path.join(app.static_folder, &#39;upload&#39;, rnd_name), &#39;wb&#39;) as fp:
          fp.write(downfile.read())
        urlreturn = url_for(&#39;static&#39;, filename=&#39;%s/%s&#39; % (&#39;upload&#39;, rnd_name))
        urlout.append(urlreturn)
      else:
        urlout.append(url)
  result = &#39;|&#39;.join(urlout)
  return result

更多Integrieren Sie den Texteditor xhEditor in die Flask-Site von Python相关文章请关注PHP中文网！

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：Signalmechanismus im Flask-Framework von PythonNächster Artikel：Signalmechanismus im Flask-Framework von Python

In Verbindung stehende Artikel

Mehr sehen