Tui.editor: In reactJs how can i add youtubeplugin?

[yoojeen126]

Summary

Use React like doc in https://nhn.github.io/tui.editor/latest/tutorial-example17-creating-plugin
Got error in Editor.codeBlockManager.setReplacer.

Version

"@toast-ui/react-editor": "^2.0.1",

Additional context

import { Editor} from '@toast-ui/react-editor';
...
previewStyle="vertical"
initialEditType="wysiwyg"
initialValue="Hello world"
usageStatistics={false}
ref={editorRef}
plugins={[colorSyntax, youtubePlugin]}
onChange={getPostInfo}
/>

const youtubePlugin =() => {
//TypeError: Cannot read property 'setReplacer' of undefined
Editor.codeBlockManager.setReplacer('youtube', function(youtubeId) {
...
});
}

[js87zz]

@yoojeen126
codeBlockManager is static property, so that you can use as below.
We consider improving the way to provide static method in wrapper for usability.

import ToastEditor from '@toast-ui/editor';
import { Editor } from '@toast-ui/react-editor';

// ...
const youtubePlugin =() => {
  ToastEditor.codeBlockManager.setReplacer('youtube', function(youtubeId) {
  // ...
  }
});

<Editor placeholder="hello react editor world!"
  previewStyle="vertical"
  initialEditType="wysiwyg"
  initialValue="Hello world"
  usageStatistics={false}
  ref={editorRef}
  plugins={[colorSyntax, youtubePlugin]}
  onChange={getPostInfo}
/>

[stale[bot]]

This issue has been automatically marked as inactive because there hasn’t been much going on it lately. It is going to be closed after 7 days. Thanks!

[stale[bot]]

This issue will be closed due to inactivity. Thanks for your contribution!

[leeonfield]

@yoojeen126
codeBlockManager is static property, so that you can use as below.
We consider improving the way to provide static method in wrapper for usability.

import ToastEditor from '@toast-ui/editor';
import { Editor } from '@toast-ui/react-editor';

// ...
const youtubePlugin =() => {
  ToastEditor.codeBlockManager.setReplacer('youtube', function(youtubeId) {
  // ...
  }
});

<Editor placeholder="hello react editor world!"
  previewStyle="vertical"
  initialEditType="wysiwyg"
  initialValue="Hello world"
  usageStatistics={false}
  ref={editorRef}
  plugins={[colorSyntax, youtubePlugin]}
  onChange={getPostInfo}
/>

@js87zz

is this way work in Viewer ?

i define the video plugin function which use in Editor and Viewer, but only work in Editor

[leeonfield]

const videoPlugin = (editor) => {
  const { codeBlockManager } = Object.getPrototypeOf(editor).constructor
  codeBlockManager.setReplacer('youtube', function(sourceId) {
  ……
}

this way work in Editor and Viewer

[leeonfield]

@leeonfield/editor-plugin-video now can help to insert video in Tui.editor

[ats1999]

const videoPlugin = (editor) => {
  const { codeBlockManager } = Object.getPrototypeOf(editor).constructor
  codeBlockManager.setReplacer('youtube', function(sourceId) {
  ……
}

this way work in Editor and Viewer

How we can get the reference of editor.

[leeonfield]

const videoPlugin = (editor) => {
  const { codeBlockManager } = Object.getPrototypeOf(editor).constructor
  codeBlockManager.setReplacer('youtube', function(sourceId) {
  ……
}

this way work in Editor and Viewer

How we can get the reference of editor.

editor is the param of this plugin,no need to get the reference of editor

const plugins = [videoPlugin]
<TuiEditor plugins={plugins} />

[ats1999]

const videoPlugin = (editor) => {
  const { codeBlockManager } = Object.getPrototypeOf(editor).constructor
  codeBlockManager.setReplacer('youtube', function(sourceId) {
  ……
}

this way work in Editor and Viewer

How we can get the reference of editor.

editor is the param of this plugin,no need to get the reference of editor

const plugins = [videoPlugin]
<TuiEditor plugins={plugins} />

Thanks, It worked.