kaidesu · July 15, 2018 00:32
diff --git a/vue.html b/vue.html

 <!DOCTYPE html>
 <html>
 <head>
    <title>Redactor</title>
    <meta charset="utf-8">

 	<link rel="stylesheet" href="/assets/redactor/redactor.min.css" />
 </head>
 <body>


    <div id="app">
        <button v-on:click="addNewElement">Add Redactor</button>
        <br><br>
    </div>
    <div id="area"></div>

 	<!-- vue.js -->
    <script src="vue.min.js"></script>

 	<!-- redactor.js -->
    <script src="/assets/redactor/redactor.js"></script>
    <script src="/assets/redactor/plugins/alignment/alignment.js"></script>
    <script src="/assets/redactor/plugins/fontcolor/fontcolor.js"></script>
    <script src="/assets/redactor/plugins/fontsize/fontsize.js"></script>
    <script src="/assets/redactor/plugins/imagemanager/imagemanager.js"></script>
    <script src="/assets/redactor/plugins/inlinestyle/inlinestyle.js"></script>
    <script src="/assets/redactor/plugins/properties/properties.js"></script>
    <script src="/assets/redactor/plugins/table/table.js"></script>

    <script>
    new Vue({
        el: '#app',
        methods:{
            addNewElement: function()
            {
               var component = new MyComponent().$mount()
               document.getElementById('area').appendChild(component.$el)
            }
        }
    });

    var MyComponent = Vue.extend({
        template: '<textarea ref="redactor" :name="name" :placeholder="placeholder" :required="required" v-model="tempValue" @input="onInput($event)"></textarea>',
        name: 'ui-wysiwyg',
        data() {
            return {
                tempValue: this.value,
            }
        },
        props: {
            value: {
                type: String,
                default: ''
            },
            horizontal: {
                type: Boolean,
                default: false
            },
            label: {
                type: String,
                default: null
            },
            name: {
                type: String,
                default: null
            },
            help: {
                type: String,
                default: null
            },
            placeholder: {
                type: String,
                default: null
            },
            toolbarFixed: {
                type: Boolean,
                default: false,
            },
            structure: {
                type: Boolean,
                default: false
            },
            replaceDivs: {
                type: Boolean,
                default: false
            },
            linebreaks: {
                type: Boolean,
                default: false
            },
            overrideStyles: {
                type: Boolean,
                default: false
            },
            required: {
                type: Boolean,
                default: false
            }
        },
        methods: {
            onInput(event) {
                this.$emit('input', event.target.value)
                this.$UIevents.fire('input', {
                    id: this.name,
                    value: event.target.value
                })
            },
        },
        mounted() {
            this.$nextTick(function () {
                let settings = {
                    toolbarFixed: this.toolbarFixed,
                    structure: this.structure,
                    replaceDivs: this.replaceDivs,
                    linebreaks: this.linebreaks,
                    overrideStyles: this.overrideStyles,
                    minHeight: '200px',
                    plugins: ['alignment', 'fontcolor', 'fontsize', 'inlinestyle', 'properties', 'table', 'imagemanager'],
                    linkNewTab: true,
                    imageResizable: true,
                    imagePosition: true,
                    imageUpload: '/api/v1/assets/json',
                    imageManagerJson: '/api/v1/assets/json',
                }
                $R(this.$refs.redactor, settings)
            })
        }
    });
    </script>
 </body>
 </html>

	<!DOCTYPE html>
	<html>
	<head>
	<title>Redactor</title>
	<meta charset="utf-8">

	<link rel="stylesheet" href="/assets/redactor/redactor.min.css" />
	</head>
	<body>


	<div id="app">
	<button v-on:click="addNewElement">Add Redactor</button>
	<br><br>
	</div>
	<div id="area"></div>

	<!-- vue.js -->
	<script src="vue.min.js"></script>

	<!-- redactor.js -->
	<script src="/assets/redactor/redactor.js"></script>
	<script src="/assets/redactor/plugins/alignment/alignment.js"></script>
	<script src="/assets/redactor/plugins/fontcolor/fontcolor.js"></script>
	<script src="/assets/redactor/plugins/fontsize/fontsize.js"></script>
	<script src="/assets/redactor/plugins/imagemanager/imagemanager.js"></script>
	<script src="/assets/redactor/plugins/inlinestyle/inlinestyle.js"></script>
	<script src="/assets/redactor/plugins/properties/properties.js"></script>
	<script src="/assets/redactor/plugins/table/table.js"></script>

	<script>
	new Vue({
	el: '#app',
	methods:{
	addNewElement: function()
	{
	var component = new MyComponent().$mount()
	document.getElementById('area').appendChild(component.$el)
	}
	}
	});

	var MyComponent = Vue.extend({
	template: '<textarea ref="redactor" :name="name" :placeholder="placeholder" :required="required" v-model="tempValue" @input="onInput($event)"></textarea>',
	name: 'ui-wysiwyg',
	data() {
	return {
	tempValue: this.value,
	}
	},
	props: {
	value: {
	type: String,
	default: ''
	},
	horizontal: {
	type: Boolean,
	default: false
	},
	label: {
	type: String,
	default: null
	},
	name: {
	type: String,
	default: null
	},
	help: {
	type: String,
	default: null
	},
	placeholder: {
	type: String,
	default: null
	},
	toolbarFixed: {
	type: Boolean,
	default: false,
	},
	structure: {
	type: Boolean,
	default: false
	},
	replaceDivs: {
	type: Boolean,
	default: false
	},
	linebreaks: {
	type: Boolean,
	default: false
	},
	overrideStyles: {
	type: Boolean,
	default: false
	},
	required: {
	type: Boolean,
	default: false
	}
	},
	methods: {
	onInput(event) {
	this.$emit('input', event.target.value)
	this.$UIevents.fire('input', {
	id: this.name,
	value: event.target.value
	})
	},
	},
	mounted() {
	this.$nextTick(function () {
	let settings = {
	toolbarFixed: this.toolbarFixed,
	structure: this.structure,
	replaceDivs: this.replaceDivs,
	linebreaks: this.linebreaks,
	overrideStyles: this.overrideStyles,
	minHeight: '200px',
	plugins: ['alignment', 'fontcolor', 'fontsize', 'inlinestyle', 'properties', 'table', 'imagemanager'],
	linkNewTab: true,
	imageResizable: true,
	imagePosition: true,
	imageUpload: '/api/v1/assets/json',
	imageManagerJson: '/api/v1/assets/json',
	}
	$R(this.$refs.redactor, settings)
	})
	}
	});
	</script>
	</body>
	</html>