History

codeph0y 09bcca20ea Move tinymce editor to composer		2020-10-28 16:54:54 +00:00
..
colorpicker	fix: replace seperator and seperate in whole codebase	2019-10-24 16:40:50 +03:00
img	clean up PR	2017-02-27 16:58:08 +00:00
tpls/default	Optimise images	2019-07-26 11:06:12 +01:00
README.md	mozaik added to email template - main edit view	2016-02-15 16:15:53 +00:00
jquery.mozaik.css	email tpl width fix	2017-04-21 15:58:36 +01:00
jquery.mozaik.js	Move tinymce editor to composer	2020-10-28 16:54:54 +00:00
template.html	mozaik added to email template - main edit view	2016-02-15 16:15:53 +00:00

README.md

mozaik

Usage:

<!-- include dependencies -->
<link rel="stylesheet" href="vendor/components/jqueryui/themes/ui-lightness/jquery-ui.min.css">
<script src='vendor/components/jquery/jquery.min.js'></script>
<script src="vendor/components/jqueryui/jquery-ui.min.js"></script>
<script src='vendor/tinymce/tinymce/tinymce.min.js'></script>
<script src="vendor/gymadarasz/imagesloaded/imagesloaded.pkgd.min.js"></script>
<script src="vendor/gymadarasz/ace/src-min/ace.js" type="text/javascript" charset="utf-8"></script>

<!-- include mozaik -->
<link rel="stylesheet" href="jquery.mozaik.css">
<script src='jquery.mozaik.js'></script>

Example:

HTML:

<div id="template"></div>

JavaScript:

$(function(){
    // initialize
    $('#template').mozaik();

    // get value
    $('#template').getMozaikValue();

    // apply inline styles (tipically for email templates)
    $('#template').getMozaikValue({inlineStyles: true});
});

Default settings:

$('#template').mozaik({
                headline: {thumbnail: 'tpls/default/thumbs/headline.png', label: 'Headline', tpl: 'tpls/default/headline.html'},
                content1: {thumbnail: 'tpls/default/thumbs/content1.png', label: 'Content', tpl: 'tpls/default/content1.html'},
                content3: {thumbnail: 'tpls/default/thumbs/content3.jpg', label: 'Three column', tpl: 'tpls/default/content3.html'},
                content2: {thumbnail: 'tpls/default/thumbs/content2.jpg', label: 'Two column', tpl: 'tpls/default/content2.html'},
                image3: {thumbnail: 'tpls/default/thumbs/image3.jpg', label: 'Three column with image', tpl: 'tpls/default/image3.html'},
                image2: {thumbnail: 'tpls/default/thumbs/image2.jpg', label: 'Two column with image', tpl: 'tpls/default/image2.html'},
                image1left: {thumbnail: 'tpls/default/thumbs/image1left.jpg', label: 'Content with image (left)', tpl: 'tpls/default/image1left.html'},
                image1right: {thumbnail: 'tpls/default/thumbs/image1right.jpg', label: 'Content with image (right)', tpl: 'tpls/default/image1right.html'},
                footer: {thumbnail: 'tpls/default/thumbs/footer.png', label: 'Footer', tpl: 'tpls/default/footer.html'},
            },
            editables: 'editable',
            style: 'tpls/default/styles/default.css',
            namespace: false,
            tinyMCEPlugins: "link image imagetools code"
        });

See more on Guthub: https://github.com/gymadarasz/mozaik