Question

我正在使用tinymce-react，并试图加载modern主题和lightgray皮肤。

<Editor
  initialValue="<p>This is the initial content of the editor</p>"
  init={{
    theme_url: "/themes/modern/theme.min.js",
    skin_url: "/skins/lightgray",
    height: 120,
    menubar: false,
    skin: "lightgray",
    theme: "modern",
    mobile: {
      theme: "mobile",
      plugins: ["autosave", "lists", "autolink"]
    },
    plugins: [
      "advlist autolink lists link image charmap print preview anchor",
      "searchreplace visualblocks code fullscreen",
      "insertdatetime media table contextmenu paste code"
    ],
    toolbar: "bold underline italic | bullist numlist | alignleft aligncenter alignright alignjustify | link"
  }}
/>

我在文件theme.min.js:1 Uncaught module [b] returned undefined中得到了theme.min.js:1。

我已将文件夹plugins，themes和skins复制到/public文件夹。

有什么想法吗？

谢谢

Answer 1

以下是我的配置。但是我认为您也需要在编辑器中添加apiKey

import React from 'react'
import PropTypes from 'prop-types'
import {Editor} from '@tinymce/tinymce-react';
import {APP_CONFIG} from 'Helper/Config';

const ACCEditor = (props) => {
    return (<Editor
        apiKey={APP_CONFIG.EDITOR_API_KEY}
        initialValue=""
        value={props.value}
        init={{
        theme: 'modern',
        plugins: 'print preview fullpage searchreplace autolink directionality visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists textcolor wordcount imagetools contextmenu colorpicker textpattern help',
        toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | code',
        height: "300"
    }}
        onChange={props.onChange}/>)
}

ACCEditor.propTypes = {
    onChange: PropTypes.func.isRequired,
    value: PropTypes.string
}

export default ACCEditor

Answer 2

您正试图加载TinyMCE中不再存在的皮肤。 TinyMCE 5中的默认皮肤称为oxide，没有皮肤称为lightgray。

在大多数情况下，如果要使用默认值，则无需在配置中声明外观。我会尝试删除配置中对皮肤的所有引用，并且仅在TinyMCE无法自行定位其皮肤（很少见）的情况下才添加回skin或skin_url选项。

TinyMCE中的theme设置也是如此。 TinyMCE 5中的默认主题称为silver。编辑器也应该能够自己定位和加载该文件。

使用TinyMCE反应

2 个答案: