有个项目需求把后台的富文本编辑器从 tinymce 换成 ueditor。

因为之前没有实际接过ueditor。所以记录一下开发过程。

首先面向 CHATGPT 编程。得到了如下结果。

根据 gpt 的指引。首先 先去 Github 下载了一个  ueditor 的 PHP 版本

https://github.com/fex-team/ueditor/releases/tag/v1.4.3.3

ueditor1_4_3_3-utf8-php.zip

解压缩 上传到 服务器

再根据实际情况修改文件路径。放到后台页面 引入文件。

<link rel="stylesheet" type="text/css" href="ueditor/ueditor.css">
<script type="text/javascript" src="ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="ueditor/ueditor.all.js"></script>

再把之前  tinymce 使用的 textarea 修改成 ueditor 需要的内容。

<textarea id="editor" name="editor"></textarea>

后台 是用  PHP + HTML VUE3  写的。

所以 在创建变量时 我选择了这样的写法。

const editor = ref(null);

const createTinymce = () => {
  editor.value = new UE.ui.Editor()
  editor.value.render("editor");
}

onMounted(()=>{
  createTinymce();
})

目前 前端工作 做完了。现在对接 图片文件上传的功能。

在 ueditor 的 php 文件夹里 新建一个 upload 的 文件夹。并且给 www 写权限。

测试图片可以成功上传。

目前 基本的 引入工作完成了。

接下来 还有一个需求。 图片需要传到 七牛云。

这就需要修改PHP 的 代码了。

我选择了一种比较简单粗暴的办法。

在ueditor上传之后，读取文件地址。然后上传到 七牛。 上传成功之后，删掉 ueditor 上传的文件。

所以我对 ueditor/php/action_upload.php  文件 进行了修改。

use Qiniu\Auth;
use Qiniu\Storage\UploadManager;

..... 
function qiNiuUpload($filePath, $file_name = '')
{
  require __DIR__ . '/qiniu/php-sdk-7.10.1/vendor/autoload.php';
  $accessKey = 'xxxxx';
  $secretKey = 'xxxxx';
  $auth = new Auth($accessKey, $secretKey);
  $bucket = 'xxxxx';
  $key = date('Ymd') . '/' . $file_name;
  $token = $auth->uploadToken($bucket, $key);
  $uploadMgr = new UploadManager();
  list($ret, $err) = $uploadMgr->putFile($token, $key, $filePath, null, 'application/octet-stream', true, null, 'v2', 3 * 1024 * 1024);
  if ($err !== null) {
    return false;
  } else {
    return $key;
  }
}

$callback = $up->getFileInfo();
if ($callback['state'] == 'SUCCESS') {
  $fp = __DIR__ . '/../../..' . $callback['url'];
  $qiniu_res = qiNiuUpload($fp, $callback['title']);
  unlink($fp);
  if (!!$qiniu_res) {
    $u = '七牛基础URL' . $qiniu_res;
    $callback['url'] = $u;
  } else {
    $callback['status'] = '七牛上传失败';
  }
}

return json_encode($callback);

测试 图片上传功能正常。并且返回了 七牛的 URL 。

最后调整保存读取的函数。

// 内容读取
editor.value.getContent();
// 文字读取
editor.value.getContentTxt();

测试可以正常保存。

ueditor 引入工作完成。