Core-image-editor NPM

Editor de imagens para o Core Editor

Adicione o TOAST UI Image Editor nos componentes de imagem do Core Editor

Preview

Resumo

Nome do plugin: core-image-editor
Comandos
- tui-image-editor - Abre o modal com o editor de imagem. Opções:
  - target - componente do qual obter e atualizar a imagem

Opções

Opção	Descrição	Padrão
`config`	Configuração do TOAST UI object	`{}`
`constructor`	Passe o construtor do editor. Por padrão, o `tui.ImageEditor` será chamado
`labelImageEditor`	Rótulo para o editor de imagem (usado no modal)	`Editor de Imagem`
`labelApply`	Rótulo usado no botão de aplicar	`Aplicar`
`height`	Altura padrão do editor	`650px`
`width`	Largura padrão do editor	`100%`
`commandId`	Id para criar o comando do editor de imagem	`tui-image-editor`
`toolbarIcon`	Ícone usado na barra de ferramentas do componente de imagem. Passe uma string vazia para evitar adicionar o ícone.	`<svg ....`
`hideHeader`	Oculta o cabeçalho padrão do editor	`true`
`onApply`	Por padrão, o Core Editor pega a imagem modificada, a adiciona ao Gerenciador de Ativos e atualiza o alvo. Se precisar de alguma lógica personalizada, você pode usar esta função personalizada 'onApply'. `onApply: (imageEditor, imageModel) => {...}`	`null`
`addToAssets`	Se nenhum `onApply` personalizado for passado e esta opção for `true`, a imagem resultante será adicionada aos ativos	`true`
`upload`	Se nenhum `onApply` personalizado for passado, ao confirmar, a imagem editada será passada para o carregador do Gerenciador de Ativos e o resultado (por exemplo, em vez do dataURL, você terá a URL) será passado para o processo padrão `onApply` (atualizar alvo, etc.)	`false`
`onApplyButton`	O botão de aplicar (HTMLElement) será passado como argumento para esta função, uma vez criado. Isso permitirá uma personalização mais alta.	`null`
`script`	Scripts para carregar dinamicamente no caso de não ser encontrado um construtor de editor TOAST UI	`['...tui-code-snippet.js', '...tui-color-picker.js', '...tui-image-editor.min.js']`
`style`	No caso de o `script` ser carregado, este estilo também será carregado	`['...tui-color-picker.css', '...tui-image-editor.css']`

Download

CDN
- https://unpkg.com/core-image-editor
NPM
- npm i core-image-editor
GIT
- git clone https://github.com/incriptlabs/core-image-editor.git

Uso

Diretamente no Browser

<link href="https://unpkg.com/core-editor/dist/css/core-editor.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/core-editor"></script>
<script src="https://unpkg.com/core-image-editor"></script>

<div class="core"></div>

<script type="text/javascript">
  var editor = coreEditor.init({
      container : '.core',
      // ...
      plugins: ['core-image-editor'],
      pluginsOpts: {
        'core-image-editor': {
          config: {
            includeUI: {
              initMenu: 'filter',
            },
          },
        }
      }
  });
</script>

JavaScript

import coreEditor from 'core-editor';
import plugin from 'core-image-editor';

const editor = coreEditor.init({
  container : '.core',
  plugins: [plugin],
  pluginsOpts: {
    [plugin]: { /* options */ }
  }
  // or
  plugins: [
    editor => plugin(editor, { /* options */ }),
  ],
});

Desenvolvimento

Clone o repositório

$ git clone https://github.com/incriptlabs/core-image-editor.git
$ cd core-image-editor

Instale as dependências

$ npm i

Inicie o servidor de desenvolvimento

$ npm start

Licença

BSD 3-Clause

core-editor

1.0.1

12 months ago