Использование TinyMCE-реакции

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

Вы пытаетесь загрузить скин, которого больше нет в TinyMCE.Тема оформления по умолчанию в TinyMCE 5 называется oxide, и обложки с именем lightgray.

нет. В большинстве случаев вам не нужно указывать тему оформления в конфигурации, если вы хотите использовать настройки по умолчанию.Я бы попытался удалить все ссылки на скин в конфигурации и добавить обратно параметр skin или skin_url, только если TinyMCE не может найти свой скин самостоятельно (что редко).

То же самое вернодля настроек theme в TinyMCE.Тема по умолчанию в TinyMCE 5 называется silver.Редактор должен быть в состоянии найти и загрузить это самостоятельно.

Answer 2

Ниже мой конфиг. Но я думаю, вам нужно добавить 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