angularjs整合ueditor简介

angularjs整合ueditor简介

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

angularjs整合ueditor简介_第1张图片angularjs整合ueditor简介_第2张图片angularjs整合ueditor简介_第3张图片angularjs整合ueditor简介_第4张图片angularjs整合ueditor简介_第5张图片

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
  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
  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
  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
  1.  $scope.config={  
  2.                 //初始化编辑器内容  
  3.                 content : '<p>test1p>',  
  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
  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内容Txtbutton>  
  8.   <button ng-click="getContentTxt('container2')" >获取container2内容Txtbutton>  
  9.    <br/> <br/>  
  10.   <button ng-click="setContent()" >设置container内容button>  
  11.   <button ng-click="setContent2()" >设置container2内容button>  

JS
[html]  view plain  copy
  1. $scope.config={  
  2.              //初始化编辑器内容  
  3.              content : '<p>test1p>',  
  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.      }    

你可能感兴趣的:(angularjs整合ueditor简介)