Angularjs在線編輯器


1、TextAngular:
https://github.com/fraywing/textAngular

textAngular是一個強大的Text-Editor/Wysiwyg 編輯器,用於Angular.js應用中。
安裝使用方便,可以創建多個編輯器實例,雙向綁定HTML內容,可以查看編輯內容的變化。
不足之處是不支持上傳文件到服務器,只能進行簡單的文字編輯,可用於網站的用戶評論模塊


 2、angular.xheditor:

https://github.com/cipchk/angular.xheditor   

xhEditor的AngularJS版本,沒有研究


3、angular-ueditor:

http://inhu.net/publish-angular-ueditor.html

Ueditor是百度提供的在線編輯器,功能非常豐富,angular-ueditor 是一款整合了 angular 和 UEditor 的插件。目的是為了更方便的在angular基礎上使用UEditor。
安裝非常方便:

(1)首先到官網下載百度ueditor1_4_3-utf8-jsp.zip

(2)解壓ueditor1_4_3-utf8-jsp.zip到自己的工程web目錄,將jsp/lib目錄下的jar包剪切到WEB-INF/lib目錄下,這些jar是用來進行文件上傳操作的,如果缺少的話是無法進行文件上傳動作的。

(3)下載angular-ueditor-master.zip,解壓縮后,將其中的angular-ueditor.js拷貝到自己的工程web目錄中

(4)在單頁面應用中需要增加的js文件

<script type="text/javascript" src="ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="ueditor/ueditor.all.js"></script>
<script type="text/javascript" src="angular-ueditor.js"></script>

(5)在app.js中將angular-ueditor引入到模塊;在html應用中並綁定ng-model

angular.module('app', ['ng.ueditor'])
......
<div class="ueditor" ng-model="content"></div>

(6)上傳圖片默認路徑的修改(參考www . suchso . com/UIweb/baidu-UEditor-image-upload-config-url.html)

所有的上傳配置選項都在一個文件中配置,這個文件就是ueditor/jsp/config.json,例如imagePathFormat表示了文件上傳到什么目錄下。

"imagePathFormat": "./ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}"


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM