# 百度编辑器 [TOC]  ## 使用 | 参数 | 说明 | | --- | --- | |参数一 | 表单id, | | 参数二 | 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(editor) }); }) </script> <textarea id="hdphp" style="height:300px;width:100%;"></textarea> <script> require(['hdjs'], function (hdjs) { hdjs.ueditor('hdphp', {autoHeightEnabled:false,'toolbars': [['fullscreen', 'source','insertcode', 'hdimage', 'preview']]}, function (editor) { console.log('编辑器执行后的回调方法2') }); }) </script> ``` ## 代码高亮 以下目录请根据自己的项目进行更改 ~~~ <script src="/resource/hdjs/dist/static/package/ueditor/third-party/SyntaxHighlighter/shCore.js"></script> <link href="https://cdn.bootcss.com/SyntaxHighlighter/3.0.83/styles/shThemeDefault.min.css" rel="stylesheet"> <script> SyntaxHighlighter.all() </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> ``` ## AngularJs中使用 ``` <script> hdjs.ueditor('container', {}, function (editor) { editor.addListener('contentChange', function () { $scope.field.detail = editor.getContent(); }); editor.addListener('ready', function () { if (editor && editor.getContent() != $scope.field.detail) { editor.setContent($scope.field.detail); } $scope.$watch('field', function (item) { if (editor && editor.getContent() != item.detail) { editor.setContent(item.detail ? item.detail : ''); } },true); }); editor.addListener('clearRange', function () { $scope.field.detail = editor.getContent(); $scope.$apply(); }); }); ```