Intégrer l'éditeur de texte xhEditor dans le site Flask de Python-Tutoriel Python-php.cn

Présentation de xhEditor

xhEditor est un éditeur HTML visuel simple, mini et efficace développé sur la base de jQuery. Il est basé sur l'accès réseau et est compatible avec IE 6.0, Firefox 3.0, Opéra 9.6, Chrome 1.0, Safari 3.22.

xhEditor était mon éditeur préféré, et il a également été l'un des premiers éditeurs à prendre en charge le téléchargement par glisser-déposer. xhEditor était un excellent éditeur à l'époque. Il était suffisamment puissant et offrait une bonne expérience utilisateur. Le téléchargement par glisser-déposer était ma fonctionnalité préférée. Malheureusement, le développement s'est arrêté. La dernière version stable de xhEditor est la 1.1.14, qui n'a pas été mise à jour depuis plus de 2 ans (la version de développement 1.2.1 a été publiée en 2013, l'auteur a arrêté le développement et la maintenance, et le forum communautaire ne peut pas être ouvert sur). tous.

Étant donné que xhEditor est développé sur la base de jQuery, il ne prend pas très bien en charge les nouvelles versions de jQuery. Seule la version 1.4 de jQuery est la mieux prise en charge.

Bien qu'il ne soit plus mis à jour, il est toujours pleinement performant dans certaines situations où un éditeur de texte enrichi est nécessaire.

Cet article prend la version 1.1.14 comme exemple pour décrire comment utiliser l'éditeur xhEditor dans le projet Flask et implémenter les fonctions back-end de téléchargement d'images et de téléchargement de fichiers.

Caractéristiques principales de xhEditor :

Mini simplifié : Chargement initial de 4 fichiers, dont : 1 js (50k) 2 css( 10k) 1 image (5k), total 65k. Si les fichiers js et css sont compressés et transmis au gzip, ils peuvent être encore réduits à environ 24 Ko.
Facile à utiliser : une simple méthode d'appel et l'ajout d'un attribut de classe peuvent transformer instantanément votre zone de texte en un éditeur visuel riche en fonctionnalités.
Accessibilité : fournit une prise en charge complète de WAI-ARIA, un clavier complet pour un fonctionnement précis et un guidage vocal complet, offrant une expérience d'accès parfaite et sans obstacle, permettant aux personnes handicapées d'écrire un merveilleux vie.
Téléchargement Ajax intégré : téléchargement Ajax puissant intégré, y compris prise en charge du téléchargement HTML4 et HTML5 (téléchargement de fichiers multiples, progression réelle du téléchargement et téléchargement par glisser-déposer de fichiers), presse-papiers téléchargement et capture à distance Obtenez le téléchargement et poursuivez l'expérience de téléchargement utilisateur parfaite.
Nettoyage automatique de Word : réalisez la détection et le nettoyage automatiques du code Word, fournissez une solution de filtrage de code Word efficace et parfaite et générez du code optimisé et rationalisé sans perdre aucun détail.
Édition visuelle UBB : fournit une solution d'édition visuelle UBB parfaite, vous permettant d'obtenir un stockage de code sûr et efficace tout en profitant de la commodité de l'édition visuelle.

Utilisation de xhEditor dans le projet Flask
Nous devons d'abord télécharger la version 1.1.14 de l'éditeur xhEditor depuis le site officiel de xhEditor. Après le téléchargement, extrayez-le. à
Le répertoire static/xheditor du projet Flask.

Intégrer léditeur de texte xhEditor dans le site Flask de Python

xhEditor propose 2 méthodes d'initialisation : l'initialisation de classe et l'initialisation JavaScript. L'initialisation de la classe nécessite uniquement de définir l'attribut de classe de xheditor sur textarea, et il deviendra automatiquement l'éditeur xhEditor. Une page peut être dans plusieurs éditeurs en même temps, et des paramètres peuvent être ajoutés à cet attribut de classe. (PS : CKEditor a également cette fonction)

Pour ces deux méthodes d'initialisation, le site officiel propose un assistant d'installation très pratique, rendant la configuration relativement simple.

Exemple de code :

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

Copier après la connexion

Maintenant, nous avons un éditeur xhEditor.

Intégrer léditeur de texte xhEditor dans le site Flask de Python

Activer la fonction de téléchargement
La fonction de téléchargement de xhEditor nécessite de définir plusieurs paramètres (prenons le téléchargement d'images comme exemple) :

upImgUrl : URL de réception du téléchargement du fichier image, par exemple : /upload/, vous pouvez utiliser la variable intégrée {editorRoot}
upImgExt : Restreindre les fichiers locaux avant le téléchargement de l'image Extension, par défaut : jpg, jpeg, gif, png

En supposant que l'URL de réception du fichier téléchargé est /upload/, notre code d'initialisation de l'éditeur devient :

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

Copier après la connexion

Il en va de même pour les autres types de paramètres de téléchargement de fichiers.

Flask gère les demandes de téléchargement
xhEditor prend en charge 2 méthodes de téléchargement : le téléchargement HTML4 standard et le téléchargement HTML5.

Le téléchargement HTML4 utilise le champ de téléchargement du formulaire standard. Le nom du champ de fichier de téléchargement est : filedata
L'intégralité du flux de données POST de HTML5. télécharger est télécharger Les données complètes du fichier, ainsi que le nom du fichier local et d'autres informations sont stockées dans la variable du serveur HTTP_CONTENT_DISPOSITION

Le contenu renvoyé doit être un standard json, et la structure peut être la suivante :

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

Copier après la connexion

Remarque : si la structure 2 est sélectionnée, la variable url est obligatoire.

文件上传处理示例代码：

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)

Copier après la connexion

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

启用远程抓图功能，需要设置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

Copier après la connexion

更多Intégrer léditeur de texte xhEditor dans le site Flask de Python相关文章请关注PHP中文网！