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 O S T ( ‘ 表 单 的 n a m e ′ ) 拿 到 数 据 , 写 进 数 据 库 读 取 数 据 的 时 候 需 要 用 h t m l s p e c i a l c h a r s d e c o d e ( _POST(‘表单的name')拿到数据,写进数据库 读取数据的时候需要用htmlspecialchars_decode( 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'); //清空草稿箱