富文本编辑器wangEditor的使用

最近在研究富文本编辑器，于是在网上搜到了一些比较好用的，其中之一就是wangEditor。其个人网站上的教程(wangEditor3使用手册)已经很详细了，当然关于图片上传的地方，还是需要记录一下方便以后使用。
简单的地方直接上代码吧，这些是最基本的配置，按照教程来就可以：

<script src="../../public/statics/wangEditor3.0.10/release/wangEditor.min.js"></script>
<script type="text/javascript">
    var E = window.wangEditor
    var editor = new E('#editor')
    editor.customConfig.menus = [
        'head',  // 标题
        'strikeThrough',  // 删除线
        'link',  // 插入链接
        'image',  // 插入图片
        'list',  // 列表
        'justify',  // 对齐方式
        'quote',  // 引用
        'emoticon',  // 表情
        'bold',  // 粗体
        'italic',  // 斜体
        'underline',  // 下划线
        'table',  // 表格
        'code',  // 插入代码
        'undo',  // 撤销
    ]
    editor.customConfig.onchange = function (html) {
        // html 即变化之后的内容
        //alert("已保存")
    }

    // 关闭粘贴样式的过滤
    editor.customConfig.pasteFilterStyle = false

    editor.customConfig.linkImgCallback = function (url) {
        //alert(url) // url 即插入图片的地址
    }

    // 隐藏“网络图片”tab

    editor.create()
</script>

下面就是关于图片上传的部分，当然这些代码要放在editor.create()这句之前：

    editor.customConfig.uploadImgServer = 'upload_file.php'  // 上传图片到服务器处理的php脚本
    editor.customConfig.uploadFileName = 'file'
    editor.customConfig.uploadImgMaxLength = 10

    editor.customConfig.uploadImgHooks = {
        before: function (xhr, editor, files) {
        },
        success: function (xhr, editor, result) {
            // 图片上传并返回结果，图片插入成功之后触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
            alert("图片上传成功！");
        },
        fail: function (xhr, editor, result) {
            // 图片上传并返回结果，但图片插入错误时触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
        },
        error: function (xhr, editor) {
            // 图片上传出错时触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
        },
        timeout: function (xhr, editor) {
            // 图片上传超时时触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
        }
    }

其中最重要的两句代码就是：

editor.customConfig.uploadImgServer = 'upload_file.php'  // 上传图片到服务器处理的php脚本
editor.customConfig.uploadFileName = 'file'

当上传图片时，我们打开审查元素，选择network，查看文件的加载情况，可以看到它成功地访问到了服务器的代码：upload_file.php
这里写图片描述

接下来点进去：
这里写图片描述

可以看到上传的图片的name为”file”，也就是之前配置中写的那个editor.customConfig.uploadFileName = 'file'，那么需要注意的是，在后台的服务器代码中就是根据这个获取的，

<?php
if ((($_FILES["file"]["type"] == "image/gif")
|| ($_FILES["file"]["type"] == "image/jpeg")
|| ($_FILES["file"]["type"] == "image/png")
|| ($_FILES["file"]["type"] == "image/pjpeg"))
&& ($_FILES["file"]["size"] < 5*1024*1024))
{
  if ($_FILES["file"]["error"] > 0)
    {
    echo "Return Code: " . $_FILES["file"]["error"] . "<br />";
    }
  else
    {
    if (file_exists("../../upload/images/content_img/" . $_FILES["file"]["name"]))
      {
      echo $_FILES["file"]["name"] . " already exists. ";
      }
    else
      {
      move_uploaded_file($_FILES["file"]["tmp_name"],
      "../../upload/images/content_img/" . $_FILES["file"]["name"]);
      //echo "Stored in: " . "upload/images/content_img/" . $_FILES["file"]["name"];

      $picAddr = Array("../../upload/images/content_img/" . $_FILES["file"]["name"]);
      $result = Array('errno' => 0, 'data' => $picAddr);
      echo json_encode($result);
      }
    }
}
else
{
  //echo "Invalid file";
  $picAddr = Array("../../upload/images/content_img/" . $_FILES["file"]["name"]);
  $result = Array('errno' => 1, 'data' => $picAddr);
  echo json_encode($result);
}

?>

这是后台upload_file.php文件，$_FILES["file"]这个地方的要用file来获取，与前面的对应起来，否组就会获取不到，其次就是根据官网的说明，必须返回json格式如下：
这里写图片描述

查看网站的返回：
这里写图片描述

像这样的才能成功上传，在php中，就是这段代码构造的json格式：

$picAddr = Array("../../upload/images/content_img/" . $_FILES["file"]["name"]);
$result = Array('errno' => 0, 'data' => $picAddr);
echo json_encode($result);

所以总结一下，有如下几个要点：

在js中写下：editor.customConfig.uploadImgServer = 'upload_file.php'表示后台处理的文件
js中的 editor.customConfig.uploadFileName = 'file'要与后台中的$_FILES["file"]对应起来
返回正确格式的json字符串

富文本编辑器wangEditor的使用

猜你喜欢