custom-skins
v2.0.1
Published
Skins para Tiny Editor
Downloads
5
Readme
custom-skins
custom-skins
é uma skin personalizada para o editor TinyMCE que remove as bordas do editor. Este pacote facilita a instalação e configuração da skin em projetos auto-hospedados.
Instalação
Você pode instalar o pacote via npm ou yarn:
npm install tinymce-custom-skins
# ou
yarn add tinymce-custom-skins
Configuração
Após a instalação, você precisa executar o script postinstall para copiar os arquivos necessários para a pasta public/tinymce do seu projeto. Adicione o seguinte script ao seu package.json:
"scripts": {
"postinstall": "node ./postinstall.js"
}
Crie um arquivo chamado postinstall.js na raiz do seu projeto com o seguinte conteúdo:
const path = require('path');
const fse = require('fs-extra');
const topDir = "./";
fse.emptyDirSync(path.join(topDir, 'public', 'tinymce'));
fse.copySync(path.join(topDir, 'node_modules', 'tinymce'), path.join(topDir, 'public', 'tinymce'), { overwrite: true });
fse.copySync(path.join(topDir, 'node_modules', 'tinymce-custom-skins/build/skins/content'), path.join(topDir, 'public', 'tinymce/skins/content'), { overwrite: true });
fse.copySync(path.join(topDir, 'node_modules', 'tinymce-custom-skins/build/skins/ui'), path.join(topDir, 'public', 'tinymce/skins/ui'), { overwrite: true });
Execute o script postinstall usando npm ou yarn:
npm run postinstall
# ou
yarn postinstall
Uso
Para usar a skin personalizada no TinyMCE, configure o editor da seguinte forma:
tinymce.init({
selector: 'textarea', // Seletor para o elemento textarea
license_key: "gpl",
plugins: [
'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
'insertdatetime', 'media', 'table', 'help', 'wordcount'
],
toolbar: 'undo redo | blocks | ' +
'bold italic backcolor | alignleft aligncenter ' +
'alignright alignjustify | bullist numlist outdent indent | ' +
'removeformat | image',
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }',
skin_url: 'tinymce/skins/ui/custom'
});