Redaxtor

Redaxtor is a JavaScript library for editing CMS pieces, pages and internationalisation on the client side. Based on React and Redux. Built with Webpack. Written in ES2015. Created by SpiralScout.

Installation

Install redaxtor base and it's plugins

npm install --save redaxtor
npm install --save redaxtor-medium
npm install --save redaxtor-codemirror
npm install --save redaxtor-seo

The Gist (CommonJS)

See Typescript Typings for more details

    // Include redaxtor and it's default styles
    
    var Redaxtor = require('redaxtor');
    require('redaxtor/lib/redaxtor.css');
    
    // Include redaxtor Rich Text editor and it's default styles
    // RedaxtorMedium exports 3 components:
    // 
    var RedaxtorMedium = require('redaxtor-medium');
    require('medium-editor/dist/css/medium-editor.css');
    require('redaxtor-medium/lib/redaxtor-medium.css');
 
    // Include redaxtor source code editor and it's default styles 
    var RedaxtorCodemirror = require('redaxtor-codemirror');
    require('codemirror/lib/codemirror.css');
 
    // Attach plugins to redaxtor
    var components = {
        html: RedaxtorMedium.HTMLEditor,
        image: RedaxtorMedium.IMGTagEditor,
        background: RedaxtorMedium.BackgroundImageEditor,
        source: RedaxtorCodemirror
    };
 
    var redaxtor = new Redaxtor({
    pieces: {
            components: components,
            options: {
                html: {
                    pickerColors: [
                        "#666",
                        "#212121",
                        "#f39c12",
                        "#d2d064",
                        "#4fbbf7",
                        "#ffffff"
                    ]
                }
            }
        },
        piecesRoot: document,  //Optional. Set document by default. Set root  element for pieces
        editorActive: true, //Optional. Default: false, If set enables everything editors for pieces after loading
        navBarRoot: document.querySelector('.bs-docs-header .container'), //Optional. Default: document.body, Set place for the Redaxtor bar
        navBarDraggable: true, //Optional. Default: true, If set `true` enables dragging of the redaxtor panel
        navBarCollapsable: true, //Optional. Default: true, If set `true` enables collapsing of the redaxtor panel. If set `false` set the panel to the open state and disables collapsing   
        navBarCollapsed: true, //Optional. Default: true, defines navbar is collapsed on creating or not
        pieceNameGroupSeparator: ':', // Optional. Set name separator for grouping blocks 
        api: {
            /**
            *  Method to fetch list of image urls for gallery
             * Should resolve into array of strings - URLS
            */
            getImageList: function () {
                return new Promise(function(resolve, reject) {
                    $.get({
                        url: "api/images.json",
                        dataType: "json"
                    }).done(function(data) {
                        resolve(data.data.list);//
                    }).fail(function(error) {
                        reject(error);
                    });
                });
            },
            uploadImage: function() {
    
            },
            /**
            * function for delete image from server
            * @param id id of image
            * @returns {Promise} 
            */
            deleteImage: function (id) {
                return new Promise(function(resolve, reject) {
                    resolve();
                });
            },
            /**
             *  Method to specific piece data
             * Should resolve into piece object, having all needed properties
            */
            getPieceData: function (piece) {                
                if (piece.type == "source" || piece.type == "html") {
                    /**
                    * Source and html editors expect `html` property 
                    * updateNode - define that is need to update piece after change code. Default value: true
                    */
                    return Promise.resolve({
                        ...piece,
                        data: {
                            html: piece.node.innerHTML,
                            updateNode: true
                        }
                    });
                }
                if (piece.type == "image") {
                    /**
                    * Image editor expects `src` property with URL of image and `alt` string 
                    */
                    return Promise.resolve({
                        ...piece,
                        data: {
                            src: piece.node.src,
                            alt: piece.node.alt,
                        }
                    });
                }
                if (piece.type == "background") {
                    /**
                    * Background editor expects a set of background styling properties 
                    */
                    return Promise.resolve({
                        ...piece,
                        data: {
                            url: piece.node.style.backgroundImage && piece.node.style.backgroundImage.slice(4, -1).replace(/"/g, ""),
                            bgColor: piece.node.style.backgroundColor,
                            bgRepeat: piece.node.style.backgroundRepeat,
                            bgSize: piece.node.style.backgroundSize,
                            bgPosition: piece.node.style.backgroundPosition,
                            alt: piece.node.title || ""
                        }
                    });
                }
                return Promise.reject()
            },
            /**
            * Should resolve, if piece was saved 
            */
            savePieceData: function(piece) {
                console.info("Saving to server", piece);
                return Promise.resolve();
            }
    } 
});

The Gist (Static)

    <!-- Include redaxtor and it's default styles -->
    <script lang="text/javascript" src="./dist/redaxtor.min.js"></script> 
    <link rel="stylesheet" type="text/css" href="./dist/redaxtor.min.css" charset="utf-8">
    
    
    <!-- Include redaxtor HTML editor and it's default styles -->
    <script lang="text/javascript" src="./dist/redaxtor-medium.min.js"></script> 
    <link rel="stylesheet" type="text/css" href="./dist/medium-editor.min.css" charset="utf-8">
    <link rel="stylesheet" type="text/css" href="./dist/redaxtor-medium.min.css" charset="utf-8">
    
        
    <!-- Include redaxtor CODE editor and it's default styles -->
    <script lang="text/javascript" src="./dist/redaxtor-codemirror.min.js"></script> 
    <link rel="stylesheet" type="text/css" href="./node_modules/codemirror/lib/codemirror.css" charset="utf-8">
    

 
//Attach plugins to redaxtor
var components = {
    html: RedaxtorMedium.HTMLEditor,
    image: RedaxtorMedium.IMGTagEditor,
    background: RedaxtorMedium.BackgroundImageEditor,
    source: RedaxtorCodemirror
};
 
var redaxtor = new Redaxtor({
    pieces: {
        components: components,
        options: {
                html: { //Pass options to HTML Editor
                    pickerColors: [
                        "#666",
                        "#212121",
                        "#f39c12",
                        "#d2d064",
                        "#4fbbf7",
                        "#ffffff"
                    ]
                }
            }
    },
    piecesRoot: document,  //Optional. Set document by default. Set root  element for pieces
    enableEdit: true, //Optional. Default: false, If set enables everything editors for pieces after loading
    navBarRoot: document.querySelector('.bs-docs-header .container'), //Optional. Default: document.body, Set place for the Redaxtor bar
    navBarDraggable: true, //Optional. Default: true, If set `true` enables dragging of the redaxtor panel
    navBarCollapsable: true, //Optional. Default: true, If set `true` enables collapsing of the redaxtor panel. If set `false` set the panel to the open state and disables collapsing   
    api: {
        /**
        *  Method to fetch list of image urls for gallery
         * Should resolve into array of strings - URLS
        */
        getImageList: function () {
            return new Promise(function(resolve, reject) {
                $.get({
                    url: "api/images.json",
                    dataType: "json"
                }).done(function(data) {
                    resolve(data.data.list);//
                }).fail(function(error) {
                    reject(error);
                });
            });
        },
        uploadImage: function() {
 
        },
        /**
        * function for delete image from server
        * @param id id of image
        * @returns {Promise} 
        */
        deleteImage: function (id) {
            return new Promise(function(resolve, reject) {
                resolve();
            });
        },
        /**
         *  Method to specific piece data
         * Should resolve into piece object, having all needed properties
        */
        getPieceData: function (piece) {                
            if (piece.type == "source" || piece.type == "html") {
                /**
                * Source and html editors expect `html` property
                * updateNode - define that is need to update piece after change code. Default value: true
                */
                return Promise.resolve({
                    ...piece,
                    data: {
                        html: piece.node.innerHTML,
                        updateNode: true
                    }
                });
            }
            if (piece.type == "image") {
                /**
                * Image editor expects `src` property with URL of image and `alt` string 
                */
                return Promise.resolve({
                    ...piece,
                    data: {
                        src: piece.node.src,
                        alt: piece.node.alt,
                    }
                });
            }
            if (piece.type == "background") {
                /**
                * Background editor expects a set of background styling properties 
                */
                return Promise.resolve({
                    ...piece,
                    data: {
                        url: piece.node.style.backgroundImage && piece.node.style.backgroundImage.slice(4, -1).replace(/"/g, ""),
                        bgColor: piece.node.style.backgroundColor,
                        bgRepeat: piece.node.style.backgroundRepeat,
                        bgSize: piece.node.style.backgroundSize,
                        bgPosition: piece.node.style.backgroundPosition,
                        alt: piece.node.title || ""
                    }
                });
            }
            return Promise.reject()
        },
        /**
        * Should resolve, if piece was saved 
        */
        savePieceData: function(piece) {
            console.info("Saving to server", piece);
            return Promise.resolve();
        }
    }
});

Developing and building

npm install
npm run build

License

MIT