angularjs整合ueditor简介

UEditor是一个富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码,本文介绍的是Ueditor与angular JS整合的方法

Ueditor 1.4.3.3(jsp版本) 漏洞修复  ,修复方法见下文

1	Ueditor第二次加载Dom渲染失败的问题
2	多图上传-在线管理 谷歌浏览器下图片使用绝对路径资源禁止访问的问题
3	Controller.jsp图片判断问题
4	删除一些早已失效的功能，如图片在线搜索、谷歌地图等

前端——添加JS依赖

<script language="javascript" src="ueditor/ueditor.config.js"></script>

<script language="javascript" src="ueditor/ueditor.all.js"></script>

<script language="javascript" src="ueditor/ueditorDirective.js"></script>

前端——添加Module 

var myAppModule= angular.module('app', ['ueditor.directive']);

后端——添加jar包

把ueditor/jsp/lib中的jar下添加到项目工程中，如果你的工程是maven工程，建议您建立user Libraries,并且加入到Deloyment Assembly中

注意:commons-io-2.4.jar为必须，不能小于这个版本，否则报错，因为没有ueditor所需的方法，如果你的commons-io小于这个版本，请升级

ueditor中的 controller.jsp

[html] view plain copy

print?

1. <%@ page language="java" contentType="text/html; charset=UTF-8"  
2.     import="com.baidu.ueditor.ActionEnter"  
3.     pageEncoding="UTF-8"%>  
4. <%@ page trimDirectiveWhitespaces="true" %>  
5. <%  
6.   
7.     request.setCharacterEncoding( "utf-8" );  
8.     response.setHeader("Content-Type" , "text/html");  
9.       
10.     String rootPath = application.getRealPath( "/" );  
11.     String action = request.getParameter("action");  
12.     String result = new ActionEnter( request, rootPath ).exec();  
13.     if( action!=null &&   
14.        (action.equals("listfile") || action.equals("listimage") ) ){  
15.         rootPath = rootPath.replace("\\", "/");  
16.         result = result.replaceAll(rootPath, "");  
17.     }  
18.     out.write( result );  
19.       
20. %>  

ueditor中的 image.html  隐藏早已失效的在线搜索功能（display:none）

[html] view plain copy

print?

1. <div id="tabhead" class="tabhead">  
2.             <span class="tab" data-content-id="remote"><var id="lang_tab_remote"></var></span>  
3.             <span class="tab focus" data-content-id="upload"><var id="lang_tab_upload"></var></span>  
4.             <span class="tab" data-content-id="online"><var id="lang_tab_online"></var></span>  
5.             <span class="tab" data-content-id="search" style="display:none"><var id="lang_tab_search"></var></span>  
6.         </div>  

ueditorDirective.js

[html] view plain copy

print?

