YaoDocs

外观

导航栏

使用富文本控件 ​

需要使用 0.10.3 版本的 Yao 程序

首先需要配置字段的编辑属性，把type设置成RichText

json
{
  "描述2": {
    "bind": "desc",
    "edit": {
      "type": "RichText",
      "props": {
        "UploadByFileApi": "/api/file/UploadByFileApi",
        "UploadByUrlApi": "/api/file/UploadByUrlApi"
      }
    }
  }
}

如果需要设置上传图片，还需要定义三个 Api。

  • 一个是用来在编辑器里选择图片用的。
  • 另外一个是当你粘贴图片时，会自动的上传图片用的。
  • 最后一个是下载图片用的。

在apis目录下创建一个api定义文件

文件：/apis/file.http.json

json
{
  "name": "文件上传",
  "version": "1.0.0",
  "description": "文件上传",
  "guard": "-",
  "group": "",
  "paths": [
    {
      "path": "/UploadByFileApi",
      "method": "POST",
      "process": "flows.image",
      "in": ["$file.image"],
      "out": {
        "status": 200,
        "type": "application/json"
      }
    },
    {
      "path": "/UploadByUrlApi",
      "method": "POST",
      "process": "flows.image2",
      "in": ["$payload.url"],
      "out": {
        "status": 200,
        "type": "application/json"
      }
    },
    {
      "path": "/downloadfile",
      "method": "GET",
      "process": "fs.system.Download",
      "in": ["$query.name"],
      "out": {
        "status": 200,
        "Headers": {
          "Content-Type": "{{type}}"
        },
        "body": "{{content}}"
      }
    }
  ]
}

为了上传处理图片，还需要定义两个流程处理器flows.image,flows.image2。

flows.image的功能是上传本地电脑上的图片，并返回文件地址

文件：/flows/image.flow.json

json
{
  "label": "upload file",
  "version": "1.0.0",
  "description": "upload image file",
  "nodes": [
    {
      "name": "upload",
      "process": "fs.system.upload",
      "script": "format",
      "args": ["{{$in.0}}"]
    }
  ],
  "output": {
    "success": 1,
    "file": {
      "url": "{{$res.upload}}"
    }
  }
}

还需要一个脚本返回上传的文件下载地址：

文件：/flows/image.format.js

js
function main(args, out, res) {
  return `/api/file/downloadfile?name=${out}`;
}

复制粘贴图片时调用的image2.flow.json。这里直接返回了url地址。

注意只支持复制粘贴互联网的图片地址，要是本地图片，需要自己手动上传图片。

/flows/image2.flow.json

json
{
  "label": "upload file",
  "version": "1.0.0",
  "description": "upload image file",
  "nodes": [],
  "output": {
    "success": 1,
    "file": {
      "url": "{{$in.0}}"
    }
  }
}

富文本控件生成的内容转换成 HTML ​

Yao富文本控件RichText内部封装了editorjs。控件保存的内容的格式是Json数组，数组中每一行数据都是一个对象，对象在单独的类型与内容。

如果我们的需求是把edjtorjs控件生成的内容转换成html格式内容，有一个现成的组件能帮我们实现。插件的源代码地址： https://github.com/pavittarx/editorjs-html

插件的功能逻辑比较简单，主要是循环查找json数组中的block对象，再根据规则替换成文本。对源代码作下简单的处理，转换成Yao处理器。

处理器源代码如下：RichText转换成HTML代码处理器