Introduction détaillée sur la façon d'installer et d'utiliser l'éditeur php UEditor Baidu

Cet article présente principalement UEditor BaiduEditorInstallation Partager avec la méthode d'utilisation. Les amis qui en ont besoin peuvent s'y référer

1 Téléchargez le package complet du code source depuis le site officiel et décompressez-le dans n'importe quel répertoire. Le code source décompresséStructure du répertoire<.> se présente comme suit :

_examples : Exemple de page de la version complète de l'éditeur

_demos : Divers cas d'utilisation de l'éditeur
dialogues : Ressources et
JS correspondant à la boîte de dialogue pop-up Fichiers thèmes : styles
images et fichiers de style serveur : PHP,
JSP et autres fichiers impliqués dans les opérations côté serveur tiers : plug-ins tiers
editor_all.js : un fichier packagé de tous les fichiers du répertoire _src
editor_all_min.js : une version compressée du fichier editor_all.js Il est recommandé de le faire. utiliser
editor_config.js uniquement pour un déploiement formel :
configuration du fichier éditeur , il est recommandé de le placer dans le même répertoire que la page d'instanciation de l'éditeur

2. Étapes pour déployer UEditor sur le projet réel (UETest) :

Première étape : créer un répertoire pour stocker les ressources et les fichiers liés à UEditor dans n'importe quel dossier du projet . Créez-le ici dans le répertoire racine du projet et nommez-le

Deuxième étape : copiez les boîtes de dialogue, les thèmes, les fichiers tiers, editor_all.js et editor_config.js dans le package de code source dans le dossier ueditor. les fichiers à l'exception du répertoire ueditor sont des fichiers spécifiques au projet, et seuls ceux répertoriés ici le sont. Par exemple
Étape 3 : Pour plus de simplicité, la page index.php du répertoire racine sera utilisée comme page d'instanciation de l'éditeur. pour afficher la version complète de UEditor. Dans le fichier index.php, importez d'abord les trois
fichiers d'entrée requis par l'éditeur. L'exemple de code est le suivant :

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>编辑器完整版实例</title>
<script type="text/javascript" src="ueditor/editor_config.js"></script>
<script type="text/javascript" src="ueditor/editor_all.js"></script>
<link rel="stylesheet" href="ueditor/themes/default/ueditor.css" rel="external nofollow" >

Étape 4. : Créez ensuite l'instance de l'éditeur et son conteneur DOM dans le fichier index.php. Des exemples de codes spécifiques sont les suivants :

<p id="myEditor"></p>
<script type="text/javascript">
 var editor = new baidu.editor.ui.Editor();
 editor.render("myEditor");
</script>

La dernière étape : ajoutez le code suivant en haut de l'instance de l'éditeur :

<script type="text/javascript">
 window.UEDITOR_HOME_URL=&#39;ueditor/&#39;;//此为ueditor相对于实例页面的路径
</script>

Ce qui précède est un chemin relatif, vous pouvez également utiliser relatif Le chemin absolu vers le répertoire racine du site Web, tel que :

<script type="text/javascript">
 window.UEDITOR_HOME_URL=&#39;/uc/ueditor/&#39;;//此为ueditor相对于网站根目录的路径
</script>

Il est recommandé d'utiliser le chemin absolu relatif dans le répertoire racine du site.

À ce stade, une instance complète de l'éditeur a été déployée sur notre projet

La dernière étape peut également être réalisée en modifiant les endroits suivants (déconseillé aux personnes qui ne le font pas ! comprendre js) :
Recherchez "URL= window.UEDITOR_HOME_URL||" dans /UETest/ueditor/ editor_config.js Et modifiez-le vers le chemin correspondant. Bien sûr, si vous le modifiez ici, window.UEDITOR_HOME_URL n'a pas besoin. à définir sur la page de l'instance.

//强烈推荐以这种方式进行绝对路径配置
URL= window.UEDITOR_HOME_URL||"/UETest/ueditor/";

3. Utilisation spécifique

1. Soumettre le contenu de l'éditeur au backend

Scénario 1 : Dans le formulaire où se trouve l'éditeur. situé Il y a un bouton de soumission , et l'action de soumission est terminée en cliquant sur ce bouton. Ce scénario convient aux occasions les plus courantes. Il n'y a pas de gros problèmes auxquels il faut prêter attention. Il n'y a que trois points à noter :
1) Par défaut, le nom du formulaire soumis au. l'arrière-plan est "editorValue", qui se trouve dans editor_config.js. Il peut être configuré et le nom du paramètre est textarea.
2) L'attribut name
peut être défini sur la balise du conteneur (c'est-à-dire la balise de script) pour remplacer la configuration par défaut dans editor_config.js. L'exemple de code est le suivant, myContent deviendra ici le nouveau nom du formulaire de soumission :

<form action="" method="post">
 <script type="text/plain" id="editor" name="myContent">
 </script>
 <input type="submit" name="submit" value="提交">
</form>

3) Le programme récepteur back-end peut obtenir le contenu en texte enrichi dans l'éditeur des manières suivantes.

//PHP获取：
$_POST["myContent"]
   
//JSP获取：
request.getParameter("myContent");
   
//ASP获取：
request("myContent");
   
//NET获取:
context.Request.Form["myContent"];

Scénario 2 : Il n'y a pas de bouton de soumission dans le formulaire où se trouve l'éditeur, et l'action de soumission est déclenchée par l'événement externe . Ce scénario convient aux sites avec beaucoup d'interactions frontales. La principale chose à laquelle il faut prêter attention est d'effectuer l'opération de synchronisation du contenu de l'éditeur avant de déclencher l'action de soumission du formulaire. Le modèle de code général est le suivant :

//满足提交条件时同步内容并提交，此处editor为编辑器实例
if(editor.hasContent()){ //此处以非空为例
 editor.sync();  //同步内容
 someForm.submit(); //提交Form
}

Ici, l'éditeur est l'instance d'éditeur

objet .

Scénario 3 : L'éditeur n'est dans aucun formulaire et l'action de soumission est déclenchée par des événements externes.

Ce scénario n'est pas beaucoup utilisé, mais il peut être nécessaire dans des circonstances particulières. UEditor fournit également les solutions de traitement correspondantes. La logique de base est la même que celle du scénario 2, sauf que lors de l'exécution des opérations de synchronisation, vous devez transmettre l'identifiant du formulaire soumis, tel que editor.sync(myFormID). D'autres sont identiques à la scène 2.

2. Lire le contenu de la base de données

<script type="text/plain" id="editor">
 //从数据库中取出文章内容打印到此处
</script>

Ici, la balise de script est utilisée comme objet conteneur de l'éditeur et son type est défini sur du texte brut, évitant ainsi l'exécution de code JS à l'intérieur du tag En même temps, cela résout le problème de transcodage supplémentaire causé par certains étudiants utilisant des balises textarea traditionnelles comme conteneurs.

3. Initialisation du contenu de l'éditeur (c'est-à-dire définition du texte riche dans l'éditeur)

Écrivez un nouvel article et des invites prédéfinies, des salutations et d'autres contenus dans l'éditeur.
Recherchez le paramètre initialContent dans le fichier editor_config.js et définissez sa valeur sur l'invite ou le message d'accueil requis, tel que initialContent : "Bienvenue dans UEditor !".

4. Téléchargement d'images

S'il s'agit d'un nouveau site, c'est-à-dire si le chemin de l'image utilise le chemin de l'éditeur lui-même, il n'est pas nécessaire de le modifier . Si l'ancien site possède déjà son propre dossier d'images Les fichiers suivants dans le dossier ueditor/php doivent être modifiés :

.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!