1. (function() {  
2.     'use strict';  
3.     var page = angular.module('ueditor.directive', []);  
4.     page.directive('ueditor', [  
5.             '$templateCache',  
6.             function($templateCache) {  
7.                 return {  
8.                     restrict : 'AE',  
9.                     template : '<script id="ueditorId" name="content" type="text/plain">这里写你的初始化内容</script>',  
10.                     scope : false,  
11.                     compile: function(element, attr) {  
12.                       return {  
13.                           pre: function(scope, iElement, iAttrs, controller) {   
14.                               var editorFunctions=[ 'fullscreen', 'source', '|', 'undo', 'redo', '|', 'bold',  
15.                                                     'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript',  
16.                                                     'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|',  
17.                                                     'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall',  
18.                                                     'cleardoc', '|', 'rowspacingtop', 'rowspacingbottom', 'lineheight', '|', 'customstyle',  
19.                                                     'paragraph', 'fontfamily', 'fontsize', '|', 'directionalityltr', 'directionalityrtl',  
20.                                                     'indent', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|',  
21.                                                     'touppercase', 'tolowercase', '|', 'link', 'unlink', 'anchor', '|', 'imagenone',  
22.                                                     'imageleft', 'imageright', 'imagecenter', '|', 'simpleupload', 'emotion', 'scrawl',  
23.                                                     'insertframe', 'pagebreak', '|', 'horizontal', 'date', 'time', 'spechars', '|',  
24.                                                     'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow',  
25.                                                     'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells',  
26.                                                     'splittorows', 'splittocols', 'charts', '|', 'preview', 'searchreplace', 'drafts'] ;           
27.                               scope.ueditorId=attr.id;  
28.                               scope.config={};  
29.                               if(attr.config!=''&&attr.config!=undefined){  
30.                                   scope.config=$.parseJSON(attr.config);  
31.                                   editorFunctions=editorFunctions.concat($.parseJSON(attr.config).functions);  
32.                               }      
33.                                 
34.                               UE.delEditor(scope.ueditorId);  
35.                               var editor = UE.getEditor(scope.ueditorId,{  
36.                                   toolbars: [editorFunctions] ,  
37.                                   initialContent : scope.config.content?scope.config.content:'',  
38.                                   focus: scope.config.focus?scope.config.focus:false,  
39.                                   indentValue:scope.config.indentValue?scope.config.indentValue:'2em',  
40.                                   initialFrameWidth:scope.config.initialFrameWidth?scope.config.initialFrameWidth:1000,  //初始化编辑器宽度,默认1000  
41.                                   initialFrameHeight:scope.config.initialFrameHeight?scope.config.initialFrameHeight:320, //初始化编辑器高度,默认320  
42.                                   readonly : scope.config.readonly?scope.config.readonly:false ,//编辑器初始化结束后,编辑区域是否是只读的，默认是false  
43.                                   enableAutoSave: scope.config.enableAutoSave?scope.config.enableAutoSave:true,     //启用自动保存  
44.                                   saveInterval: scope.config.saveInterval?scope.config.saveInterval:500,  //自动保存间隔时间， 单位ms  
45.                                   fullscreen : scope.config.fullscreen?scope.config.fullscreen:false,//是否开启初始化时即全屏，默认关闭  
46.                                   imagePopup: scope.config.imagePopup?scope.config.imagePopup:true,     //图片操作的浮层开关，默认打开  
47.                                   allHtmlEnabled:scope.config.allHtmlEnabled?scope.config.allHtmlEnabled:false //提交到后台的数据是否包含整个html字符串          
48.                               });  
49.                                 
50.                               editor.ready(function(){  
51.                                  
52.                               });  
53.                                 
54.                               scope.ueditorSetContent=function(id,value){  
55.                                   var editor = UE.getEditor(id);  
56.                                   editor.setContent(value);  
57.                               }  
58.                                 
59.                               scope.ueditorGetContent=function(id){  
60.                                   var editor = UE.getEditor(id);  
61.                                   return editor.getContent();  
62.                               }  
63.                                 
64.                               scope.ueditorGetContentTxt=function(id){  
65.                                   var editor = UE.getEditor(id);  
66.                                   return editor.getContentTxt();  
67.                               }  
68.                           },  
69.                           post: function(scope, iElement, iAttrs, controller) {     
70.                                 
71.                           }  
72.                       }  
73.                     }  
74.                 }  
75.             } ]);  
76.   
77. })();  

构建ueditor结构

  <div ueditor id="container"  config="{{config}}"  ></div>

  <div ueditor id="container2" config="{{config2}}" ></div>

 ueditor指令属性必须。 id必须,指定了编辑器的唯一标识。config可以省略,为ueditor的配置项。

配置ueditor

最简配置示例:初始化富文本内容即可

  $scope.config={

                content : '<p>test1</p>',   

           };

完整配置示例 :

 

[html] view plain copy

print?

1.  $scope.config={  
2.                 //初始化编辑器内容  
3.                 content : '<p>test1</p>',  
4.                 //是否聚焦 focus默认为false  
5.                 focus : true,  
6.                 //首行缩进距离,默认是2em  
7.                 indentValue:'2em',  
8.                 //初始化编辑器宽度,默认1000  
9.                 initialFrameWidth:1000,  
10.                 //初始化编辑器高度,默认320  
11.                 initialFrameHeight:320,  
12.                 //编辑器初始化结束后,编辑区域是否是只读的，默认是false  
13.                 readonly : false ,  
14.                 //启用自动保存  
15.                 enableAutoSave: false,  
16.                 //自动保存间隔时间， 单位ms  
17.                 saveInterval: 500,  
18.                 //是否开启初始化时即全屏，默认关闭  
19.                 fullscreen : false,  
20.                 //图片操作的浮层开关，默认打开  
21.                 imagePopup:true,       
22.                 //提交到后台的数据是否包含整个html字符串  
23.                 allHtmlEnabled:false,  
24.          //额外功能添加                 functions :['map','insertimage','insertvideo','attachment',  
25. ,'insertcode','webapp','template',  
26. 'background','wordimage']       
27.         };  

