DivineITLimited / hyper-editor

A backend independent visual composer for web.
https://DivineITLimited.github.io/hyper-editor/demo.html
MIT License
341 stars 43 forks source link

How to embed social links #8

Closed sasajib closed 5 years ago

sasajib commented 5 years ago

Hello, First of all great work, keep up the good work. How do I integrate youtube video, instagram, twitter post

shimulch commented 5 years ago

Thanks @sasajib

You can create a block. Check this link https://divineitlimited.github.io/hyper-editor/#/blocks

When defining schema use vue-form-generator documentation - https://vue-generators.gitbook.io/vue-generators/

An example of a youtube block might be -

const youtube_block = {
    title: 'Youtube Video',
    description: 'Attach Youtube Video',

    settings_schema: {
        fields: [{
            type: 'input',
            inputType: 'text',
            label: 'Youtube Video ID',
            model: 'video_id'
        }]
    }, // settings form

    default_values: { // default values
        settings: {},
        general: {}
    },

    config: {
        preview: function(val, callback) {
            var preview_template = `
                        <iframe width="560" height="315" src="https://www.youtube.com/embed/${val.settings.video_id}" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                    `
            callback(preview_template)
        }, // how the block will be previewed
        styles: [{
            id: 'default',
            name: 'Default'
        }] // list of supported styles
    }
}

// register
hyperEditor.registerBlock('youtube', youtube_block)

Hope that helps.

shimulch commented 5 years ago

Closing due to no more activity here.