Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/leeonfield/editor-plugin-video
video plugin for tui.editor
https://github.com/leeonfield/editor-plugin-video
toast-ui tui-editor video
Last synced: about 5 hours ago
JSON representation
video plugin for tui.editor
- Host: GitHub
- URL: https://github.com/leeonfield/editor-plugin-video
- Owner: leeonfield
- License: mit
- Created: 2020-05-26T12:10:21.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-03-04T20:38:04.000Z (over 1 year ago)
- Last Synced: 2024-03-23T19:05:32.573Z (8 months ago)
- Topics: toast-ui, tui-editor, video
- Language: JavaScript
- Size: 532 KB
- Stars: 5
- Watchers: 2
- Forks: 4
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Video Plugin for TOAST UI Editor
> This is a plugin of [TOAST UI Editor](https://github.com/nhn/tui.editor/tree/master/apps/editor) to embed video in Editor
[](https://www.npmjs.com/package/@leeonfield/editor-plugin-video)
## Support video list and code language
- embed iframe
- [x] [YouTube](http://youtube.com/): youtube
- [x] [Tecent Video](http://v.qq.com/): qq
- [x] [Bilibili](http://bilibili.com/): bilibili
- [x] [Youku](http://youku.com/): youku
- video source
- [x] Mp4: source-mp4
- [x] OGG: source-ogg
- [x] Youku: source-avi
## 📦 Usage npm
To use the plugin, [`@toast-ui/editor`](https://github.com/nhn/tui.editor/tree/master/apps/editor) must be installed.
> Ref. [Getting Started](https://github.com/nhn/tui.editor/blob/master/apps/editor/docs/getting-started.md)
### Install
```sh
$ npm install @leeonfield/editor-plugin-video -S
```
### Import Plugin
#### ES Modules
```js
import videoPlugin from '@leeonfield/editor-plugin-video';
```
#### CommonJS
```js
const videoPlugin = require('@leeonfield/editor-plugin-video');
```
#### Use in Editor
```js
// ...
import Editor from '@toast-ui/editor';
import videoPlugin from '@leeonfield/editor-plugin-video';
const editor = new Editor({
// ...
plugins: [videoPlugin]
});
```
#### Use in Viewer
```js
// ...
import Viewer from '@toast-ui/editor/dist/toastui-editor-viewer';
import videoPlugin from '@leeonfield/editor-plugin-video';
// ...
const viewer = new Viewer({
// ...
plugins: [videoPlugin]
});
```
or
```js
// ...
import Editor from '@toast-ui/editor';
import videoPlugin from '@leeonfield/editor-plugin-video';
// ...
const viewer = Editor.factory({
// ...
viewer: true,
plugins: [videoPlugin]
});
```
### Custom Video list
```js
// ...
import Viewer from '@toast-ui/editor/dist/toastui-editor-viewer';
import videoPlugin from '@leeonfield/editor-plugin-video';
// ...
const viewer = new Viewer({
// ...
plugins: [
[
videoPlugin,
{
list: {
youtube: 'http://player.youku.com/embed/',
},
},
],
],
});
```
### embed video in markdown
````
``` youtube
GveTAk727mM
```
````
### video source
````
```source-mp4
video-source
```
````