node.js - 在反应中为ckfinder设置服务器目录

Question

我正在尝试建立一个博客，管理员用户可以在其中使用 CKEditor5 和 CKFinder 创建帖子。我已经集成了 CKEditor5-build-classic 和 CKFinder。当我单击 CKFinder 文件管理器时，会显示已经存在的文件夹和文件。 我不知道它来自哪里。我想知道如何更改指向服务器文件夹的文件夹并限制图像类型和文件类型以上传到该文件夹​​。我一直在努力寻找解决方案，但找不到任何相关信息。到目前为止，我已经尝试过关注。

 import React, { useState, useEffect } from 'react'
import axios from 'axios'
import { Link } from 'react-router-dom'
import { Form, Button } from 'react-bootstrap'
import { useDispatch, useSelector } from 'react-redux'

import FormContainer from '../components/FormContainer'
import { createPost } from '../actions/postActions'
import { CKEditor } from '@ckeditor/ckeditor5-react'

import ClassicEditor from '@sunilshrestha/ckeditor5-build-classic'

const PostCreateScreen = ({ history }) => {
  const [title, setTitle] = useState('')
  const [active, setActive] = useState(false)
  const [category, setCategory] = useState('')

  const dispatch = useDispatch()

  const userLogin = useSelector((state) => state.userLogin)
  const { userInfo } = userLogin

  const editorConfiguration = {
    toolbar: {
      items: [
        'heading',
        '|',
        'bold',
        'italic',
        'underline',
        'link',
        'bulletedList',
        'numberedList',
        '|',
        'outdent',
        'indent',
        'alignment',
        '|',
        'imageUpload',
        'imageInsert',
        'blockQuote',
        'insertTable',
        'mediaEmbed',
        'undo',
        'redo',
        '|',
        'code',
        'fontBackgroundColor',
        'fontColor',
        'fontFamily',
        'fontSize',
        '|',
        'highlight',
        'horizontalLine',
        'specialCharacters',
        'strikethrough',
        'subscript',
        'superscript',
        '|',
        'CKFinder',
        'pageNavigation',
        'previousPage',
        'nextPage',
        '|',
        'findAndReplace',
        '|',
      ],
    },
    ckfinder: {
      uploadUrl: axios.post(`/api/postimage`),
      options: { resourceType: 'Images' },
    },
    language: 'en',
    image: {
      toolbar: [
        'imageTextAlternative',
        'imageStyle:inline',
        'imageStyle:block',
        'imageStyle:side',
        'linkImage',
      ],
    },
    table: {
      contentToolbar: [
        'tableColumn',
        'tableRow',
        'mergeTableCells',
        'tableCellProperties',
        'tableProperties',
      ],
    },
  }

  useEffect(() => {
    if (!userInfo.isAdmin) {
      history.push('/login')
    }

    setTitle(title)
    setCategory(category)
    setActive(active)

    // adding ckfinder script tags
    const script = document.createElement('script')
    script.src = 'https://ckeditor.com/apps/ckfinder/3.5.0/ckfinder.js'
    script.async = true
    document.body.appendChild(script)
  }, [title, category, active])

  const submitHandler = (e) => {
    e.preventDefault()
    dispatch(
      createPost({
        title,
        //  body,
        category,
        active,
      }),
    )
  }

  return (
    <>
      <Link to='/admin/postlist' className='btn btn-light my-3'>
        Go Back
      </Link>
      <FormContainer>
        <h1> Create New Post </h1>

        <Form onSubmit={submitHandler}>
          <Form.Group controlId='title'>
            <Form.Label> Title </Form.Label>
            <Form.Control
              type='name'
              placeholder='Enter Title'
              value={title}
              onChange={(e) => setTitle(e.target.value)}
            ></Form.Control>
          </Form.Group>
          <Form.Group controlId='body'>
            <Form.Label> Body </Form.Label>
            <CKEditor
              editor={ClassicEditor}
              config={editorConfiguration}
              data='<p>Hello from CKEditor 5!</p>'
              onReady={(editor) => {
                // You can store the "editor" and use when it is needed.
                console.log('Editor is ready to use!', editor)
              }}
              onChange={(event, editor) => {
                const data = editor.getData()
                console.log({ event, editor, data })
              }}
              onBlur={(event, editor) => {
                console.log('Blur.', editor)
              }}
              onFocus={(event, editor) => {
                console.log('Focus.', editor)
              }}
            />
          </Form.Group>

          <Form.Group controlId='active'>
            <Form.Label>Active</Form.Label>
            <Form.Control
              as='select'
              value={active}
              onChange={(e) => setActive(e.target.value)}
            >
              <option value=''> Select...</option>
              <option value={true}> Active </option>
              <option value={false}> Not Active </option>
            </Form.Control>
          </Form.Group>
          <Form.Group controlId='category'>
            <Form.Label>Category</Form.Label>
            <Form.Control
              type='text'
              label='Enter Category'
              value={category}
              onChange={(e) => setCategory(e.target.value)}
            ></Form.Control>
          </Form.Group>

          <Button type='submit' variant='primary'>
            Create Post
          </Button>
        </Form>
      </FormContainer>
    </>
  )
}

export default PostCreateScreen

标签： node.jsreactjsckeditor5ckfinder