富文本编译器使用详情（tinymac）

import { Editorable } from '@tinymce/tinymce-react'  // 引入

const handleInit = (e) => {
    const instance = e.target;  //初始化获取实例对象
    handleInstance(instance)    // 传递给父组件使用
}
  

<Editorable
  initialValue={content} // 父组件传过来的值
  apiKey='XXXX'  // 自己官网上申请的api key
  init={{
    height: 500,
    language: 'zh_CN',
    menubar: true,
    statusbar: true,
    branding: false,
    elementpath: false,  
    plugins: [
      'advlist autolink lists link image charmap print preview anchor',
      'searchreplace visualblocks code fullscreen',
      'insertdatetime media table paste code help wordcount'
    ],
    toolbar:
      'undo redo | formatselect | bold italic backcolor | \
       alignleft aligncenter alignright alignjustify | \
       bullist numlist outdent indent | removeformat | help'
  }}
  onEditorChange={handleEditorChange}  //父组件传过来的方法
  onSelectionChange={handleSelectionChange} //父组件获取选中的文案
  onInit={handleInit} // 初始化 
/>


父组件
const handleSelectionChange = (el) => {
    setSelectedContent(editorInstance?.selection.getContent({ format: 'text' }))
}
//获取选中的文本

const handleEditorChange = (content, editor) => {
    setContent(content)
};
// 通过api获取内容

const handleInstance = （val）=> {
    setEditorInstance(val)
}
//获取子组件实例对象

//获取当前选中的node
editorInstance?.selection.getNode()；

//获取当前node距编译器顶部的距离 
const totalTop = (curNode) => {
  let totalTop = null;
  let par = curNode.offsetParent;
  totalTop += curNode.offsetTop;
  while (par) {
    if (navigator.userAgent.indexOf('MSIE 8.0') === -1) {
      totalTop += par.clientTop;
    }
    totalTop += par.offsetTop;
    par = par.offsetParent;
  }
  return totalTop
}

//获取当前元素的滚动api 
editorInstance?.contentWindow.scrollTo(0, totalTop)