<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="components/vue/vue-list :: head('neditor示例', 'ueditor')"></head>
<body>
<div id="app">
    <div id="edit_editor"></div>
    <el-button type="primary" @click="getContent">获取内容</el-button>
    <el-button type="primary" @click="setContent">写入内容</el-button>
</div>
<script th:src="@{/js/vue/common.js}"></script>
<script th:inline="javascript">
    /*<![CDATA[*/
    //Vue.http.options.emulateJSON = true;
    //Vue.http.options.emulateHTTP = true;
    var headerName = [[${_csrf.headerName}]];
    axios.defaults.headers.common[headerName] = [[${_csrf.token}]];

    var requestUrls = {};

    var editEditor = UE.getEditor('edit_editor', {
        initialFrameWidth: '100%',
        initialFrameHeight: '350',
        scaleEnabled: true,
        autoHeight: false
    });

    var app = new Vue({
        el: '#app',
        data: {
            testContent: '<p>hello, world</p>'
        },
        mounted: function () {

        },
        methods: {
            getContent() {
                this.$alert(editEditor.getContent(), '标题名称', {
                    confirmButtonText: '确定',
                    callback: action => {

                    }
                });
            },
            setContent() {
                editEditor.setContent(this.testContent);
            }
        }
    });

    $(document).ready(function () {

        editEditor.ready(function () {
            editEditor.setContent('122');  //赋值给UEditor
        });

    });
    /*]]>*/
</script>
</body>
</html>