TP5.1框架中百度富⽂本编辑器UEditor的使⽤
在实际项⽬开发中最常使⽤到的⼯具之⼀就是富⽂本编辑器，使⽤富⽂本编辑器可以实现所见即所得的效果，且所有富⽂本编辑器⾥的内容(包括图⽚，视频，⾳乐等⽂件)全部可以带格式的存⼊数据库中且只需占⽤⼀个字段。当前市⾯上有许多可供选择的富⽂本编辑器，虽然百度的UEditor已在2016年即停⽌更新且界⾯风格较⽼，但是其属性，功能⼗分强⼤，所以仍是当前富⽂本编辑器⾥最好的选择之⼀。
现在就开始在ThinkPHP5.1框架中使⽤百度富⽂本编辑器UEditor
⾸先我们需要进⼊UEditor的官⽹下载所需资源
这⾥我选择的是1.4.3.3的PHP版本，编码格式为UTF-8。
下载得到的是⼀个压缩包，⾥⾯只有⼀个名为utf8-php的⽂件夹，我们将此解压出来并重命名为ueditor并放⼊TP5.1框架中的public⽬录下的static⽬录中，⽬录结构如图：
⾄此UEditor已经整合到项⽬中了，接下来打开我们需要使⽤UEditor的页⾯引⼊UEditor所需的JS⽂件
<script type="text/javascript" src="/static/fig.js"></script>
<script type="text/javascript" src="/static/ueditor/ueditor.all.js"></script>
<script type="text/javascript" src="/static/ueditor/lang/zh-cn/zh-cn.js"></script>
如果ueditor⽂件夹⽬录结构和我⼀样的话这样引⼊即可，否则换成你⾃⼰的⽬录也没问题。
然后我们需要添加⼀个⽂本域，并为它的id和name属性赋值：
<div class="layui-form-item">
<label class="layui-form-label"><span class="x-red">*</span>内容</label>
<div class="layui-input-inline">
<textarea id="content"name="content"rows="10"></textarea>
</div>
</div>
接下来只需在JS中将⽂本域渲染成UEditor即可，JS代码如下：
<script type="text/javascript">
var ue =UE.getEditor('content',{
initialFrameWidth:900,//初始化宽度
initialFrameHeight:300,//初始化⾼度
maximumWords:1000,//最⼤长度限制
autoHeightEnabled:false,//禁⽌⾃动长⾼
autoFloatEnabled:false,//禁⽌⼯具条漂浮
zIndex:"0"
});
</script>
getEditor⽅法中第⼀个属性为⽂本域的id值，第⼆个属性为独⽴设置，如果想要修改全局设置需要打开相应⽬录下的fig.js⽂件，在这⾥可以查看并修改UEditor的全局默认属性。
接下来打开页⾯测试⼀下就可以看到⽂本域已经被渲染成了UEditor，我们可以在⾥⾯随意写⼊格式⽂本包括⽂件的上传，这⾥为了测试随意写⼊了⼀些内容：
既然富⽂本编辑器⾥的内容会以html格式存放在数据表中，那么上传的图⽚等⽂件必定有⼀个src⽬录，那么这个⽬录在哪呢？
我们可以打开ueditor中php⽂件夹的config.json可以看到上传各个⽂件的设置，这⾥以图⽚为例可以看到图⽚的上传⽬录等各项设置：
之后我们打开此⽬录可以查看到刚刚添加到UEditor中的图⽚被复制了⼀份并以配置项中的规则重命名了，在之后存放到数据库中此img标签的src值即是此路径：
⾄此在页⾯中引⽤百度富⽂本编辑器UEditor并配置操作已完成，如果想在TP5.1中得到实际应⽤请往下看
在项⽬中使⽤UEditor往往是应⽤于需要保存带有多种元素的内容，⽐如⽹页中留⾔，发布⽂章，活动详情等需要丰富元素的功能都会有需要，之前也说了只要使⽤了富⽂本编辑器即可达到将输⼊的内容原样保存，在需要的时候也可以原样输出的效果。
所以这⾥以实际的功能模块为例简单说明⼀下在TP5.1中如何更好应⽤UEditor。
这⾥功能模块将以后台发布⽂章、查看⽂章、编辑⽂章为例：
以下代码展⽰将只列出部分代码⽚段，页⾯其他元素代码略过
jquery框架使用⾸先需要⼀个⽂章发布功能，那么⾸先就需要完善⼀下页⾯，UEditor的应⽤前⾯已经说过了，页⾯其他元素请⼤家随意添加，这⾥放出的是我添加好其他表单元素的发布⽂章表单页效果图：
这⾥注意的是直接使⽤表单序列化的话⽆法获取UEditor的内容，这⾥要使⽤UEditor的JS⽅法获取⼀下内容，这⾥贴出获取内容和ajax上传的JS代码⽚段：
注意最重要的两⾏是
var content = ue.getContent();
formData.append(“content”,content);
这⾥的ue是你渲染⽂本域时的命名
ajax回调可以使⽤你们⾃⼰的JS，这⾥展⽰的项⽬整体使⽤的是layui 1 的JS，如有需要也可以⾃⼰到官⽹下载
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论