zoukankan      html  css  js  c++  java
  • [FE] RichText 富文本工具Prosemirror

    Docs(官方文档)

    https://prosemirror.net/docs/

    RichText 富文本问题

    1. 可支持多少种格式
    2. 如何输入
    3. 如何渲染
    4. 如何保存历史
    5. 是否支持多人实时更新文本交互

    Basic(基本工具包)

    Prosemirror State
    记录当前富文本的所有状态,仅能通过Transaction更新
    类:

    class EditorState{
          doc:Node, // 文本的主节点
          selection: Selection, // 文本的选择
          storedMarks: Mark[], // 当前状态输入的所有标记,会被应用到下次输入的字符
          schema: Schema, // 当前文档的架构,例如paragraph,doc,text,list-node等等
          plugins: Plugin[], // 当前文本的插件
          apply: (tr)=>{}, // 使用当前的状态执行某个变换生成一个新的状态
          applyTransation: (rootTr)=>{}, // TODO: 暂时未知
          tr: Transaction, //提供定义变换的一个类
          reconfigure: (config:{schema:{},plugins:{}})=>EditorState, // 重新配置架构以及插件
          toJson:(PluginFields:{}|string|number), // 导出Json,TODO: 暂时未知
          fromJson:(config:{schema,plugins},json:Object,pluginFields: Object<Plugin>) -> EditorState // 从json导入创建状态,TODO: 目前具体未知
          static create(config:{ // 创建一个新的状态
                schema:Schema,
                doc:Node,
                selection: Selection,
                storedMarks: Mark[],
                plugins: Plugin[], 
          })->EditorState 
    }
    

    可以通过EditorState创建一个更新用的Transaction

    class Transaction{
          time: Date.now(), // 与此变换想过的时间戳,可能是number格式
          storedMarks: mark[], // 该次变换的保存的标记
          selection: Selection, // 默认为上次EditorState的选择区域,但是可以被setSelection方法进行重载
          setSelection: (selection)->Transaction, // 更新变换的选择区域
          selectionSet: boolean,//当前的选择区域是否通过setSelection进行了更新
          setStoreMarks: (mark[])-> Transaction, // 修改存储的标记
          ensureMarks: (mark[])-> Transaction, // 确保标记,如果已经标记,则不执行操作, TODO: 作用未知
          addStoredMark: (mark)-> Transaction, // 添加一个标记
          removeStoredMark: (mark|markType)-> transaction, // 移除一个标记
          setTime:(time:number)->transaction, // 更新时间戳
          replaceSelection:(slice:Slice)->transaction, //设置当前的选择区域为某个切片
          replaceSelectionWith:(node:Node,inheritMarks:bool)->transaction, // 选择整个节点,同时选择是否继承当前选择节点上的所有标记
          deleteSelection:()->transaction, // 移除选择区域
          insertText:(text:string,from:number,to:number)->transaction, // 插入文本,替换(from,to)区间的文本
          setMeta:(key:string|Plugin|PluginKey,value:{})->transaction, // 存储一个元元素,存储用? TODO: 作用未知
          getMeta:(key:string|Plugin|PluginKey)->value:{}, // 获取一个元元素
          isGeneric: boolean, // 是否具有元元素
          scrollIntoView:()->transaction //滚动到选择区域,相当于获取焦点
    }
    

    选择区域

    class Selection{
          construct:($anchor:ResolvedPos,$head:ResolvedPos,ranges:[Selection Range])->Selection, // 构造函数,TODO: 具体作用
          ranges: [Selection Range], // 选择的区域
          $anchor: ResolvedPos, // 锚点,TODO: 具体作用未知
          $head: ResolvedPos, // 头,TODO: 具体作用未知
          anchor: number, // 瞄点的坐标
          head: number, // 选择的头
          from: number,
    }
    

    Prosemirror View
    渲染View
    Prosemirror Model
    常用的模型
    Prosemirror Transactions
    变化

  • 相关阅读:
    hihoCoder #1062 : 最近公共祖先·一
    hihoCoder #1050 : 树中的最长路
    hihoCoder #1049 : 后序遍历
    108 Convert Sorted Array to Binary Search Tree 将有序数组转换为二叉搜索树
    107 Binary Tree Level Order Traversal II 二叉树的层次遍历 II
    106 Construct Binary Tree from Inorder and Postorder Traversal 从中序与后序遍历序列构造二叉树
    105 Construct Binary Tree from Preorder and Inorder Traversal 从前序与中序遍历序列构造二叉树
    104 Maximum Depth of Binary Tree 二叉树的最大深度
    102 Binary Tree Level Order Traversal 二叉树的层次遍历
    101 Symmetric Tree 判断一颗二叉树是否是镜像二叉树
  • 原文地址:https://www.cnblogs.com/minskiter/p/13863893.html
Copyright © 2011-2022 走看看