额外功能描述

属性	描述
print	打印功能
insertimage	具有在线图片管理、批量上传、插入在线图片这三个功能
insertvideo	具有批量上传、插入网络视频这两个功能
attachment	批量上传附件和附件在线管理功能
map	百度地图功能
insertcode	代码编辑器功能
template	模板功能
background	设置当前富文本编辑的背景
wordimage	图片转存功能

注意：上传图片/视频/附件保存在web目录/uedito/jsp/upload文件夹下

      全局配置请修改ueditor.config.js文件，配置非常多，不在文档中一一列举，文件中配置用法已注释

      上传配置请修改config.json文件,配置非常多，文件中配置用法已注释

Ueditor方法

 .ueditorSetContent(id,value)

  设置对应ueditor编辑器的内容，注意：这个方法不能在初始化之前使用                             

.ueditorGetContent(id)

  获取ueditor编辑器中的全部内容              

.ueditorGetContentTxt(id)

  获取ueditor编辑器中的文本内容         

 

Demo 

Html

[html] view plain copy

print?

1. <pre name="code" class="html">  <div ueditor id="container"  config="{{config}}" ></div>  
2.   <div ueditor id="container2" config="{{config2}}" style="margin-top:20px" ></div>  
3.     
4.   <button ng-click="getContent('container')" >获取container内容</button>  
5.   <button ng-click="getContent('container2')" >获取container2内容</button>  
6.   <br/> <br/>  
7.   <button ng-click="getContentTxt('container')" >获取container内容Txt</button>  
8.   <button ng-click="getContentTxt('container2')" >获取container2内容Txt</button>  
9.    <br/> <br/>  
10.   <button ng-click="setContent()" >设置container内容</button>  
11.   <button ng-click="setContent2()" >设置container2内容</button>  

JS

[html] view plain copy

print?

1. $scope.config={  
2.              //初始化编辑器内容  
3.              content : '<p>test1</p>',  
4.              //是否聚焦 focus默认为false  
5.              focus : true,  
6.              //首行缩进距离,默认是2em  
7.              indentValue:'2em',  
8.              //初始化编辑器宽度,默认1000  
9.              initialFrameWidth:1000,  
10.              //初始化编辑器高度,默认320  
11.              initialFrameHeight:320,  
12.              //编辑器初始化结束后,编辑区域是否是只读的，默认是false  
13.              readonly : false ,  
14.              //启用自动保存  
15.              enableAutoSave: false,  
16.              //自动保存间隔时间， 单位ms  
17.              saveInterval: 500,  
18.              //是否开启初始化时即全屏，默认关闭  
19.              fullscreen : false,  
20.              //图片操作的浮层开关，默认打开  
21.              imagePopup:true,       
22.              //提交到后台的数据是否包含整个html字符串  
23.              allHtmlEnabled:false,                functions :['map','insertimage','insertvideo','attachment','insertcode','template', 'background', 'wordimage']       
24.      };  
25.      $scope.config2={  
26.              functions :['map']       
27.      };  
28.      $scope.getContent=function(id){  
29.         var content=$scope.ueditorGetContent(id);      
30.         alert(content);  
31.      }  
32.      $scope.getContentTxt=function(id){  
33.          var content=$scope.ueditorGetContentTxt(id);      
34.          alert(content);  
35.       }  
36.      $scope.setContent=function(){  
37.          $scope.ueditorSetContent("container","111111");            
38.      }    
39.      $scope.setContent2=function(){  
40.          $scope.ueditorSetContent("container2","222222");            
41.      }