使用说明

安装

React 低于 16

由于 React 版本低于 16，不支持 hooks，所以针对性的使用经典(classic)模式封装

npm install trust-rich-text@1
# or yarn add trust-rich-text@1
# or cnpm install trust-rich-text@1
# or pnpm add trust-rich-text@1

React 高于 16

npm install trust-rich-text
# or yarn add trust-rich-text
# or cnpm install trust-rich-text
# or pnpm add trust-rich-text

使用

编辑器

// 引入样式
import "trust-rich-text-editor/dist/style.css";
// 需要适配配置pxToRemOrVwOptions，如果不需要适配可以不用传入
const pxToRemOrVwOptions = { type: "rem" };
function App({ value, onChange }) {
  // React16及以上
  const editorRef = useRef(null);

  // 复制富文本内容
  const handleCopyHTML = (htmlStr: string) => {
    if (!htmlStr) return;
    console.log(htmlStr);
  };

  return (
    <TrustRichTextEditor
      value={value}
      ref={editorRef}
      onCopy={handleCopyHTML}
      onChange={debounce(onChange, 500)}
      pxToRemOrVwOptions={pxToRemOrVwOptions}
    />
  );
}

// 引入样式
import "trust-rich-text-editor/dist/style.css";
// 需要适配配置pxToRemOrVwOptions，如果不需要适配可以不用传入
const pxToRemOrVwOptions = { type: "rem" };
class App extends Component {
  editor = null;

  // 复制富文本内容
  handleCopyHTML = (htmlStr: string) => {
    if (!htmlStr) return;
    console.log(htmlStr);
  };

  render() {
    const { value, onChange } = this.props;
    return (
      <TrustRichTextEditor
        value={value}
        onCopy={this.handleCopyHTML}
        onChange={debounce(onChange, 500)}
        pxToRemOrVwOptions={pxToRemOrVwOptions}
        editorRef={editor => (this.editor = editor)}
      />
    );
  }
}

支持的参数

interface EditorProps {
  /** 富文本配置项 */
  /** 支持的参数["bold","italic","underline","text-emphasis","strike","header","size","line-height","color","background","align","list","image","link","video","indent","blockquote","script","better-table","copy"] */
  options?: "*" | string[];
  /** 回填的有效富文本字符串 */
  value: string;
  /** 是否禁用 */
  disabled?: boolean;
  /** 占位符 */
  placeholder?: string;
  /** 类名 */
  className?: string;
  /** 自定义字体，例如：[{ name: "楷体", value: "KaiTi" }] */
  fonts?: { name: string; value: string }[];
  /** 字体大小列表，例如：[{ label: "初号", value: "56px" }, { label: "小初", value: "48px" }] */
  sizeList?: { label: string; value: string }[];
  /** 图片上传类型，默认支持上传所有图片类型，默认值: ["image/*"]，举例：["image/png", "image/jpeg"]  */
  imageAccept?: string[];
  /** 图片上传方法，默认使用base64，如需上传OSS需要自行实现上传方法，返回值为图片地址  */
  uploadImage?: (file: File) => Promise<string>;
  /** 适配rem或vw, 默认不处理, 举例：{ type: 'rem', options: { rootValue: 37.5, unitPrecision: 4 } */
  pxToRemOrVwOptions?: Vw | Rem; // 目前仅支持rem适配
  /** 获取 html 文本内容 */
  onCopy?: (value: string) => void;
  onChange?: (value: string) => void;
}

渲染端

• 可以安装包，引入运行时样式

  import "trust-rich-text-editor/dist/runtime.css";
  function App({ newContent }) {
    return (
      <div
        className="rich-text-render"
        dangerouslySetInnerHTML={{ __html: newContent }}
      ></div>
    );
  }

• 可以直接将runtime.css文件复制到本地引入

rich-text-render样式类名是runtime.css文件中样式的作用域类名，请不要修改，除非将runtime.css文件复制到本地，同步修改

自定义字体

自定义字体实现的原理是给标签加上了一个字体类名，运行时需要用户自己实现字体类名和加载字体包，例如：

#editor {
  font-family: "FangSong";
  .ql-font-FangSong {
    font-family: "FangSong";
  }
}

如果不生效，请检查浏览器是否加载了此字体包，可参考https://developers.google.com/fonts/docs/getting_started?hl=zh-cn

依赖

仅依赖react、react-dom、quill，quill不依赖任何框架，原则上可以在任何框架内使用