2

我是新来的反应和石板，我正在尝试通过 jquery 更改编辑器文本，并确保更改也反映在编辑器内容中。

当我在编辑器上选择文本（例如07/27/21）并单击示例项目中的按钮设置日期时：

  • onChange() 触发（确定）
  • 编辑器中的选择突出显示（确定）
  • 编辑器内容已更改（如您在控制台上所见）（确定）

如果我单击按钮Test，突出显示的文本通过 jquery 更改为“这是一个测试”，但是：

  • onChange() 未触发:(
  • 编辑器内容没有改变（你可以在控制台上看到）:(

和...

如果我选择突出显示的文本（通过 jquery 更改为“这是一个测试”）我得到了错误

错误：无法从 Slate 点解析 DOM 点：{"path":[0,0],"offset":86}

那么，我做错了什么？

任何帮助将不胜感激，埃琳娜

这是我的代码：

import React, { useCallback, useState, useMemo } from 'react'
import { createEditor, Editor, Transforms, Text } from 'slate'
import { Slate, Editable, withReact } from 'slate-react'
import { withHistory } from 'slate-history'
import $ from 'jquery'
import './index.css';


const Helpers = {

  isDuedateActive(editor) {
    const [match] = Editor.nodes(editor, {
      match: n => n.duedate === true,          
    })

    return !!match
  },
  
  toggleDuedateMark(editor) {
    const isActive = Helpers.isDuedateActive(editor)

    Transforms.setNodes(
      editor,
      { duedate: isActive ? null : true },  
      { match: n => Text.isText(n), split: true }
    ) 
  }, 
}


const PlainTextExample = () => {
  const [value, setValue] = useState(initialValue)
  const editor = useMemo(() => withHistory(withReact(createEditor())), [])
  const renderLeaf = useCallback(props => <Leaf {...props} />, [])

  return (
    <div>
      <button
          onMouseDown={event => {
            event.preventDefault();
            console.log($('span.calendar span').text());
            $('span.calendar span').text('this is a test');
            console.log($('span.calendar span').text());
          }}
        > Test
      </button> <br /><br />
      <div id="mioeditor">
        <Slate 
          editor={editor} 
          value={value} 
          state = {value}
          onChange={newvalue => {
            console.log("onChange fired")
            setValue(newvalue)
              // Save the value to Local Storage.
              const content = JSON.stringify(newvalue)
              console.log("JSON.stringify(editorContent)=" + content)          
            }
          }
          >
            <button
              onMouseDown={event => {
                event.preventDefault()
                Helpers.toggleDuedateMark(editor)
              }}
            > Set Date
            </button>
          <Editable placeholder="Enter some plain text..." renderLeaf={renderLeaf} />
        </Slate>
      </div>
    </div>
  )
}

const initialValue = [
  {
    type: 'paragraph',
    children: [
      { text: 'This is editable plain text, just like a <textarea>! And this is a date 07/27/21' },
    ],
  },
]

const Leaf = ({ attributes, children, leaf }) => {
 
  /* se trovo duedate = true nei figli di un nodo, lo innesto in un tag con una classe 'duedate' che 
  mette sfondo giallino alla selezione e affianco un datepicker jquery; la funzione js che abilita il datepicker è definita nel file <root app>/public/index.html  */
  if (leaf.duedate) {

    var myval = '';
    try{
      myval = children.props['leaf'].text;
    }
    catch (error)
    {
        console.log(error);
    }

    return <span {...attributes} className="calendar">{children}<input type="hidden" name="date" className="duedate" placeholder="dd/mm/yyyy" value={myval} readOnly={true}/></span>
  }

  return <span {...attributes}>{children}</span>

}

export default PlainTextExample

这是示例项目： https ://drive.google.com/file/d/16pQxfFJ6-As8lR9yT_lT92jjrCDffhi1/view?usp=sharing

更新：在https://codesandbox.io/s/slate-reproductions-forked-2yx13?file=/index.js也有一个带有示例项目的沙箱

4

0 回答 0