Question

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

由于我的反应能力非常差，而且我对draftail / draftjs的了解非常有限，因此我以https://github.com/vixdigital/wagtail-plugin-base作为起点（对它的工作一无所知），并试图弄清该任务 >

我设法做到了，所以提及功能出现在w中。问题在于它出现在工具栏的“子”编辑器中

enter image description here

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

index.js

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

window.draftail.registerControl(AutoComplete)

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;

任何指针都很感激！

w的Draftail提及插件

0 个答案: