# 百度編輯器 [TOC]  ## 基本使用 | 參數 | 說明 | | --- | --- | |參數一 | 表單id, | | 參數二 | ueditor 的選項，比如可以設置按鈕類型，ueditor 編輯器的屬性都可以通過函數的第二個參數設置 | | 參數三 | 初始化后執行的回調函數 | ``` <textarea id="container" style="height:300px;width:100%;"></textarea> <script> require(['hdjs'], function (hdjs) { hdjs.ueditor('container', {hash: 2, data: 'hd'}, function (editor) { console.log('編輯器執行后的回調方法1') }); }) </script> <div> <textarea id="hdphp" style="height:300px;width:100%;"></textarea> </div> <script> require(['hdjs','bootstrap'], function (hdjs) { hdjs.ueditor('hdphp', { toolbars: [['fullscreen', 'source', 'hdimage', 'preview']], }, function (editor) { console.log('編輯器執行后的回調方法2') }); }) </script> ``` ## Vue.js中使用  ``` <div id="app"> <textarea id="container" style="height:300px;width:100%;" v-model="field.content"></textarea> </div> <script> require(['vue','hdjs'], function (Vue,hdjs) { var vm = new Vue({ el: '#app', data: { field: {content:''}, }, mounted() { //圖文編輯器 var This = this; hdjs.ueditor('container', {}, function (editor) { //監聽內容更改 editor.addListener('contentChange', function () { vm.$set(vm.field, 'content', editor.getContent()); }); //監聽vue數據 vm.$watch('field', function (item) { if (editor && editor.getContent() != item.content) { editor.setContent(item.content ? item.content : ''); } }); //失去焦點時處罰 editor.addListener('blur', function () { vm.$set(vm.field, 'content', editor.getContent()); }); editor.addListener('clearRange', function () { vm.$set(vm.field, 'content', editor.getContent()); }); }); } }) }) </script> ```