angularjs整合ueditor简介

迈不过友情╰ 2022-06-08 13:49 176阅读 0赞

**angularjs整合ueditor简介**

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

![Center][]![Center 1][]![Center 2][]![Center 3][]![Center 4][]

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

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

## 前端——添加JS依赖 ##

## 前端——添加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][view plain]

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][view plain]

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][view plain]

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 : 'test1',

\};

### **完整配置示例 :** ###

**\[html\]**  [view plain][]   [copy][view plain]

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.         \};

### **额外功能描述** ###

<table> 
 <tbody> 
 <tr> 
 <td style="background:rgb(247,247,247)"> 属性 </td> 
 <td style="background:rgb(247,247,247)"> 描述 </td> 
 </tr> 
 <tr> 
 <td style="background:rgb(253,253,253)"> print </td> 
 <td style="background:rgb(253,253,253)"> 打印功能 </td> 
 </tr> 
 <tr> 
 <td style="background:rgb(253,253,253)"> insertimage </td> 
 <td style="background:rgb(253,253,253)"> 具有在线图片管理、批量上传、插入在线图片这三个功能 </td> 
 </tr> 
 <tr> 
 <td style="background:rgb(253,253,253)"> insertvideo </td> 
 <td style="background:rgb(253,253,253)"> 具有批量上传、插入网络视频这两个功能 </td> 
 </tr> 
 <tr> 
 <td style="background:rgb(253,253,253)"> attachment </td> 
 <td style="background:rgb(253,253,253)"> 批量上传附件和附件在线管理功能 </td> 
 </tr> 
 <tr> 
 <td style="background:rgb(253,253,253)"> map </td> 
 <td style="background:rgb(253,253,253)"> 百度地图功能 </td> 
 </tr> 
 <tr> 
 <td style="background:rgb(253,253,253)"> insertcode </td> 
 <td style="background:rgb(253,253,253)"> 代码编辑器功能 </td> 
 </tr> 
 <tr> 
 <td style="background:rgb(253,253,253)"> template </td> 
 <td style="background:rgb(253,253,253)"> 模板功能 </td> 
 </tr> 
 <tr> 
 <td style="background:rgb(253,253,253)"> background </td> 
 <td style="background:rgb(253,253,253)"> 设置当前富文本编辑的背景 </td> 
 </tr> 
 <tr> 
 <td style="background:rgb(253,253,253)"> wordimage </td> 
 <td style="background:rgb(253,253,253)"> 图片转存功能 </td> 
 </tr> 
 </tbody> 
</table>

**注意：上传图片/视频/附件保存在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][view plain]

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****>**

**\[html\]**  [view plain][]   [copy][view plain]

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.      \}

[Center]: https://img-blog.csdn.net/20160815215517286?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 1]: https://img-blog.csdn.net/20160815215534021?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 2]: https://img-blog.csdn.net/20160815215540714?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 3]: https://img-blog.csdn.net/20160815215550724?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 4]: /images/20220608/85ec878744e04f75a656d4e1d94d0baf.png
[view plain]: http://blog.csdn.net/pkpk20044/article/details/52215152#