Note: This is a temporary fork of GrapesJS that will probably be abandoned once the expose baseCss PR and subsequent from-document PR are both merged. For more information on the from-document feature, see below.
Grapes' container and fromElement options work well for templates that are neatly contained below the body element. However, if your template relies on styling based on classes or attributes added to the html, head, or body tags, it will not be compatible. Similarly, if your CSS depends on a hierarchical structure within the body tag, it may not work with Grapes as grapes injects a custom wrapper div (thereby conflicting with n-th element CSS query selectors). Finally, templates render differently based on the doctype of your document. Doctype support is therefore necessary.
The fromDocument feature resolves all of these issues, by allowing you to simply inject grapes into an existing document, no matter how complicated. Grapes will then transpose the document's content with the newly created iframe canvas, while respecting the document's doctype, and above-body elements (html, head). It will not duplicate grapes-specific elements as long as these elements are tagged with a special gjs-from-doc attribute (see the usage example below).
All tests pass and I've added additional tests as well for the new feauture.
Without fromDocument:
With fromDocument:
GrapesJS is a free and open source Web Builder Framework which helps building HTML templates, faster and easily, to be delivered in sites, newsletters or mobile apps. Mainly, GrapesJS was designed to be used inside a CMS to speed up the creation of dynamic templates. To better understand this concept check the image below
Generally any 'template system', that you'd find in various applications like CMS, is composed by the structure (HTML), style (CSS) and variables, which are then replaced with other templates and contents on server-side and rendered on client.
This demos show examples of what is possible to achieve: Webpage Demo - http://grapesjs.com/demo.html Newsletter Demo - http://grapesjs.com/demo-newsletter-editor.html
- Features
- Download
- Usage
- Development
- Documentation
- API
- Testing
- Plugins
- Support
- Changelog
- Contributing
- License
- Blocks
- Style Manager, for component styling
- Layer Manager, that comes handy with nested elements
- Code Viewer
- Asset Manager, for uploading and managing images
-
Local and remote storage
-
Default built-in commands (basically for creating and managing different components)
- CDNs
- UNPKG
https://unpkg.com/grapesjshttps://unpkg.com/grapesjs/dist/css/grapes.min.css
- CDNJS
https://cdnjs.cloudflare.com/ajax/libs/grapesjs/0.12.17/grapes.min.jshttps://cdnjs.cloudflare.com/ajax/libs/grapesjs/0.12.17/css/grapes.min.css
- UNPKG
- NPM
npm i grapesjs
- GIT
git clone https://github.com/artf/grapesjs.git
For the development purpose you should follow instructions below.
<link rel="stylesheet" href="path/to/grapes.min.css">
<script src="path/to/grapes.min.js"></script>
<div id="gjs"></div>
<script type="text/javascript">
var editor = grapesjs.init({
container : '#gjs',
components: '<div class="txt-red">Hello world!</div>',
style: '.txt-red{color: red}',
});
</script>You could also grab the content directly from the element with fromElement property
<div id="gjs">
<div class="txt-red">Hello world!</div>
<style>.txt-red{color: red}</style>
</div>
<script type="text/javascript">
var editor = grapesjs.init({
container : '#gjs',
fromElement: true,
});
</script>For more practical example I suggest to look up the code inside this demo: http://grapesjs.com/demo.html
By default Grapes injects base CSS into the canvas. For example, it sets body margin to 0 and sets a default background color of white. This CSS is desired in most cases. However, if you wish to disable or define your own base CSS, you can do so with the baseCss config parameter. This is useful if for example your template is not based off a document with 0 as body margin:
var editor = grapesjs.init({
container : '#gjs',
fromElement: true,
baseCss: 'html, body { background-color: #ffffff; }'
});If you work with complex templates that depend on elements and attributes above the body (e.g. a doctype, or a html element with classes), or that depend on the hierarchical level of elements inside the body (e.g. due to n-th element CSS selectors), you can also use the entire document as your template using the fromDocument property:
<!doctype html>
<html class="myClass">
<head>
<!-- rest of your complicated template's head -->
</head>
<body class="someBodyClass">
<!-- rest of your complicated template's body -->
<!-- inject grapes resource at the end of the document
the document will be transposed with the editor canvas
grapes-specific elements can be flagged with the
`data-gjs-from-doc` attribute such that they will not
be used as part of the template. -->
<link rel="stylesheet" href="dist/css/grapes.min.css" data-gjs-from-doc>
<script src="dist/grapes.min.js" data-gjs-from-doc></script>
<style data-gjs-from-doc>
body,
html {
height: 100%;
margin: 0;
}
</style>
<script type="text/javascript" data-gjs-from-doc>
grapesjs.init({
fromDocument: true,
exportWrapper: 1,
wrappesIsBody: 0,
forceClass: 0,
avoidInline: 0,
protectedCss: '',
baseCss: '',
domComponents: {
wrapperClass: 'gjs-wrapper' // use class instead of ID to identify wrapper
}
});
</script>
</body>
</html>The above snippet should work with almost any static HTML website.
GrapesJS uses Webpack as a module bundler and Babel as a compiler.
Clone the repository and install all the necessary dependencies
$ git clone https://github.com/artf/grapesjs.git
$ cd grapesjs
$ npm iStart the dev server
$ npm startOnce the development server is started you should be able to reach the demo page (eg. http://localhost:8080)
Check the getting started guide here: wiki
API References could be found here: API-Reference
$ npm test- grapesjs-plugin-export - Export GrapesJS templates in a zip archive
- grapesjs-plugin-filestack - Add Filestack uploader in Asset Manager
- grapesjs-plugin-ckeditor - Replaces the built-in RTE with CKEditor
- grapesjs-aviary - Add the Aviary Image Editor
- grapesjs-blocks-basic - Basic set of blocks
- grapesjs-plugin-forms - Set of form components and blocks
- grapesjs-navbar - Simple navbar component
- grapesjs-component-countdown - Simple countdown component
- grapesjs-style-gradient - Add a gradient type input
- grapesjs-blocks-flexbox - Add the flexbox block
- grapesjs-lory-slider - Slider component by using lory
- grapesjs-tabs - Simple tabs component
- grapesjs-preset-webpage - Webpage Builder
- grapesjs-preset-newsletter - Newsletter Builder
- grapesjs-mjml - Newsletter Builder with MJML components
Find out more about plugins here: Creating plugins
If you like the project support it with a donation of your choice or become a backer/sponsor via Open Collective
BSD 3-clause