我有一个 TypeScript Nextjs 项目,我想在没有 API 密钥的情况下使用 TinyMce。
我参考的是官方的 https://www.tiny.cloud/docs/tinymce/6/react-pm-bundle/
然后我创建一个 BundledEditor.jsx
import React from 'react'
import { Editor } from '@tinymce/tinymce-react'
// TinyMCE so the global var exists
// eslint-disable-next-line no-unused-vars
import tinymce from 'tinymce/tinymce'
// DOM model
import 'tinymce/models/dom/model'
// Theme
import 'tinymce/themes/silver'
// Toolbar icons
import 'tinymce/icons/default'
// Editor styles
import 'tinymce/skins/ui/oxide/skin.min.css'
// importing the plugin js.
// if you use a plugin that is not listed here the editor will fail to load
import 'tinymce/plugins/advlist'
import 'tinymce/plugins/anchor'
import 'tinymce/plugins/autolink'
import 'tinymce/plugins/autoresize'
import 'tinymce/plugins/autosave'
import 'tinymce/plugins/charmap'
import 'tinymce/plugins/code'
import 'tinymce/plugins/codesample'
import 'tinymce/plugins/directionality'
import 'tinymce/plugins/emoticons'
import 'tinymce/plugins/fullscreen'
import 'tinymce/plugins/help'
import 'tinymce/plugins/image'
import 'tinymce/plugins/importcss'
import 'tinymce/plugins/insertdatetime'
import 'tinymce/plugins/link'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/media'
import 'tinymce/plugins/nonbreaking'
import 'tinymce/plugins/pagebreak'
import 'tinymce/plugins/preview'
import 'tinymce/plugins/quickbars'
import 'tinymce/plugins/save'
import 'tinymce/plugins/searchreplace'
import 'tinymce/plugins/table'
import 'tinymce/plugins/template'
import 'tinymce/plugins/visualblocks'
import 'tinymce/plugins/visualchars'
import 'tinymce/plugins/wordcount'
// importing plugin resources
import 'tinymce/plugins/emoticons/js/emojis'
// Content styles, including inline UI like fake cursors
/* eslint import/no-webpack-loader-syntax: off */
import contentCss from '!!raw-loader!tinymce/skins/content/default/content.min.css'
import contentUiCss from '!!raw-loader!tinymce/skins/ui/oxide/content.min.css'
export default function BundledEditor(props) {
const { init, ...rest } = props
// note that skin and content_css is disabled to avoid the normal
// loading process and is instead loaded as a string via content_style
return (
<Editor
init={{
...init,
skin: false,
content_css: false,
content_style: [contentCss, contentUiCss, init.content_style || ''].join('\n')
}}
{...rest}
/>
)
}
并在其他 tsx 文件上使用它。
import { useRef } from 'react'
import BundledEditor from '../BundledEditor'
const editorRef = useRef<any>(null)
return (
<>
<BundledEditor
onInit={(evt: any, editor: any) => (editorRef.current = editor)}
initialValue=''
init={{
height: 500,
menubar: false,
plugins: [
'advlist',
'anchor',
'autolink',
'help',
'image',
'link',
'lists',
'searchreplace',
'table',
'wordcount'
],
toolbar:
'undo redo | blocks | ' +
'bold italic forecolor | alignleft aligncenter ' +
'alignright alignjustify | bullist numlist outdent indent | ' +
'removeformat | help',
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
}}
/>
</>
);
一切都很好,但是当我刷新页面时,它会显示错误
ReferenceError: navigator is not defined
我不知道如何解决它。
您可以尝试像下面这样导入包吗:
import dynamic from "next/dynamic";
const Editor = dynamic(
() => import("@tinymce/tinymce-react"),
{ ssr: false }
);