TinyMCE 使用 React 自托管

Question

我正在尝试使用 React 创建一个简单的自托管 TinyMCE。目前我的项目只是显示一个简单的文本区域，没有工具栏或任何样式。我认为集成tinymce 的一个好方法是使用模块加载器。我读到，react 已经通过使用 npx create-react-app 包含了 webpack。

Projectstructor
    root
    |-public
    |-skins
    |-src 
       |-App.js
       |-TinyEditorComponent.js
    |-webpack.config.js

我一步一步做了什么：

npx create-react-app my-app
$ npm install --save @tinymce/tinymce-react
cp -r node_modules/tinymce/skins 皮肤
创建文件 webpack.config.js

const config = {
  module: {
    loaders: [
      {
        test: require.resolve("tinymce/tinymce"),
        loaders: ["imports?this=>window", "exports?window.tinymce"],
      },
      {
        test: /tinymce\/(themes|plugins)\//,
        loaders: ["imports?this=>window"],
      },
    ],
  },
};

文本编辑器组件：

import React, { Component } from "react";

// Import TinyMCE
import tinymce from "tinymce/tinymce";

// Default icons are required for TinyMCE 5.3 or above
import "tinymce/icons/default";

// A theme is also required
import "tinymce/themes/silver";

// Any plugins you want to use has to be imported
import "tinymce/plugins/paste";
import "tinymce/plugins/link";

class TinyEditorComponent extends Component {
  constructor() {
    super();
    this.state = { editor: null };
  }

  componentDidMount() {
    tinymce.init({
      selector: `#${this.props.id}`,
      skin_url: `./skins/content/dark`,
      plugins: [
        "advlist autolink lists link image charmap print preview anchor",
        "searchreplace visualblocks code fullscreen",
        "insertdatetime media table paste code help wordcount",
      ],
      toolbar: "undo redo | formatselect | bold italic backcolor |",
      setup: editor => {
        this.setState({ editor });
        editor.on("keyup change", () => {
          const content = editor.getContent();
          this.props.onEditorChange(content);
        });
      },
    });
  }

  componentWillUnmount() {
    tinymce.remove(this.state.editor);
  }

  render() {
    return (
      <textarea
        id={this.props.id}
        value={this.props.content}
        onChange={e => console.log(e)}
      />
    );
  }
}

export default TinyEditorComponent;

我不知道如何为tinymce覆盖和配置webpack，有很多旧的方法，但什么是正确的。通过注入webconfig？

Answer 1

理想情况下，您应该使用他们自己的 ReactComponent。这个答案需要来自https://www.tiny.cloud/docs/integrations/react/

的知识

您应该通过

@tinymce/tinymce-react

或

npm

安装组件

yarn

，无论您喜欢哪个。安装完成后，导入编辑器

import { Editor } from '@tinymce/tinymce-react';

然后你就可以像这样使用它了

<Editor
    initialValue="<p>This is the initial content of the editor</p>"
    init={{
      height: 500,
      menubar: false,
      plugins: [
        'advlist autolink lists link image charmap print preview anchor',
        'searchreplace visualblocks code fullscreen',
        'insertdatetime media table paste code help wordcount'
      ],
      toolbar:
        'undo redo | formatselect | bold italic backcolor | \
         alignleft aligncenter alignright alignjustify | \
         bullist numlist outdent indent | removeformat | help'
      }}
/>

然后将您的 TinyMCE 自托管副本添加到您的公用文件夹中。编辑 public 文件夹中的 index.html 并将以下内容添加到您的

<head>

标签

中

<script src="tinymce.min.js"></script>

Answer 2

您可以通过以下步骤实现此目的：

在webpack配置中添加：

const copyWebpack = new CopyWebpackPlugin({
  patterns: [
    { from: 'node_modules/tinymce', to: './static/tinymce/' }
  ]
});

然后，在您的代码中使用以下内容：

<TinyMCEEditor
  tinymceScriptSrc="http://localhost:3000/static/tinymce/tinymce.js"
  apiKey="API_KEY"
  onEditorChange={(value) => onChange(value)}
  value={value}
  disabled={readonly}
  init={{
    skin: 'tinymce-5',
    content_css: false,
    inline: false,
    height: 400,
    width: '100%',
    plugins: ['link', 'lists', 'preview'],
    toolbar: true,
    toolbar_mode: mode
  }}
/>

TinyMCE 使用 React 自托管

问题描述投票：0回答：2

2个回答

最新问题

TinyMCE 使用 React 自托管

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2