Added sandboxed CKEditor 4 as a template editor
This commit is contained in:
Tomas Bures
parent
eacdc74c29
commit
02a7275ae4
23 changed files with 1299 additions and 377 deletions
1360
client/package-lock.json
generated
1360
client/package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -37,6 +37,8 @@
|
|||
"axios": "^0.16.2",
|
||||
"datatables.net": "^1.10.15",
|
||||
"datatables.net-bs": "^1.10.15",
|
||||
"grapesjs": "^0.14.40",
|
||||
"grapesjs-mjml": "0.0.27",
|
||||
"i18next": "^8.4.3",
|
||||
"i18next-xhr-backend": "^1.4.2",
|
||||
"immutable": "^3.8.1",
|
||||
|
|
@ -46,6 +48,7 @@
|
|||
"querystringify": "^1.0.0",
|
||||
"react": "^15.6.1",
|
||||
"react-ace": "^5.1.0",
|
||||
"react-ckeditor-component": "^1.1.0",
|
||||
"react-day-picker": "^6.1.0",
|
||||
"react-dnd-html5-backend": "^2.4.1",
|
||||
"react-dnd-touch-backend": "^0.3.13",
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ import ImagePlugin from '@ckeditor/ckeditor5-image/src/image';
|
|||
import ImageCaptionPlugin from '@ckeditor/ckeditor5-image/src/imagecaption';
|
||||
import ImageStylePlugin from '@ckeditor/ckeditor5-image/src/imagestyle';
|
||||
import ImageToolbarPlugin from '@ckeditor/ckeditor5-image/src/imagetoolbar';
|
||||
import ImageUploadPlugin from '@ckeditor/ckeditor5-image/src/imageupload';
|
||||
//import ImageUploadPlugin from '@ckeditor/ckeditor5-image/src/imageupload';
|
||||
import LinkPlugin from '@ckeditor/ckeditor5-link/src/link';
|
||||
import ListPlugin from '@ckeditor/ckeditor5-list/src/list';
|
||||
import ParagraphPlugin from '@ckeditor/ckeditor5-paragraph/src/paragraph';
|
||||
|
|
@ -75,6 +75,8 @@ class InsertImage extends Plugin {
|
|||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Upload through CKEditor is disable because files can be managed by Files tab
|
||||
|
||||
class UploadAdapter {
|
||||
constructor(loader, url, t) {
|
||||
|
|
@ -105,6 +107,7 @@ class MailtrainUploadAdapter extends Plugin {
|
|||
this.editor.plugins.get(FileRepository).createUploadAdapter = loader => new UploadAdapter(loader, this.editor.t);
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
|
||||
|
|
@ -123,14 +126,14 @@ ClassicEditor.builtinPlugins = [
|
|||
ImageCaptionPlugin,
|
||||
ImageStylePlugin,
|
||||
ImageToolbarPlugin,
|
||||
ImageUploadPlugin,
|
||||
//ImageUploadPlugin,
|
||||
LinkPlugin,
|
||||
ListPlugin,
|
||||
ParagraphPlugin,
|
||||
AlignmentPlugin,
|
||||
TablePlugin,
|
||||
TableToolbarPlugin,
|
||||
MailtrainUploadAdapter,
|
||||
//MailtrainUploadAdapter,
|
||||
InsertImage
|
||||
];
|
||||
|
||||
|
|
@ -152,7 +155,7 @@ ClassicEditor.defaultConfig = {
|
|||
'numberedList',
|
||||
'|',
|
||||
'insertImage',
|
||||
'imageUpload',
|
||||
// 'imageUpload',
|
||||
'blockQuote',
|
||||
'|',
|
||||
'insertTable',
|
||||
|
|
@ -17,7 +17,7 @@ import ACEEditorRaw from 'react-ace';
|
|||
import 'brace/theme/github';
|
||||
import 'brace/ext/searchbox';
|
||||
|
||||
import CKEditorRaw from './ckeditor';
|
||||
import CKEditorRaw from './ckeditor5';
|
||||
|
||||
import DayPicker from 'react-day-picker';
|
||||
import 'react-day-picker/lib/style.css';
|
||||
|
|
|
|||
48
client/src/lib/grapesjs.js
Normal file
48
client/src/lib/grapesjs.js
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
'use strict';
|
||||
|
||||
import React, {Component} from 'react';
|
||||
|
||||
import 'grapesjs/dist/css/grapes.min.css';
|
||||
import grapesjs from 'grapesjs';
|
||||
import grapesjsMjml from 'grapesjs-mjml';
|
||||
|
||||
export default class GrapesJs extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
const editor = grapesjs.init({
|
||||
container: this.canvasNode,
|
||||
height: '100%',
|
||||
width: 'auto',
|
||||
noticeOnUnload: 0,
|
||||
storageManager:{autoload: 0},
|
||||
fromElement: false,
|
||||
components:
|
||||
' <mj-container>\n' +
|
||||
' <mj-section>\n' +
|
||||
' <mj-column>\n' +
|
||||
' <mj-text>My Company</mj-text>\n' +
|
||||
' </mj-column>\n' +
|
||||
' </mj-section>\n' +
|
||||
' <mj-container>',
|
||||
plugins: ['gjs-mjml'],
|
||||
pluginsOpts: {
|
||||
'gjs-mjml': {}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<div ref={node => this.canvasNode = node}/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
5
client/src/lib/grapesjs.scss
Normal file
5
client/src/lib/grapesjs.scss
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
.gjs-cv-canvas {
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -16,26 +16,66 @@ import {
|
|||
base,
|
||||
unbase
|
||||
} from "../../../shared/templates";
|
||||
import CKEditor from './ckeditor';
|
||||
import CKEditor from "react-ckeditor-component";
|
||||
|
||||
const initialHeight = 600;
|
||||
const navbarHeight = 34; // Sync this with navbarheight in sandboxed-ckeditor.scss
|
||||
|
||||
@translate(null, { withRef: true })
|
||||
export class CKEditorHost extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {}
|
||||
this.state = {
|
||||
fullscreen: false
|
||||
}
|
||||
|
||||
this.onWindowResizeHandler = ::this.onWindowResize;
|
||||
}
|
||||
|
||||
static propTypes = {
|
||||
entityTypeId: PropTypes.string,
|
||||
entity: PropTypes.object,
|
||||
initialHtml: PropTypes.string
|
||||
initialHtml: PropTypes.string,
|
||||
title: PropTypes.string,
|
||||
onFullscreenAsync: PropTypes.func
|
||||
}
|
||||
|
||||
async toggleFullscreenAsync() {
|
||||
const fullscreen = !this.state.fullscreen;
|
||||
this.setState({
|
||||
fullscreen
|
||||
});
|
||||
await this.props.onFullscreenAsync(fullscreen);
|
||||
|
||||
let newHeight;
|
||||
if (fullscreen) {
|
||||
newHeight = window.innerHeight - navbarHeight;
|
||||
} else {
|
||||
newHeight = initialHeight;
|
||||
}
|
||||
await this.contentNode.ask('setHeight', newHeight);
|
||||
}
|
||||
|
||||
async exportState() {
|
||||
return await this.contentNode.ask('exportState');
|
||||
}
|
||||
|
||||
onWindowResize() {
|
||||
if (this.state.fullscreen) {
|
||||
const newHeight = window.innerHeight - navbarHeight;
|
||||
this.contentNode.ask('setHeight', newHeight);
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
window.addEventListener('resize', this.onWindowResizeHandler, false);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
window.removeEventListener('resize', this.onWindowResizeHandler, false);
|
||||
}
|
||||
|
||||
render() {
|
||||
const t = this.props.t;
|
||||
|
||||
|
|
@ -51,7 +91,12 @@ export class CKEditorHost extends Component {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className={styles.editor}>
|
||||
<div className={this.state.fullscreen ? styles.editorFullscreen : styles.editor}>
|
||||
<div className={styles.navbar}>
|
||||
{this.state.fullscreen && <img className={styles.logo} src={getTrustedUrl('static/mailtrain-notext.png')}/>}
|
||||
<div className={styles.title}>{this.props.title}</div>
|
||||
<a className={styles.btn} onClick={::this.toggleFullscreenAsync}><Icon icon="fullscreen"/></a>
|
||||
</div>
|
||||
<UntrustedContentHost ref={node => this.contentNode = node} className={styles.host} singleToken={true} contentProps={editorData} contentSrc="ckeditor/editor" tokenMethod="ckeditor" tokenParams={editorData}/>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -93,16 +138,30 @@ export class CKEditorSandbox extends Component {
|
|||
};
|
||||
}
|
||||
|
||||
async setHeight(methods, params) {
|
||||
this.node.editorInstance.resize('100%', params);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
parentRPC.setMethodHandler('exportState', ::this.exportState);
|
||||
parentRPC.setMethodHandler('setHeight', ::this.setHeight);
|
||||
}
|
||||
|
||||
render() {
|
||||
const config = {
|
||||
removeButtons: 'Underline,Subscript,Superscript,Maximize',
|
||||
resize_enabled: false,
|
||||
height: initialHeight
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={styles.sandbox}>
|
||||
<CKEditor
|
||||
onChange={(event, editor) => this.setState({html: editor.getData()})}
|
||||
data={this.state.html}
|
||||
<CKEditor ref={node => this.node = node}
|
||||
content={this.state.html}
|
||||
events={{
|
||||
change: evt => this.setState({html: evt.editor.getData()}),
|
||||
}}
|
||||
config={config}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,10 +1,72 @@
|
|||
$navbarHeight: 34px;
|
||||
|
||||
.editor {
|
||||
.host {
|
||||
}
|
||||
}
|
||||
|
||||
.sandbox {
|
||||
:global .ck-editor__editable {
|
||||
height: 500px;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.editorFullscreen {
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
z-index: 1000;
|
||||
background: white;
|
||||
margin-top: $navbarHeight;
|
||||
|
||||
.navbar {
|
||||
margin-top: -$navbarHeight;
|
||||
}
|
||||
}
|
||||
|
||||
.host {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar {
|
||||
background: #DE4320;
|
||||
width: 100%;
|
||||
height: $navbarHeight;
|
||||
}
|
||||
|
||||
.logo {
|
||||
float: left;
|
||||
height: $navbarHeight;
|
||||
padding: 5px 0 5px 10px;
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
|
||||
.title {
|
||||
padding: 5px 0 5px 10px;
|
||||
font-size: 18px;
|
||||
font-family: sans-serif;
|
||||
font-family: "Ubuntu",Tahoma,"Helvetica Neue",Helvetica,Arial,sans-serif;
|
||||
font-weight: bold;
|
||||
float: left;
|
||||
color: white;
|
||||
height: $navbarHeight;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: block;
|
||||
float: right;
|
||||
padding: 0px 15px;
|
||||
line-height: $navbarHeight;
|
||||
text-align: center;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
font-family: sans-serif;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-color: #b1381e;
|
||||
color: white;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ import 'brace/mode/html';
|
|||
|
||||
import { MosaicoEditorHost } from "../lib/sandboxed-mosaico";
|
||||
import { CKEditorHost } from "../lib/sandboxed-ckeditor";
|
||||
import GrapesJS from "../lib/grapesjs";
|
||||
|
||||
import {getTemplateTypes as getMosaicoTemplateTypes} from './mosaico/helpers';
|
||||
import {getSandboxUrl} from "../lib/urls";
|
||||
|
|
@ -174,7 +175,7 @@ export function getTemplateTypes(t, prefix = '', entityTypeId = ResourceType.TEM
|
|||
validate: state => {}
|
||||
};
|
||||
|
||||
templateTypes.grapejs = { // FIXME
|
||||
templateTypes.xgrapesjs = { // FIXME
|
||||
typeName: t('GrapeJS'),
|
||||
getTypeForm: (owner, isEdit) => null,
|
||||
getHTMLEditor: owner => null,
|
||||
|
|
@ -188,12 +189,12 @@ export function getTemplateTypes(t, prefix = '', entityTypeId = ResourceType.TEM
|
|||
validate: state => {}
|
||||
};
|
||||
|
||||
templateTypes.xckeditor = {
|
||||
typeName: t('CKEditor'),
|
||||
templateTypes.grapesjs = {
|
||||
typeName: t('GrapeJS (fake)'),
|
||||
getTypeForm: (owner, isEdit) => null,
|
||||
getHTMLEditor: owner =>
|
||||
<AlignedRow label={t('Template content (HTML)')}>
|
||||
<CKEditorHost
|
||||
<GrapesJS
|
||||
ref={node => owner.editorNode = node}
|
||||
entity={owner.props.entity}
|
||||
initialHtml={owner.getFormValue(prefix + 'html')}
|
||||
|
|
@ -212,10 +213,37 @@ export function getTemplateTypes(t, prefix = '', entityTypeId = ResourceType.TEM
|
|||
validate: state => {}
|
||||
};
|
||||
|
||||
templateTypes.ckeditor = {
|
||||
typeName: t('CKEditor'),
|
||||
templateTypes.ckeditor4 = {
|
||||
typeName: t('CKEditor 4'),
|
||||
getTypeForm: (owner, isEdit) => null,
|
||||
getHTMLEditor: owner => <CKEditor id={prefix + 'html'} height="600px" mode="html" label={t('Template content (HTML)')}/>,
|
||||
getHTMLEditor: owner =>
|
||||
<AlignedRow label={t('Template content')}>
|
||||
<CKEditorHost
|
||||
ref={node => owner.editorNode = node}
|
||||
entity={owner.props.entity}
|
||||
initialHtml={owner.getFormValue(prefix + 'html')}
|
||||
entityTypeId={entityTypeId}
|
||||
title={t('CKEditor 4 Template Designer')}
|
||||
onFullscreenAsync={::owner.setElementInFullscreen}
|
||||
/>
|
||||
</AlignedRow>,
|
||||
exportHTMLEditorData: async owner => {
|
||||
const {html} = await owner.editorNode.exportState();
|
||||
owner.updateFormValue(prefix + 'html', html);
|
||||
},
|
||||
initData: () => ({}),
|
||||
afterLoad: data => {},
|
||||
beforeSave: data => {
|
||||
clearBeforeSave(data);
|
||||
},
|
||||
afterTypeChange: mutState => {},
|
||||
validate: state => {}
|
||||
};
|
||||
|
||||
templateTypes.ckeditor5 = {
|
||||
typeName: t('CKEditor 5'),
|
||||
getTypeForm: (owner, isEdit) => null,
|
||||
getHTMLEditor: owner => <CKEditor id={prefix + 'html'} height="600px" mode="html" label={t('Template content')}/>,
|
||||
exportHTMLEditorData: async owner => {},
|
||||
initData: () => ({}),
|
||||
afterLoad: data => {},
|
||||
|
|
|
|||
|
|
@ -13,9 +13,9 @@ module.exports = {
|
|||
} )
|
||||
],
|
||||
entry: {
|
||||
root: ['babel-polyfill', './src/root.js'],
|
||||
mosaico: ['babel-polyfill', './src/lib/sandboxed-mosaico-root.js'],
|
||||
ckeditor: ['babel-polyfill', './src/lib/sandboxed-ckeditor-root.js'],
|
||||
"root": ['babel-polyfill', './src/root.js'],
|
||||
"mosaico-root": ['babel-polyfill', './src/lib/sandboxed-mosaico-root.js'],
|
||||
"ckeditor-root": ['babel-polyfill', './src/lib/sandboxed-ckeditor-root.js'],
|
||||
},
|
||||
output: {
|
||||
library: 'MailtrainReactBody',
|
||||
|
|
@ -46,8 +46,6 @@ module.exports = {
|
|||
}
|
||||
}
|
||||
]
|
||||
// exclude: /(disposables|react-dnd-touch-backend|attr-accept)/ /* https://github.com/react-dnd/react-dnd/issues/407 */,
|
||||
// use: [ 'babel-loader' ]
|
||||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
|
|
@ -69,7 +67,7 @@ module.exports = {
|
|||
},
|
||||
minify: false
|
||||
} )
|
||||
},
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
@ -84,10 +82,7 @@ module.exports = {
|
|||
]
|
||||
},
|
||||
{
|
||||
// Or /ckeditor5-[^/]+\/theme\/icons\/[^/]+\.svg$/ if you want to limit this loader
|
||||
// to CKEditor 5 icons only.
|
||||
test: /\.svg$/,
|
||||
|
||||
use: [ 'raw-loader' ]
|
||||
},
|
||||
{
|
||||
|
|
@ -105,8 +100,8 @@ module.exports = {
|
|||
'sass-loader' ]
|
||||
},
|
||||
{
|
||||
test: /\.(woff|ttf|eot)$/,
|
||||
use: [ 'url-loader' ]
|
||||
test: /\.(otf|woff2|woff|ttf|eot)$/,
|
||||
use: [ 'raw-loader' ]
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue