如何在 Slatejs 中创建 Read_More 和 Read_less 按钮

问题描述

In this link 您可以找到 read_more/read_less 功能，但在 slatejs 中我们无法直接访问文本。那么，如何以 slatejs 的方式在 saltejs 中创建该功能。 我试图创建 use ref

  const dots = React.useRef<any>();
  const moreText = React.useRef<any>();
  const btnText = React.useRef<any>();

然后我是这样实现的

<span ref={dots}>...</span>
      <span ref={moreText}>
        <Editable
          readOnly={readOnly}
          renderElement={renderElement}
          renderLeaf={renderLeaf}
          placeholder="Enter some rich text…"
          spellCheck
          autoFocus
          onKeyDown={onKeyDown}
        />
      </span>
      <button
        onClick={() => {
          if (dots.current.style.display === "none") {
            dots.current.style.display = "inline";
            btnText.current.innerHTML = "Read less";
            moreText.current.style.display = "inline";
          } else {
            dots.current.style.display = "none";
            btnText.current.innerHTML = "Read more";
            moreText.current.style.display = "none";
          }
        }}
        ref={btnText}
      >
        Read more
      </button>

但它隐藏了所有文本。 但是，我认为我需要像 moreText.current.lenghth(300).appendSpan(span of ref={moreText})

那样做 sotmihng

解决方法

这是工作应用：Stackblitz

import React,{ useState } from "react";
import "./style.css";
const article = {
  title: "Read More Read Less Button",disc:
    "Lorem ipsum dolor sit amet,consectetur adipiscing elit. Phasellus imperdiet,nulla et dictum interdum,nisi lorem egestas vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est,ultrices nec congue eget,auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi,sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta."
};

export default function App() {
  const [show,setShow] = useState(false);
  return (
    <div>
      <h1>{article.title}</h1>
      <p>{show ? article.disc : article.disc.substr(0,100) + "..."}</p>
      <button onClick={() => setShow(!show)}>
        {!show ? "Read More" : "Read Less"}
      </button>
    </div>
  );
}

,

这适用于 Slatejs 和其他任何地方。

export default function App() {
  const editorRef = React.useRef();

  return (
    <div>
 <p
        style={{
          overflow: "hidden",textOverflow: "ellipsis",display: "-webkit-box",WebkitLineClamp: 2,WebkitBoxOrient: "vertical"
        }}
        ref={editorRef}
      >
        {article.disc}
      </p>
      <button
        onClick={() => {
          editorRef.current.style.WebkitLineClamp =
            editorRef.current.style.WebkitLineClamp == false ? 2 : null;
        }}
      >
        toggle
      </button>
    </div>
  );
}

on stackblitz