기존에 TinyMCE 클라우드 호스팅을 이용해 에디터를 사용 하고 있었고 무료 사용횟수가 한달에 1000번이였다

클라우드 호스팅 서비스를 사용하려면 돈을 내야했다

셀프 호스팅으로 프로젝트에 세팅해야 무료로 사용이 가능했다

공식사이트에서

GPL2+ 오픈소스 소프트웨어 라이센스를 발견했다
gpl 2+에 대한 설명

기본적인 플러그인만 사용하기 때문에 나는 오픈소스로도 충분했다

하지만 키만 변경하면 적용 되는게 아니라 클라우드 호스팅에서 셀프 호스팅으로 변경해야해 에디터를 다시 세팅 해야했다

설치

npm install --save tinymce @tinymce/tinymce-react
npm install tinymce-i18n

tinymce-i18n은 한국어로 변경을 위해 설치했다. 클라우드 호스팅에서는 language: "ko_KR" 를 추가하면 적용이 됐었는데 번들링 방식으로 변경하니 적용되지 않았다

BundledEditor.js

import { Editor } from '@tinymce/tinymce-react';

// TinyMCE so the global var exists
import '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';

// 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/help/js/i18n/keynav/en';
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/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
import 'tinymce/skins/content/default/content';
import 'tinymce/skins/ui/oxide/content';

export default function BundledEditor(props) {
  return (
    <Editor
      licenseKey='your-license-key'
      {...props}
    />
  );
}

app.js

import React, { useRef } from 'react';
import BundledEditor from './BundledEditor'

export default function App() {
  const editorRef = useRef(null);
  const log = () => {
    if (editorRef.current) {
      console.log(editorRef.current.getContent());
    }
  };
  return (
    <>
      <BundledEditor
        onInit={(evt, editor) => editorRef.current = editor}
        initialValue='<p>This is the initial content of the editor.</p>'
        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 }'
        }}
      />
      <button onClick={log}>Log editor content</button>
    </>
  );
}

공식문서에 있는대로 따라하면 아래사진과 같이 에디터가 나타나고 쉽게 세팅이 완료된다

bundle 설치방벙 공식 문서

api key 관련 설명

api key 관련 설명2