php获取wangeditor技巧_wangEditor轻量级富文本PHP 本地图片采坑之旅

文章目录 [+]

优点：插件多，基本知足各种需求，类似贴吧中的回答界面。

缺陷：不再掩护，文档极少，利用并不普遍，图片只能上传到本地做事器，如果须要上传到其他做事器须要改动源码，较难堪办，加载速率慢。

php获取wangeditor技巧_wangEditor轻量级富文本PHP 本地图片采坑之旅

后放弃ueditor，紧张缘故原由是无法上传视频，连官网的demo都无法上传.....

（图片来自网络侵删）

末了找了个既轻量级又能知足需求的编辑器----wangEditor，而且是中文版的，方便阅读

编辑器官网：http://www.wangeditor.com/

现在进入正文：

1、代码示例如下。
把稳，以下代码中无需引用任何 CSS 文件！
！
！

<!DOCTYPE html><html><head> <meta charset=\"大众UTF-8\公众> <title>wangEditor demo</title></head><body> <div id=\"大众editor\"大众> <p>欢迎利用 <b>wangEditor</b> 富文本编辑器</p> </div>  <script type=\"大众text/javascript\"大众 src=\公众/wangEditor.min.js\公众></script> <script type=\"大众text/javascript\"大众> var E = window.wangEditor var editor = new E('#editor') // 或者 var editor = new E( document.getElementById('editor') ) editor.create() </script></body></html>

2、demo如下（菜单都可以自定义）

HTML部分：

<div id=\"大众editor\"大众> <p>欢迎利用 <b>wangEditor</b> 富文本编辑器</p> </div>

JS部分：

写到这大部分须要的功能以及都有了

我紧张先容的是上传本地图片须要把稳的

下面是配置上传本地图片

// 自定义菜单配置editor.customConfig.menus = ['head', // 标题'bold', // 粗体'fontSize', // 字号'fontName', // 字体'italic', // 斜体'underline', // 下划线'strikeThrough', // 删除线'foreColor', // 笔墨颜色'backColor', // 背景颜色'link', // 插入链接'justify', // 对齐办法'quote', // 引用'image', // 插入图片'video', // 插入视频'code', // 插入代码'undo', // 撤销'redo' // 重复];editor.customConfig.uploadImgServer = \"大众to_uploads.php\"大众; // 上传图片到做事器 editor.customConfig.uploadFileName = \公众image\公众; //文件名称也便是你在后台接管的参数值 editor.customConfig.uploadImgHeaders = { //header头信息 'Accept': 'text/x-json' } // 将图片大小限定为 3M editor.customConfig.uploadImgMaxSize = 3 1024 1024 //默认为5M editor.customConfig.uploadImgShowBase64 = false; // 利用 base64 保存图片 // editor.customConfig.customAlert = function (info) { //自己设置alert缺点信息 // // info 是须要提示的内容 // alert('自定义提示：' + '图片上传失落败，请重新上传') // }; editor.customConfig.debug = true; //是否开启Debug 默认为false 建议开启可以看到缺点 editor.customConfig.uploadImgTimeout = 3000; //图片在编辑器中回显 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) console.log(result) }, customInsert: function (insertImg, result, editor) { //console.log(result); // 图片上传并返回结果，自定义插入图片的事宜（而不是编辑器自动插入图片！
！
！
） // insertImg 是插入图片的函数，editor 是编辑器工具，result 是做事器端返回的结果 // 举例：如果上传图片成功后，做事器端返回的是 {url:'....'} 这种格式，即可这样插入图片： insertImg(result.data[0]); } }; editor.customConfig.showLinkImg = true; //是否开启网络图片，默认开启的。
//天生editor.create();

3、实在以前这么多代码重点是：第120行

// 配置做事器端地址

4、to_uploads.php代码

<?php //图片文件的天生 $savename = date('YmdHis',time()).mt_rand(0,9999).'.jpeg';//localResizeIMG压缩后的图片都是jpeg格式 //天生文件夹（做事器上传图片路径地址） $rpath ='/usr/share/nginx/html/proj/aycdj/admin'; //获取图片文件的名字 $fileName = $_FILES[\"大众file\"大众][\"大众name\"大众]; //图片保存的路径 $savepath = $rpath.'/uploads/'.$savename; $savepath1 = '/uploads/'.$savename; //天生一个URL获取图片的地址（xxxx：做事器域名 eg：http://www.baidu.com） $url = \"大众xxxxx/aycdj/admin\公众 . $savepath1; //返回数据。
wangeditor3 须要用到的数据 json格式的 $ret =move_uploaded_file($_FILES[\"大众image\"大众][\公众tmp_name\"大众],$savepath); $file_road=array('errno'=>0,'data'=>array($url)); echo json_encode($file_road);?>

须要把稳的是：末了接口返回的数据格式必须是数组或者json格式的，否则报错！
！

如有关于次编辑器的其他需求可以查看官网：https://www.kancloud.cn/wangfupeng/wangeditor3/332599

大家若有其他问题，欢迎大家留言哦！