工具_tp5 使用百度富文本编辑器，百度富文本编辑器下载，富文本编辑器乱码解决

首先下载相匹配的下载PHP版本utf版富文本编辑器

链接: https://pan.baidu.com/s/1M4XuZgii9ffzmawQWUvotw 提取码: bgtu

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

把它放到public/static的目录下。

tp5使用百度富文本编辑器

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

<textarea name="journal_content" id="intro_detail" cols="20" rows="50"></textarea>

3.引入js，其中PUBLIC是我在config配置的路径

<script type="text/javascript" src="__STATIC__/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="__STATIC__/ueditor/ueditor.all.min.js"></script>
<script type="text/javascript" src="__STATIC__/ueditor/lang/zh-cn/zh-cn.js"></script>
<script>
	//初始化编辑器
	UE.getEditor('intro_detail',{  //intro_detail为要编辑的textarea的id
	    initialFrameWidth: 1300,  //初始化宽度
	    initialFrameHeight: 800,  //初始化高度
	     initialFrameWidth: null,  //自适应大小和滚动条
	    autoHeightEnabled: false, //自适应大小和滚动条
	});
</script>

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.控制器里面，可以用POST(‘表单的name’) 拿 到 数 据 ， 写 进 数 据 库 读 取 数 据 的 时 候 需 要 用htmlspecialcharsdecode(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');   //清空草稿箱

富文本编辑器乱码解决

引入语言包文件

<script type="text/javascript" src="__STATIC__/ueditor/lang/zh-cn/zh-cn.js"></script>

将zh-cn.js用记事本打开 另存为–>编码utf-8