javascript - TinyMCE 自托管 React-6ren

javascript - TinyMCE 自托管 React

转载作者：行者123 更新时间：2023-12-03 14:52:30

24

4

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

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

我一步一步做了什么:

npx 创建 react 应用程序我的应用程序

$ 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，有很多旧方法，但什么是正确的。通过注入(inject) webconfig？

最佳答案

理想情况下，您应该使用自己的 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>

关于javascript - TinyMCE 自托管 React，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64943901/

24

4

0

文章推荐： android - Firebase Crashlytics 控制台不再显示新旧版本的崩溃

文章推荐： react-native - react native 测试-立即行动

文章推荐： azure-devops - Azure CI 管道 - DotNetCoreCLI@2 任务错误

.net - IIS 托管 -> 非托管 -> 托管 -> StackOverflowException
我会尝试尽可能详细地描述我的问题，但如果需要更详细的解释，请告诉我。为了简化，假设我有 3 个 DLL(实际上我有更多，但我猜这不是很重要): managed-1.dll - 托管 DLL(用 C#
jsf - CDI 托管 Bean 和 JSF 托管 Bean 可以相互通信吗？
我有一个 Tomcat 6 JSF Web 应用程序，我想使用 CDI bean 来设置它。不过，我必须逐渐将项目转换为 CDI。我的问题是:CDI bean 和传统的 JSF 托管 bean 可以
jsf-2 - 将 JSF 托管 Bean 迁移到 CDI 托管 Bean
我计划将 Web 应用程序从使用 JSF 托管 Bean 转换为使用 CDI 托管 Bean。我知道我需要执行以下操作: 在 WEB-INF 中添加一个空 beans.xml 文件。将所有 JSF
根域上的 https 托管
我在裸域上运行我的解析应用程序。 Parse 并没有让我的生活变得轻松。起初我很难设置它，因为大多数 DNS 托管服务不允许根域上的 CNAME，而 Parse 需要 CNAME。决定尝试使用 C
Firebase 托管 - 函数重写定价
如果您使用 Firebase 托管将请求定向到云函数通过重写，“通过”托管的请求流量是否会记入 Firebase 托管国标转出 ? (忽略 Cloud Function 的计费) 换句话说，
Java Servlet 托管
关闭。这个问题是off-topic .它目前不接受答案。想改善这个问题吗？ Update the question所以它是 on-topic对于堆栈溢出。 9年前关闭。 Improve this q
Firebase 托管 Webhook
我有一个特定的用例，我正尝试使用 Firebase 托管来解决，它如下: 我正在使用 Gridsome 生成静态网站在构建之前，Gridsome 使用 Graphql 并从 Headless CMS
multithreading - 如何在套接字接收事件后更新Blazor(托管)
您好，我有一个blazor页面，我想在其中显示一个变量。这个变量从另一个线程(通过Websocket接收数据的另一个线程)获取更新，我想以线程安全的方式显示它: Blazor页面 @page "/n
Firebase 托管 - 通配符重定向
我想使用 Firebase 托管来托管一个 angular 应用程序，我需要创建一个重定向到另一个 URL 中的一些旧文件。根据 Firebase 文档，您可以进行基本重定向 "redirects"
video - 电子学习网站的视频流(托管)
我正在尝试找出满足电子学习平台以下要求的最佳方法。我在其中编辑视频的后端，以便可以将它们彼此链接(例如youtube-comment函数) 用户只能在访问平台时观看视频(不允许下载!) 视频只能通过
hosting - Streamlit 托管
已关闭。这个问题是 not about programming or software development 。目前不接受答案。这个问题似乎不是关于 a specific programming
directx - 托管 DirectX
我想这是一个相当深入的主题，因此任何带有洞察信息的网址也很乐意接受。我一直在使用原生 DirectX，但从未管理过。另一方面，大多数情况下，在开发不需要高级 GPU 渲染的其他类型的应用程序时，我通常
Firebase 托管 - 密码保护网站？
我刚刚将一个网站部署到 Firebase 托管，效果非常好 - 设置非常简单。但是，我的问题是，有什么方法可以使访问该网站受到身份验证的限制吗？这是一个管理面板，只有我的团队才能访问。有什么方法可以
hosting - Streamlit 托管
已关闭。这个问题是 not about programming or software development 。目前不接受答案。这个问题似乎不是关于 a specific programming
Java+MongoDB 托管
就目前情况而言，这个问题不太适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、民意调查或扩展讨论。如果您觉得这个问题可以改进并可能重新开放，visit
apache - 托管 Jenkins
按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
java - 托管 javadoc？
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。要求我们推荐或查找书籍、工具、软件库、教程或其他场外资源的问题对于 Stack Overflow 来说是
Python 3 托管
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题，以便用事实和引用来回答。关闭 6 年前。
Firebase 托管 - 密码保护网站？
我刚刚将一个网站部署到 Firebase 托管，它运行良好 - 设置非常简单。但是，我的问题是，有什么方法可以通过身份验证限制对网站的访问？这是一个只有我的团队才能访问的管理面板。有什么方法可以用密
使用个人命名空间的 Git 托管
如果我想托管一个对公众用处不大的应用程序(例如，一个将点打印到控制台的程序，它们的数量取决于现在的时间)，我喜欢在启动板中的方式不必乱扔全局托管站点的命名空间并用诸如 HourDot 之类的名称填充它

首页

博学

6Ren·AI

商城

javascript - TinyMCE 自托管 React