ホームページ > 記事 > バックエンド開発 > thinkphp3.2 組み込み Baidu エディター ueditor メソッドの例

thinkphp3.2 組み込み Baidu エディター ueditor メソッドの例

小云云オリジナル: 2018-02-07 10:28:151300ブラウズ

この記事では、Baidu エディター ueditor に埋め込まれた thinkphp3.2 のサンプルコードを主に紹介します。興味がある方は、ぜひ参考にしてください。

この記事では、Baidu エディターの ueditor を埋め込むための thinkphp3.2 を紹介します。皆さんと共有してください。この記事が役立つことを願っています

組版要件により、リッチテキストエディターを埋め込んでテキストを出力する必要があることがよくありますHTMLタグの内容を含む。最近、HTML タグ付きのテキストを出力してサーバーに保存できるようにテキストコンテンツを編集する必要があるバックエンド管理システムに取り組んでいたため、クライアントはタグ付きテキストをサーバーから取得するリクエストを送信します。私は ueditor を使用します。

それを Public ディレクトリに置きます。

2. ビューでリッチテキストエディターを使用するときは、通常、フォームに textarea を追加します。

<form>  
<p><textarea name="intro_detail" id="intro_detail" cols="30" rows="10"></textarea> </p>
</form>

3. テキストの初期値を構成するスクリプトを追加します。 box 、ここで PUBLIC は config

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

4 で設定したパスです。通常、フォームにボタンを追加すると、フォーム内のすべてのデータがデフォルトで送信されますが、私のプロジェクトでは画像のアップロードも必要になります。ここでは ajax 非同期送信を使用しているので、質問は、jq の ("#intro_detail").val() の値を通じて送信される値を取得できるかということです。答えは「いいえ」です。私の方法は、 ueditor が提供するメソッドを使用して内部の値を取得し、それを入力に割り当てます。これにより、コントローラーで _POST(' name') を渡すことができます。次のように:

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

ajax 送信、

コードをコピーしますコードは次のとおりです:

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

一重引用符を使用してテキストボックス内のラベル付き入力をまとめ、入力に保存して送信します。一重引用符を使用しないと送信されません。ラベルの場合は、データを取得するときに一重引用符を削除するだけで自動的に除外されます。

$.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("参数错误");
            }
          }
        });

5. コントローラーでは、$_POST ('フォームの名前') を使用してデータを取得し、データベースに書き込むことができます

$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);

6。ビュー、一重引用符を入れます。そのまま処理してください

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

$resultはSQL文を使用して見つけたデータベースの内容であり、intro_detailはデータベースに保存されているラベルと一重引用符を含むテキストの内容です

$user = M(&#39;game&#39;);
    $result = $user->field(）;

7。実際、それは難しいことではありません。私も皆さんにいくつかのアイデアを提供しているので、私も初心者です。

thinkphp3.2 組み込み Baidu エディター ueditor メソッドの例

関連記事