tp框架中使用 百度富文本编辑器

1.首先下载相匹配的下载PHP版本utf版富文本编辑器
https://www.jb51.net/codes/56667.html

官方网文档说明
http://fex.baidu.com/ueditor/#dev-bale_width_grunt

把它放到Public的目录下。

2.我们在视图view上,要用到富文本编辑器的时候，一般都是在表单加入textarea,

 <div class="layui-form-item layui-form-text" > 
             <div class="layui-input-block">
                <p><textarea name="journal_content" id="intro_detail" cols="20" rows="50"></textarea> </p>
            </div>
        </div>

3.引入js，其中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>
<script type="text/javascript" src="__PUBLIC__/ueditor/lang/zh-cn/zh-cn.js"></script>

//初始化编辑器
    UE.getEditor('intro_detail',{  //intro_detail为要编辑的textarea的id
        initialFrameWidth: 1300,  //初始化宽度
        initialFrameHeight: 800,  //初始化高度
         initialFrameWidth: null,  //自适应大小和滚动条
        autoHeightEnabled: false, //自适应大小和滚动条
      });

4.ajax提交，代码如下:

  let conText=UE.getEditor('intro_detail').getContent();//获取富文本内容
    postdata.journal_content = conText;
    $.ajax({
              type: "POST",
              url: "  ",
              dataType: 'json',
              processData: false,
              contentType: false,
              cache: false,
              data: postdata,
              success:function(data){
                if(data.success){
                  window.location.reload();//重新刷新一次
                }
                else{
                  alert("参数错误");
                }
         }
    });
//或者
 $.post(saveAjaxUrl,postdata,function (response) {
        layer.close(loading);
                if (response.errcode == 0) {
                    layer.closeAll();
                    layer.msg(response.msg);
                    reloadTable();
                } else {
                    layer.alert(response.msg);
                }
            }, "json" );

5.控制器里面，可以用${}_{P}OST(‘表单的nam{e}^{\prime })拿到数据，写进数据库读取数据的时候需要用htmlspecialchar{s}_{d}ecode($str);函数转义一下

 $row['journal_content'] = htmlspecialchars_decode($row['journal_content']);

6.富文本赋值

$(function(){
   var content = jsonData.journal_content;                  
   var ue =  UE.getEditor('intro_detail');
    setTimeout(function(){
  		 UE.getEditor('content').setContent(content,false)
	  },200);//富文本加载会有时延，这样可以保证内容及时赋值上去了
 });     

7.富文本常用方法

  //实例化编辑器到id为 container 的 dom 容器上：
var ue = UE.getEditor('container');
//设置编辑器内容
ue.ready(function() {
    ue.setContent(xx);
});

//追加编辑器内容
ue.ready(function() {
    ue.setContent(xx, true);
});

//获取编辑器html内容
ue.ready(function() {
    var html = ue.getContent();
});

ue.getContentTxt(); //获取纯文本内容

ue.getPlainTxt();  //获取保留格式的文本内容

ue.getContentTxt(); //获取纯文本内容

ue.hasContents();//判断编辑器是否有内容

ue.focus();//让编辑器获得焦点

ue.blur(); //让编辑器失去焦点

ue.isFocus();  //判断编辑器是否获得焦点

ue.setDisabled(); //设置当前编辑区域不可编辑

ue.setEnabled();   //设置当前编辑区域可以编辑

ue.setHide();   //隐藏编辑器

ue.setShow();  //显示编辑器

ue.selection.getText(); //获得当前选中的文本

//常用命令：
ue.execCommand('inserthtml', '<span>hello!</span>');   //在当前光标位置插入html内容

//设置当前选区文本格式：
ue.execCommand('bold'); //加粗
ue.execCommand('italic'); //加斜线
ue.execCommand('subscript'); //设置上标
ue.execCommand('supscript'); //设置下标
ue.execCommand('forecolor', '#FF0000'); //设置字体颜色
ue.execCommand('backcolor', '#0000FF'); //设置字体背景颜色


ue.execCommand('undo'); //回退编辑器内容

ue.execCommand('redo');  //撤销回退编辑器内容

ue.execCommand('source'); //切换源码和可视化编辑模式

ue.execCommand('selectall');//选中所有内容

ue.execCommand('cleardoc'); //清空内容

ue.execCommand('drafts');  //读取草稿箱

ue.execCommand('clearlocaldata');   //清空草稿箱