富文本编辑器 wangEditor 使用

软件特点

• 支持 npm 直接引用
• 支持响应式，自动缩放
• 没有官方的实例销毁方案，项目中使用的是作者在github给出的临时方案
• 支持一个页面多个编辑器
• 不支持一个页面多个编辑器同时使用地图
• 后端需要进行相应配置

---

安装 wangEditor

npm install wangeditor --save

---

代码引入 wangEditor (vue环境)

---

#account--editor {
    width: 100%;
    min-height: 330px;
    height: auto;
}

---

---

图片上传 server 端配置

官网 php 代码示例

/**
 * 图片上传 图片上传注意上传目录的权限
 */
public function editorUploadImg()
{   
    $upload_ret = D('Upload', 'Service')->uploadImg('_img'); 
    echo 'http://'.$_SERVER['HTTP_HOST'].DIRECTORY_SEPARATOR.$upload_ret;
    exit();
}

• 后端注意上传的目录权限，可能需要777

---

排错与解决方案

• 一个页面多个编辑器
• 图片上传配置说明
• 图片上传出错时的解决步骤
• 图片上传跨域时的后台配置