# 百度編輯器 [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(); }); }); ```