Question

我在我的项目中使用reactquill html编辑器。我已使用教程https://github.com/zenoamaro/react-quill#custom-toolbar在项目中成功创建了自定义工具栏按钮。

代码如下。

/*
 * Custom "star" icon for the toolbar using an Octicon
 * https://octicons.github.io
 */
const CustomButton = () => <span className="octicon octicon-star" />

/*
 * Event handler to be attached using Quill toolbar module
 * http://quilljs.com/docs/modules/toolbar/
 */
function insertStar () {
  const cursorPosition = this.quill.getSelection().index
  this.quill.insertText(cursorPosition, "★")
  this.quill.setSelection(cursorPosition + 1)
}

/*
 * Custom toolbar component including insertStar button and dropdowns
 */
const CustomToolbar = () => (
  <div id="toolbar">
    <select className="ql-header" onChange={e => e.persist()}>
      <option value="1"></option>
      <option value="2"></option>
      <option selected></option>
    </select>
    <button className="ql-bold"></button>
    <button className="ql-italic"></button>
    <button className="ql-image"></button>
    <select className="ql-color">
      <option value="red"></option>
      <option value="green"></option>
      <option value="blue"></option>
      <option value="orange"></option>
      <option value="violet"></option>
      <option value="#d0d1d2"></option>
      <option selected></option>
    </select>
    <button className="ql-insertStar">
      <CustomButton />
    </button>
  </div>
)

/*
 * Editor component with custom toolbar and content containers
 */
class Editor extends React.Component {
  constructor (props) {
    super(props)
    this.state = { editorHtml: '' }
    this.handleChange = this.handleChange.bind(this),
    this.modules = {
      toolbar: {
        container: "#toolbar",
        handlers: {
          "insertStar": insertStar,
        }
      }
    }
    this.formats = [
      'header', 'font', 'size',
      'bold', 'italic', 'underline', 'strike', 'blockquote',
      'list', 'bullet', 'indent',
      'link', 'image', 'color',
    ]
  }

  handleChange (html) {
    this.setState({ editorHtml: html });
  }

  render() {
    return (
      <div className="text-editor">
        <CustomToolbar />
        <ReactQuill
          onChange={this.handleChange}
          modules={this.modules}
          formats={this.formats}
        />
      </div>
    )
  }
}

此代码在编辑器中添加了新的*，但不替换突出显示的单词。我需要的是用*代替高度标记的文本。

所以这里需要做两件事。

在“ insertStar”方法中获取突出显示的文本
用*替换突出显示的文本

关于如何实现这一点的任何想法？

更新1

使用来突出显示文本

window.getSelection.toString()

现在我需要在编辑器中将所选字符串替换为*

任何帮助将不胜感激。

React羽毛笔-用星号（*）替换突出显示的文本

0 个答案: