开发时经常会用到富文本,今天记录这个wangEditor也是一个非常好用的富文本插件。直接上图使用方法:
1、先是下载插件,这个大家就自行到百度上下载吧
2、引入插件文件
3、然后就在js代码里面定义富文本编辑器了
<script type="text/javascript">
var E = = window.wangEditor
r
var editor = new E('#editor')
// 或者 var editor = new E( E( document.getElementByItById('editor') )
editor.customConfig.uploadImgServServer = '上传图片方法url';
editor.customConfig.uploadFileNameName = '上传图片文件夹名';
editor.customConfig.uploadImgMaxSMaxSize = 图片限制大小;
editor.customConfig.uploadImgHeadHeaders = {
'Accept' : 'multipart/form-data'
};
editor.customConfig.debug=tru=true;
editor.create()
()
var editor_value=$('.content').html();
editor.txt.html(edi(editor_value);
</script>
其中uploadImgServer就是上传文本内容中图片的接口,uploadFileName就是根目录下上传图片的文件夹名了,uploadImgMaxSize就是定义上传图片的最大大小
这些配置填写好后,在需要插入富文本框的地方加入如下代码:
<div id="editor"></div>
div中的id一定要是editor,然后在js里面写editor.create()就可以创建富文本框了,效果如下:
至于上传图片的方法,也贴出来吧。这里要注意的是,返回给富文本的参数一定要正确!也就是error要为0,而data就是图片的url
function uploadimg(){
global $host_url;
//上传图片
$re=array('errno'=>0,'data'=>"");
$allow_file_types = array('jpg','png','gif','jpeg');
$upload_dir='data/upload/activity_img/';
if ($_FILES['activity_img']['name'] && $_FILES['activity_img']['size'] > 0) {
/* 检查文件合法性 */
if (!get_file_suffix($_FILES['activity_img']['name'], $allow_file_types)) {
echo('图片格式有误,可上传的图片格式有:jpg,png,jpeg,gif!');
}
/* 处理 */
$name = date('YmdH');
for ($i = 0; $i < 6; $i++) {
$name .= chr(mt_rand(97, 122));
}
$name .= '.' . end(explode('.', $_FILES['activity_img']['name']));
$target = ROOT_PATH . $upload_dir . $name;
//上传成功
if (move_upload_file($_FILES['activity_img']['tmp_name'], $target)) {
$big_img = $upload_dir . $name;
$re['data'] = $target;
$data=array();
$data[]=$host_url.$big_img;
$re['data']=$data;
die(json_encode($re));
}else{
$re['statusCode']='-1';
$re['statusMsg']='上传失败';
die(json_encode($re));
}
}
}
就这样富文本的功能也基本实现出来了,在富文本中上传图片也会在文本框中显示,wangEditor的使用基本就这样了。