# 百度编辑器 [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> ```