AngularJS集成富文本編輯器

時間 2019-11-18

原文原文鏈接

　　最近在Angular中須要集成富文本編輯器,原本已經集成好百度的UEditor,後臺以爲配置太多，讓我弄個別的，而後就找到了wangEditor,這個配置和上手都要簡單一些，下面來看看具體操做步驟吧：javascript

　　首先你們能夠在https://github.com/wangfupeng1988/wangEditor或者官網http://www.wangeditor.com/ 進行下載，裏面文檔內容也很容易理解，能夠自行配置。下載後解壓，咱們須要用到的主要是wangEditor.js或者 wangEditor.min.js。下面附上目錄及代碼:html

 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>