recherche

Maison >développement back-end >Tutoriel Python >Éditeur de texte enrichi CKeditor intégré au framework Flask de Python

Éditeur de texte enrichi CKeditor intégré au framework Flask de Python

高洛峰
高洛峰original
2017-03-03 13:39:151949parcourir

CKeditor est l'un des éditeurs de pages Web les plus visibles et disponibles actuellement. Il est écrit en JavaScript. Il présente les caractéristiques de fonctions puissantes, de configuration facile, de multi-navigateurs, de prise en charge de plusieurs langages de programmation et d'open source. Il est très populaire et il est facile de trouver des documents techniques pertinents sur Internet. De nombreux projets WEB nationaux et grands sites Web utilisent CKeditor.

Télécharger CKeditor
Visitez le site officiel de CKeditor, entrez dans la page de téléchargement, sélectionnez Package standard (généralement les fonctions sont suffisantes), puis cliquez sur le bouton Télécharger CKEditor pour téléchargez les fichiers d'installation au format ZIP. Si vous souhaitez essayer plus de fonctionnalités, vous pouvez choisir de télécharger le package complet.

Après avoir téléchargé CKeditor, décompressez-le dans le répertoire static/ckeditor du projet Flask.

Utiliser CKeditor dans le projet Flask
Pour utiliser CKeditor dans le projet Flask, il vous suffit d'effectuer deux étapes :

Introduire CKeditor dans la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a Fichier de script principal. Vous pouvez importer des fichiers locaux ou des fichiers de référence sur CDN.
Utilisez CKEDITOR.replace() pour remplacer la balise 4750256ae76b6b9d804861d8f69e79d3 existante par CKEditor.
Exemple de code : 

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

Parce que CKeditor est assez bon, la deuxième étape peut également simplement ajouter une classe nommée ckeditor à l'attribut 4750256ae76b6b9d804861d8f69e79d3 valeur, CKeditor le remplacera automatiquement. Par exemple : 

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

Les fichiers script CKEditor peuvent également référencer des fichiers sur CDN. Voici plusieurs liens de référence :

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

Version de base (version mini)


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

Version standard


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

Version complète


Activer la fonction de téléchargement
Dans la configuration par défaut, CKEditor n'active pas la fonction de téléchargement. Vous devez le faire. activez-le. La fonction de téléchargement est également assez simple, et il vous suffit de modifier la configuration. Jetons un coup d'œil à plusieurs valeurs de configuration associées :

  • filebrowserUploadUrl : chemin de téléchargement du fichier. S'il est défini, le bouton de téléchargement apparaîtra dans les fenêtres de dialogue de lien, d'image et Flash.

  • filebrowserImageUploadUrl : chemin de téléchargement de l'image. Si elle n’est pas définie, la valeur filebrowserUploadUrl est utilisée.

  • filebrowserFlashUploadUrl : chemin de téléchargement Flash. Si elle n’est pas définie, la valeur filebrowserUploadUrl est utilisée.

Pour plus de commodité, nous définissons ici uniquement la valeur filebrowserUploadUrl, et sa valeur est définie sur /ckupload/ (cette URL sera définie dans Flask plus tard).

Il existe deux méthodes principales pour définir les valeurs de configuration :

Méthode 1 : Définir via le fichier de configuration config.js dans le répertoire racine de CKEditor : 

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

Méthode 2 : Mettez la valeur de réglage en tant que paramètre dans CKEDITOR.replace() :

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

Flask gère les demandes de téléchargement
La fonction de téléchargement de CKEditor est une interface unifiée, c'est-à-dire qu'une interface peut gérer le téléchargement d'images, le téléchargement de fichiers et le téléchargement Flash. Jetons d'abord un coup d'œil au 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

La partie acquisition et sauvegarde du fichier téléchargé est relativement simple et constitue un téléchargement de fichier standard. Ici, nous parlons principalement de la façon de rappeler une fois le téléchargement réussi.

Une fois le fichier CKEditor téléchargé, le serveur renvoie un fichier HTML. Le fichier HTML contient un script JAVASCRIPT. Le script JS appellera une fonction de rappel. S'il n'y a pas d'erreur, la fonction de rappel transférera le retour. URL vers CKEditor pour le traitement.

Les trois paramètres sont :

  • CKEditorFuncNum : numéro de série de la fonction de rappel. CKEditor le soumet au serveur via les paramètres d'URL

  • URL : URL du fichier téléchargé

  • Erreur : message d'erreur. S'il n'y a pas d'erreur, renvoyez une chaîne vide

Utiliser les plans
Les plans sont souvent utilisés dans les grandes applications, et les étapes et applications de CKEditor sont intégrées dans la vue Blueprint, les vues sont fondamentalement les mêmes.

1. Lors de la création d'un plan, vous devez spécifier le chemin absolu du répertoire statique du plan 


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

2. . L'URL correspondante doit être ajoutée au point de terminaison du Blueprint 


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


Pour plus d'articles liés à l'intégration de l'éditeur de texte riche CKeditor dans le framework Flask de Python, veuillez faire attention au site Web PHP chinois !

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Intégrer l'éditeur de texte xhEditor dans le site Flask de PythonArticle suivant：Intégrer l'éditeur de texte xhEditor dans le site Flask de Python

Articles Liés

Voir plus