unicodeToString('

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

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

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

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

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

解压缩上传到服务器

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

<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 引入工作完成。