laravel+vue專案中引入ueditor

listenon發表於2018-08-15
LaravelVue

1、把ueditor檔案放在assets/js下目錄中

laravel+vue專案中引入ueditor

2、把utf8-php中的其它檔案複製到public下的js中

laravel+vue專案中引入ueditor

3、建立UEditor.vue 檔案在ueditor/utf8-php下，寫入以下程式碼

<template>　
    <div :id="id"></div>
</template>

<style scoped>
//引入css檔案
</style>

<script>
    //引入相應的配置檔案，具體路徑請根據自己配置檔案放置的路徑以及公共元件定義的路徑自行修改
    import './ueditor.config.js'
    import './ueditor.all.min.js'
    import './ueditor.parse.min.js'
    import './lang/zh-cn/zh-cn.js'

    export default {
        props: {},
        data() {
            return {
                id: Math.ceil(Math.random() * 100000) + 'editor'
            }
        },
        mounted() {
            // 獲取編輯器例項化的物件
            this.editor = UE.getEditor(this.id,{
                initialFrameWidth: 700,//設定編輯器寬度
                initialFrameHeight: 700,//設定編輯器高度
                scaleEnabled: true,
            })
        },
        methods: {
            getUEContent() { // 獲取內容方法
                return this.editor.getContent()
            }
        }
    }
</script>複製程式碼

4、在任意vue元件script標籤中直接引入公共元件的UEditor.vue 檔案，引入路徑一定寫正確

laravel+vue專案中引入ueditor

5、使用ueditor元件

<UE ref="ue" :defaultMsg='ruleForm.content'></UE>複製程式碼

6、呼叫編輯器元件的獲取內容方法getUEContent()

 模版裡定義一個button繫結getUEContent()方法
<button @click="getUEContent()">獲取內容</button>
複製程式碼

7、註冊getUEContent()方法：

methods: {
　　getUEContent() {
　　　　let content = this.$refs.ue.getUEContent();//在這裡呼叫了子元件ueditor元件的getContent()方法
　　　　this.$notify({
　　　　　　title: '獲取成功，可在控制檯檢視！',
　　　　　　message: content,
　　　　　　type: 'success'
　　　　});
　　　　console.log(content)
　　}｝
複製程式碼



相關文章