ThinkPHP使⽤wangEditor超富⽂本
1、wangEditor：基于javascript和css开发的 Web富⽂本编辑器，轻量、简洁、易⽤、开源免费
2、本⽂应⽤html+框架Thinkphp3.0；
3、前端：
准备⽂件：
html⽂件引⽤，我这⾥使⽤的是textarea获取富⽂本内容，官⽅说明：wangEditor 从v3版本开始不⽀持 textarea ，但是可以通过onchange来实现 textarea 中提交富⽂本内容。
<!--超富⽂本开始-->
<script src="__PUBLIC__/smalldoc/wenben/jquery.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/smalldoc/wenben/wangEditor.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/smalldoc/wenben/wangEditor-fullscreen-plugin.js"></script> <!--超富⽂本全屏-->
<link href="__PUBLIC__/smalldoc/wenben/wangEditor-fullscreen-plugin.css" rel="stylesheet" />
<script type="text/javascript">
var E = window.wangEditor
var editor = new E('#contents')
var $text1 = $('#text1')
hange = function (html) {
// 监控变化，同步更新到 textarea
$text1.val(html)
}
//图⽚上传服务器开始
editor.customConfig.uploadImgServer = "__URL__/uploads"; // 上传图⽚到服务器
editor.customConfig.uploadFileName = "file"; //⽂件名称也就是你在后台接受的参数值
editor.customConfig.uploadImgHeaders = { //header头信息
'Accept': 'text/x-json'
}
// 将图⽚⼤⼩限制为 3M
editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024 //默认为5M
editor.customConfig.uploadImgMaxLength = 20
editor.customConfig.uploadImgShowBase64 = false; // 使⽤ base64 保存图⽚
editor.customConfig.customAlert = function (info) { //⾃⼰设置alert错误信息
// info 是需要提⽰的内容
alert('⾃定义提⽰：' + '图⽚上传失败，请重新上传')
};
editor.customConfig.debug = true; //是否开启Debug 默认为false 建议开启可以看到错误
editor.customConfig.uploadImgHooks = {
error: function (xhr, editor) {
alert("2：" + xhr + "请查看你的json格式是否正确，图⽚并没有上传");
// 图⽚上传出错时触发如果是这块报错就说明⽂件没有上传上去，直接看⾃⼰的json信息。是否正确
// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
},
fail: function (xhr, editor, result) {
// 如果在这出现的错误就说明图⽚上传成功了但是没有回显在编辑器中，我在这做的是在原有的json 中添加了
// ⼀个url的key（参数）这个参数在 customInsert也⽤到
alert("1：" + xhr + "请查看你的json格式是否正确，图⽚上传了，但是并没有回显");
},
success:function(xhr, editor, result){
//成功不需要alert 当然你可以使⽤console.log 查看⾃⼰的成功json情况
console.log(result)
// insertImg('ss0.bdstatic/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png')
},
customInsert: function (insertImg, result, editor) {
//console.log(result);
// 图⽚上传并返回结果，⾃定义插⼊图⽚的事件（⽽不是编辑器⾃动插⼊图⽚）
// insertImg 是插⼊图⽚的函数，editor 是编辑器对象，result 是服务器端返回的结果
// 举例：假如上传图⽚成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插⼊图⽚：
insertImg(result.url);
}
};
//图⽚上传服务器结束
//editor.customConfig.uploadImgShowBase64 = false // 使⽤ base64 保存图⽚
editor.customConfig.showLinkImg = true //默认开启⽹络图⽚
E.fullscreen.init('#contents'); // 全屏
asp富文本编辑器// 初始化 textarea 的值
$text1.html())
</script>
<!--超富⽂本结束-->
4、后端：
对应的Action⾥⽅法，因为笔者没有想到更好的办法通过编辑⾥回车或右上⾓图⽚删除有效的删除服务器上的图⽚，所有额外数据库⾥做了个图库表： public function uploads(){
parent::YanZheng('loginemails','__APP__/Index/renew'); //验证⾮法⽤户进出页⾯
import('ORG.Net.UploadFile');
$upload = new UploadFile(); // 实例化上传类
$upload->maxSize = 3145728; // 设置附件上传⼤⼩
$upload->allowExts = array('jpg', 'gif', 'png', 'jpeg'); // 设置附件上传类型
$upload->saveRule = date('YmdHis',time()).mt_rand(0,9999);//
$upload->uploadReplace = false; // 存在同名⽂件是否是覆盖
$upload->savePath = './Uploads/docpic/';
if (!$upload->upload()) {
$this->error($upload->getErrorMsg());
} else {
$info = $upload->getUploadFileInfo();
//添加图⽚到图库表⾥
$Person=new PersonModel();
$condition[$Person->_id]=session('loginemails');
$Personlist=$Person->where($condition)->find();
$Docpic=new DocpicModel();
$datas["Docpi_url"]=$info[0]['savename'];
$datas["Docpi_person"]=$Personlist['Person_name'];
$datas["Docpi_jifang"]=$Personlist['Person_bumen'];
$datas["Docpi_date"]=date('Y-m-d H:i',time());
// 写⼊⽤户数据到数据库
$Docpic->add($datas);
}
$tempshouquanfile=$info[0]['savename'];
$url = "192.168.100.1:1001/Uploads/docpic/" . $tempshouquanfile;
$data["errno"] = 0;
$data["data"] = $savepath;
$data['url'] = "{$url}";
move_uploaded_file($_FILES["file"]["tmp_name"],$savepath);//可有可⽆的⼀段，也就是图⽚⽂件移动。
echo json_encode($data);//返回数据
}
5、效果：
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论