AngularJS集成富文本編輯器
阿新 • • 發佈：2018-06-11
lin body round tor alert clas head HA ued
最近在Angular中需要集成富文本編輯器,本來已經集成好百度的UEditor,後臺覺得配置太多，讓我弄個別的，然後就找到了wangEditor,這個配置和上手都要簡單一些，下面來看看具體操作步驟吧：
首先大家可以在https://github.com/wangfupeng1988/wangEditor或者官網http://www.wangeditor.com/ 進行下載，裏面文檔內容也很容易理解，可以自行配置。下載後解壓，我們需要用到的主要是wangEditor.js或者 wangEditor.min.js。下面附上目錄及代碼:
1 <html> 2 <head>3 <title>angular集成wangEditor</title> 4 <meta charset="utf-8"> 5 <script src="js/angular.min.js"></script> 6 <script src="js/wangEditor.min.js"></script> 7 </head> 8 <body ng-app="myApp" ng-controller="myCtrl"> 9 <div id="editor"ng-model="sendPromt"></div> 10 <button ng-click="getContent()">獲取html</button> <br /> 11 <button ng-click="getContent2()">獲取text</button> <br /> 12 <script type="text/javascript"> 13 var app = angular.module(‘myApp‘,[]); 14 app.controller(‘myCtrl‘,[‘$scope‘,function($scope){ 15 //配置wangEditor 16 var E, editor; 17 E = window.wangEditor; 18 editor = new E(‘#editor‘); //id一定要一致 19 editor.customConfig.menus = [ 20 ‘head‘, // 標題 21 ‘bold‘, // 粗體 22 ‘fontSize‘, // 字號 23 ‘fontName‘, // 字體 24 ‘italic‘, // 斜體 25 ‘underline‘, // 下劃線 26 ‘foreColor‘, // 文字顏色 27 ‘backColor‘, // 背景顏色 28 ‘link‘, // 插入鏈接 29 ‘list‘, // 列表 30 ‘justify‘, // 對齊方式 31 ‘image‘, // 插入圖片 32 ‘table‘, // 表格 33 ‘video‘, // 插入視頻 34 ‘code‘, // 插入代碼 35 ‘undo‘ // 撤銷 36 ]; 37 //如果需要使用 base64 編碼直接將圖片插入到內容中，可參考一下示例配置 38 editor.customConfig.uploadImgShowBase64 = true; 39 // 將圖片大小限制為 10M 40 editor.customConfig.uploadImgMaxSize = 10* 1024 * 1024; 41 editor.create(); 42 //獲取內容的方式 43 $scope.getContent = function(){ 44 alert(editor.txt.html()) 45 } 46 $scope.getContent2 = function(){ 47 alert(editor.txt.text()) 48 } 49 }]); 50 </script> 51 </body> 52 </html>
好了，最簡單的及成就完成了，下面直接訪問url進行測試即可，可以上傳圖片，獲取文本內容等，需要其他配置的自行設置即可。
謝謝。
AngularJS集成富文本編輯器