2

我想在 wagtail 中自定义草稿编辑器以具有“提及”功能（我正在使用草稿 js 插件）

因为我的反应技能非常差，而且我对 Draftail/draftjs 的了解非常有限，所以我使用https://github.com/vixdigital/wagtail-plugin-base作为起点（不太了解它的作用）并尝试应付任务

我已经设法得到它，所以提及功能出现在 wagtail 中。问题是它出现在工具栏中的“子”编辑器中

在此处输入图像描述

如何避免创建子编辑器并让它在现有编辑器的正文中工作？以下是我的“wagtail-plugin-base”中的两个主要 JS 文件

index.js

import AutoComplete from './AutoComplete/AutoComplete.js';

window.draftail.registerControl(AutoComplete)

自动完成.js

import React, { Component } from '../../node_modules/react';
import createMentionPlugin, { defaultSuggestionsFilter } from '../../node_modules/draft-js-mention-plugin';
import editorStyles from './editorStyles.css';
import { mentions } from './mentions'

import { DraftailEditor, BLOCK_TYPE, INLINE_STYLE, createEditorState } from "draftail"


const mentionPlugin = createMentionPlugin();

const AutoComplete = class SimpleMentionEditor extends Component {

  state = {
    editorState: createEditorState,
    suggestions: mentions,
  };

  onChange = (editorState) => {
    this.setState({
      editorState,
    });
  };

  onSearchChange = ({ value }) => {
    this.setState({
      suggestions: defaultSuggestionsFilter(value, mentions),
    });
  };

  onAddMention = () => {
    // get the mention object selected
  }

  focus = () => {
    this.editor.focus();
  };

  render() {
    const { MentionSuggestions } = mentionPlugin

    return (
      <div>
        <DraftailEditor
          editorState={this.state.editorState}
          onChange={this.onChange}
          plugins={[mentionPlugin]}
          ref={(element) => { this.editor = element; }}
        />
        <MentionSuggestions
          onSearchChange={this.onSearchChange}
          suggestions={this.state.suggestions}
          onAddMention={this.onAddMention}
        />
      </div>
    );
  }
}
export default AutoComplete;

非常感谢任何指针！

4

0 回答 0