Maison > développement back-end > tutoriel php > exemple de méthode ueditor de l'éditeur Baidu intégré thinkphp3.2

exemple de méthode ueditor de l'éditeur Baidu intégré thinkphp3.2

小云云
Libérer: 2023-03-19 22:58:01
original
1333 Les gens l'ont consulté

Cet article présente principalement l'exemple de code de thinkphp3.2 intégré dans l'éditeur Baidu. Il a une certaine valeur de référence. J'espère que cela pourra aider tout le monde.

Cet article présente thinkphp3.2 pour intégrer l'éditeur Baidu, partagez-le avec tout le monde, j'espère que cet article vous sera utile

En raison des exigences de composition, de nombreux nous avons parfois besoin d'intégrer un éditeur de texte enrichi et de générer du contenu textuel avec des balises HTML. Parce que j'ai récemment travaillé sur un système de gestion backend qui nécessite de modifier le contenu du texte afin qu'il puisse générer du texte avec des balises HTML et l'enregistrer sur le serveur. Le client envoie une demande pour obtenir le texte balisé du serveur. J'utilise ueditor,

et je le mets dans le répertoire Public.

2. Lorsque nous utilisons l'éditeur de texte enrichi dans la vue, nous ajoutons généralement une zone de texte au formulaire,


<form>  
<p><textarea name="intro_detail" id="intro_detail" cols="30" rows="10"></textarea> </p>
</form>
Copier après la connexion

3. Ajoutez le script à la fin du code HTML pour configurer la valeur initiale de la zone de texte, où PUBLIC est le chemin que j'ai configuré dans la configuration


<script type="text/javascript" src="__PUBLIC__/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="__PUBLIC__/ueditor/ueditor.all.min.js"></script>
<!--建议手动加在语言,避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型,比如你在配置项目里配置的是英文,这里加载的中文,那最后就是中文-->
<script type="text/javascript" src="__PUBLIC__/ueditor/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript">
  UE.getEditor(&#39;intro_detail&#39;,{  //intro_detail为要编辑的textarea的id
    initialFrameWidth: 418,  //初始化宽度
    initialFrameHeight: 500,  //初始化高度
  });

</script>
Copier après la connexion

4. Habituellement, lorsque nous ajoutons un bouton à un formulaire, toutes les données du formulaire seront soumises par défaut. Cependant, mon projet implique également le téléchargement d'images ici, donc voici le problème. valeur à soumettre via la valeur de ("#intro_detail").val() dans jq ? La réponse est non. Ma solution est d'ajouter une entrée cachée sous la zone de texte, que j'utilise. La méthode fournie par ueditor obtient la valeur à l'intérieur. et l'attribue à l'entrée, afin qu'il puisse être soumis avec le formulaire. Dans le contrôleur, vous pouvez passer _POST('name of the form'), comme suit :


 <p >  
<textarea name="intro_detail" id="intro_detail" cols="30" rows="10"></textarea>
</p>
 <input type="text" style="display: none" id="intro_detail1" name="intro_detail1" >
Copier après la connexion

soumission ajax,

Copier le code Le code est le suivant :

$("#intro_detail1").val("' " +UE.getEditor('intro_detail').getContent()+"'");

Mettez l'entrée étiquetée dans la zone de texte avec des guillemets simples, enregistrez-la dans l'entrée et envoyez-la au en même temps. Quant à savoir pourquoi utilisez des guillemets simples, sinon ils ne seront pas envoyés et les balises seront automatiquement filtrées. Il nous suffit de supprimer les guillemets simples lorsque nous obtenons les données.


$.ajax({
          type: "POST",
          url: "<{:U(&#39;Admin/GameManager/Game/modGame&#39;)}>",
          dataType: &#39;json&#39;,
          processData: false,
          contentType: false,
          cache: false,
          data: formData,
          success:function(r){
            if(r.success){
              alert(&#39;编辑成功&#39;);
              window.location.reload();//重新刷新一次
              $(&#39;#user_dialog&#39;).modal(&#39;hide&#39;);
            }
            else{
              alert("参数错误");
            }
          }
        });
Copier après la connexion

5. Dans le contrôleur, vous pouvez utiliser $_POST (« nom du formulaire ») pour récupérer les données et les écrire dans la base de données


$db = M(&#39;game&#39;);
    $data  = $db->create(I(&#39;post.&#39;));
    $data[&#39;intro_detail&#39;] = $_POST[&#39;intro_detail1&#39;];
    $db->add($data);
Copier après la connexion

6. Lorsque nous obtenons les données dans la vue, il nous suffit de supprimer les guillemets simples


foreach($result as $key =>$value){    
      $result[$key][&#39;intro_detail&#39;]=str_replace("&#39;","",$result[$key][&#39;intro_detail&#39;]);//过滤单引号
    }
    $this->assign(&#39;game_list&#39;, $result);
    $this->display(&#39;&#39;);
Copier après la connexion

$result c'est moi Le contenu de la base de données est trouvé à l'aide d'instructions SQL, et intro_detail est le contenu du texte avec des étiquettes et des guillemets simples stockés dans la base de données


$user = M(&#39;game&#39;);
    $result = $user->field();
Copier après la connexion

7. Ce n'est en fait pas difficile, je fais de même, je vais vous donner quelques idées et vous pourrez en discuter davantage, je suis également novice.

Recommandations associées :

Comment intégrer tp3 dans l'éditeur Baidu ?

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal