집 > 기사 > 백엔드 개발 > thinkphp3.2 임베디드 Baidu 편집기 사용자 편집기 방법 예

thinkphp3.2 임베디드 Baidu 편집기 사용자 편집기 방법 예

小云云원래의: 2018-02-07 10:28:151294검색

이 기사는 주로 Baidu 편집기 ueditor에 포함된 thinkphp3.2의 예제 코드를 소개합니다. 관심 있는 분들은 이 내용이 모두에게 도움이 되기를 바랍니다.

이 기사에서는 Baidu 편집기 ueditor를 포함하고 모든 사람과 공유하기 위해 thinkphp3.2를 소개합니다. 이 기사가 여러분에게 도움이 되기를 바랍니다.

조판 요구 사항으로 인해 서식 있는 텍스트 편집기를 포함하고 텍스트를 출력해야 하는 경우가 많습니다. HTML 태그 콘텐츠가 포함되어 있습니다. 최근에 html 태그로 텍스트를 출력하고 서버에 저장할 수 있도록 텍스트 콘텐츠를 편집해야 하는 백엔드 관리 시스템을 작업했기 때문에 클라이언트는 서버에서 태그가 지정된 텍스트를 가져오기 위한 요청을 보냅니다. 저는 ueditor를 사용합니다.

공용 디렉토리에 넣습니다.

2 뷰에서 서식 있는 텍스트 편집기를 사용할 때 일반적으로 양식에 텍스트 영역을 추가합니다.

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

3 텍스트의 초기 값을 구성하려면 HTML 끝에 스크립트를 추가합니다. 여기서 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. view, 작은 따옴표를 넣습니다. 그냥 처리하세요

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 편집기 사용자 편집기 방법 예

관련 기사