Analyse de l'intégration de thinkphp3.2 dans l'éditeur Baidu

不言
Libérer: 2023-03-30 18:48:01
original
1805 Les gens l'ont consulté

Cet article présente principalement l'exemple de code de thinkphp3.2 intégrant l'éditeur Baidu ueditor, qui a une certaine valeur de référence. Ceux qui sont intéressés peuvent en apprendre davantage

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

En raison des exigences de composition, nous devons souvent intégrer un éditeur de texte enrichi et générer du contenu texte 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,

1. Nous téléchargeons d'abord la version PHP version utf.

Mettez-le dans l'annuaire 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. pour configurer la valeur initiale de la zone de texte à la fin du code HTML, 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, nous utiliserons par défaut Toutes les données sont soumises, mais mon projet implique également le téléchargement d'images. J'utilise ici la soumission asynchrone ajax, donc la question est, pouvons-nous passer ("#intro_detail").val() dans jq Pour obtenir la valeur à soumettre, le La réponse est non. Ma solution consiste à ajouter une entrée cachée sous la zone de texte. Nous utilisons la méthode fournie par l'éditeur pour obtenir la valeur à l'intérieur et l'attribuer à l'entrée, afin qu'elle puisse les soumettre ensemble dans le contrôleur. , vous pouvez passer _POST('nom du formulaire'), 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,

$("#intro_detail1").val("&#39;"+UE.getEditor(&#39;intro_detail&#39;).getContent()+"&#39;");
Copier après la connexion

saisissez la zone de texte avec une étiquette Assemblez-la avec un seul guillemets, enregistrez-le dans l'entrée et envoyez-le. Quant à savoir pourquoi les guillemets simples sont utilisés, sinon ils ne seront pas envoyés et les balises seront automatiquement filtrées. Nous pouvons simplement traiter les guillemets simples lors de l'extraction des 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. obtenez les données dans la vue Quand, supprimez simplement 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 est le contenu de la base de données que j'ai trouvé à l'aide de l'instruction sql, et intro_detail est le contenu du texte avec des étiquettes et des guillemets simples stockés dans le base de données

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

7. En fait, ce n'est pas difficile, je vous propose également quelques idées. Vous pouvez en discuter davantage. Je suis également novice.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Analyse du problème de rappel du framework thinkPHP s'arrimant à l'interface de paiement instantané d'Alipay

Basée sur Thinkphp et jquery Réaliser la fonction de multi-sélection ajax, de sélection inversée et de suppression de données

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