wangeditor 上传图片php配置

要在 wangeditor 中上传图片，需要在后端进行相应的配置。以下是 PHP 配置的步骤：

1. 在后端新建一个 PHP 文件，例如 upload.php。
2. 在 upload.php 中，使用 $_FILES 获取上传的文件信息。
3. 将上传的文件移动到指定的目录中，例如 uploads 目录。
4. 返回一个 JSON 格式的数据，包含上传成功后的文件路径等信息。

以下是一个简单的 PHP 上传图片的示例代码：

<?php
$targetDir = "uploads/";
$targetFile = $targetDir . basename($_FILES["file"]["name"]);if (move_uploaded_file($_FILES["file"]["tmp_name"], $targetFile)) {
    $data = array(
        "errno" => 0,
        "data" => array("url" => $targetFile)
    );
} else {
    $data = array(
        "errno" => 1,
        "data" => array()
    );
}
echo json_encode($data);
?>

在 wangeditor 中，需要在配置中指定上传图片的后端接口地址，例如：

editor.config.uploadImgServer = '/upload.php';

相关问题

wangeditor上传图片

WangEditor 提供了默认的上传图片功能，可以在编辑器中直接插入本地图片或者通过远程 URL 地址插入图片。WangEditor 上传图片的具体步骤如下：

1. 在 HTML 文件中引入 WangEditor 和上传图片的处理文件：

<!-- 引入 wangEditor.min.js -->
<script type="text/javascript" src="./wangEditor.min.js"></script>
<!-- 引入 jquery -->
<script type="text/javascript" src="./jquery.min.js"></script>
<!-- 引入 wangEditor.css -->
<link rel="stylesheet" type="text/css" href="./wangEditor.css">
<!-- 引入上传图片的处理文件 -->
<script type="text/javascript" src="./upload.php"></script>

2. 在页面中创建一个 div 元素，并使用 WangEditor 初始化编辑器：

<!-- 创建一个 div 元素 -->
<div id="editor"></div>

<!-- 初始化 WangEditor -->
<script type="text/javascript">
    // 创建一个编辑器对象
    var editor = new wangEditor('#editor');
    // 配置菜单栏和其他选项
    editor.config.menus = [
        'bold',
        'italic',
        'underline',
        'strikethrough',
        'eraser',
        'forecolor',
        'bgcolor',
        'quote',
        'fontfamily',
        'fontsize',
        'head',
        'unorderlist',
        'orderlist',
        'alignleft',
        'aligncenter',
        'alignright',
        'link',
        'unlink',
        'table',
        'img',
        'undo',
        'redo',
        'fullscreen'
    ];
    editor.config.uploadImgServer = '/upload.php';   // 设置上传图片的处理文件
    editor.config.uploadImgMaxSize = 3 * 1024 * 1024; // 设置上传图片的最大大小为 3MB
    editor.create();    // 创建编辑器
</script>

3. 在上传图片的处理文件中实现图片上传的功能。在上传成功后，返回一个 JSON 格式的数据，其中包含了图片的 URL 地址。例如：

<?php
if ($_FILES['file']['error'] > 0) {
    echo json_encode(array('errno' => 1, 'errmsg' => '上传失败'));
} else {
    $filename = $_FILES['file']['name'];
    $fileext = substr($filename, strrpos($filename, '.') + 1);
    $newfilename = date('YmdHis') . '.' . $fileext;
    move_uploaded_file($_FILES['file']['tmp_name'], './uploads/' . $newfilename);
    $url = 'http://' . $_SERVER['HTTP_HOST'] . '/uploads/' . $newfilename;
    echo json_encode(array('errno' => 0, 'data' => array($url)));
}
?>

以上就是使用 WangEditor 上传图片的基本步骤，具体实现可能需要根据实际情况进行调整。

wangeditor上传图片后自动插入图片

要实现这个功能，需要用到 WangEditor 的上传图片插件和相应的后端接口。具体步骤如下：

1. 在前端页面中引入 WangEditor 并配置上传图片插件，可以参考 WangEditor 官方文档。

2. 编写后端接口，接收前端上传的图片并返回图片的 URL。可以使用任何后端语言来实现该接口，例如 PHP、Java、Python 等。

3. 在前端页面中监听图片上传事件，在上传成功后将返回的图片 URL 插入到编辑器中。

下面是一个简单的示例代码：

// 初始化编辑器
const editor = new wangEditor('#editor')
editor.config.uploadImgServer = '/upload' // 后端接口地址
editor.config.uploadImgHeaders = {
  // 可以设置请求头，例如 token
  Authorization: 'Bearer ' + token
}
editor.create()

// 监听图片上传事件
editor.onchange = function () {
  const imgs = editor.$textElem.find('img')
  imgs.each(function () {
    const img = $(this)
    if (!img.data('uploaded')) {
      // 上传图片
      $.post('/upload', { file: img.attr('src') }, function (resp) {
        // 插入图片 URL
        img.attr('src', resp.url)
        img.data('uploaded', true)
      })
    }
  })
}

在上面的代码中，我们使用 `editor.onchange` 监听编辑器内容改变事件，每次插入图片后都会触发该事件。然后遍历所有图片元素，如果该图片还没有上传过，则将其上传到后端接口，并在上传成功后将返回的图片 URL 插入到编辑器中。注意要使用 `img.data('uploaded', true)` 标记已上传过的图片，避免重复上传。