tinymce-plugin-h5img

A tinyMCE plugin for upload image on HTML5(input[type=file] or drag and drop)

install

npm install tinymce-plugin-h5img

usage

import

You can import the plugin easily as commonjs / es6 modules. (with tsc, webpack, etc)

import 'tinymce-plugin-h5img'
require('tinymce-plugin-h5img')

If you didn't use a modules resolver. You can also use dist/plugin.js directly.

setup

window.tinyMCE.init({
    plugins: ['h5img', /* and other plugins */],
    toolbar: 'h5img',
    uploadConfig: {
        // configure
    }
});

The uploadConfig has theese attributes:

uploadFile

Define a function to upload HTML5 File object to web server.

The function will get a File object and return a promise.

The type define is:

interface ISendResult {
    file: File;
    url?: string;
}
type IUploadFile = (file: File) => Promise<ISendResult>

If uploadConfig.uploadFile is not defined, it will only display local image, without post file.

accept

Accept upload image's type, e.g: ['image/jpeg','image/png',...], default scene allowed jpg, png and gif.

icon

Icon on toolbar, default value is 'image' (same to tinymce image icon)

dragColor

Background color when drag img into editor, default is #f8ffe5.