edbed -- Editable blocks editor

This html wysiwyg editor is designed to help handling of external resources in a document, by displaying a "block" that represents the resource with these informations:

• type (link, image, video, embed)
• favicon
• title, summary, credit (and more)
• thumbnail
• duration
• dimensions
• file size

With the help of prosemirror and url-inspector, when a URL or html code is pasted, it is replaced by an such a "block".

Usage

Simply add dist/edbed.min.css, dist/edbed.min.js to a web page and initialize the editor:

document.addEventListener('DOMContentLoaded', function() {
    var inspectorBase = "http://inspector.eda.sarl";

    var opts = {
        content: document.querySelector("#content"),
        place: document.querySelector("#editor"),
        inspector: function(obj, cb) {
            var url = obj;
            if (obj instanceof Node) {
                if (obj.nodeName == "IFRAME") url = obj.src;
                else return cb(); // let editor handle this
            }
            GET(inspectorBase + "/inspector", {url: url}, function(err, obj) {
                if (err) return cb(err);
                return cb(null, {
                    html: obj.html,
                    type: obj.type,
                    href: obj.url,
                    icon: obj.icon,
                    thumbnail: obj.thumbnail && (inspectorBase + obj.thumbnail) || null,
                    title: obj.title,
                    description: obj.description
                });
            });
        }
    };
    var pm = Edbed.init(opts);
    opts.content.hidden = true;
});

Options

Options are passed to the underlying prosemirror editor.

inspector option must be specified as above, this function receives a url or a dom object.

Properties

• type: changes the appearance of the resource block, toggles default options
• icon, thumbnail, duration, dimensions, size: metadata about the resource
• html: the actual html code that will be displayed outside the editor