The use of rich text editor wangEditor

I've been researching rich text editors recently, so I found some useful ones on the Internet, one of which is wangEditor. The tutorial on his personal website ( wangEditor3 manual ) is very detailed. Of course, about the place where pictures are uploaded, you still need to record them for future use.
Simply put the code directly, these are the most basic configurations, just follow the tutorial:

<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>

The following is the part about image upload, of course, these codes should be placed editor.create()before this sentence:

    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 是编辑器对象
        }
    }

The two most important lines of code are:

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

When uploading an image, we open the inspect element, select network, check the loading of the file, and we can see that it successfully accessed the code of the server: upload_file.php

Next click in:

You can see that the name of the uploaded image is "file", which is the one written in the previous configuration. It editor.customConfig.uploadFileName = 'file'should be noted that the server code in the background is based on this acquisition.

<?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);
}

?>

This is the background upload_file.php file. The file in $_FILES["file"]this place is used to obtain it. It corresponds to the previous one. Otherwise, the group will not be able to obtain it. Secondly, according to the instructions on the official website, the json format must be returned as follows:

Check out the site's return:

Only like this can be successfully uploaded, in php, it is the json format constructed by this code:

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

So to sum up, here are the main points:

• Write in js: editor.customConfig.uploadImgServer = 'upload_file.php'file representing background processing
• js editor.customConfig.uploadFileName = 'file'in the $_FILES["file"]corresponding to the background
• returns a correctly formatted json string