angularjs整合ueditor简介

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

<%@ page language="java" contentType="text/html; charset=UTF-8"import="com.baidu.ueditor.ActionEnter"    pageEncoding="UTF-8"%><%@ page trimDirectiveWhitespaces="true" %><%    request.setCharacterEncoding( "utf-8" );response.setHeader("Content-Type" , "text/html");String rootPath = application.getRealPath( "/" );String action = request.getParameter("action");String result = new ActionEnter( request, rootPath ).exec();if( action!=null &&    (action.equals("listfile") || action.equals("listimage") ) ){    rootPath = rootPath.replace("\\", "/");    result = result.replaceAll(rootPath, "");}out.write( result );%>

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

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

ueditorDirective.js

(function() {    'use strict';    var page = angular.module('ueditor.directive', []);    page.directive('ueditor', [            '$templateCache',            function($templateCache) {                return {                    restrict : 'AE',                    template : '<script id="ueditorId" name="content" type="text/plain">这里写你的初始化内容</script>',                    scope : false,                    compile: function(element, attr) {                      return {                          pre: function(scope, iElement, iAttrs, controller) {                               var editorFunctions=[ 'fullscreen', 'source', '|', 'undo', 'redo', '|', 'bold',                                                    'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript',                                                    'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|',                                                    'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall',                                                    'cleardoc', '|', 'rowspacingtop', 'rowspacingbottom', 'lineheight', '|', 'customstyle',                                                    'paragraph', 'fontfamily', 'fontsize', '|', 'directionalityltr', 'directionalityrtl',                                                    'indent', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|',                                                    'touppercase', 'tolowercase', '|', 'link', 'unlink', 'anchor', '|', 'imagenone',                                                    'imageleft', 'imageright', 'imagecenter', '|', 'simpleupload', 'emotion', 'scrawl',                                                    'insertframe', 'pagebreak', '|', 'horizontal', 'date', 'time', 'spechars', '|',                                                    'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow',                                                    'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells',                                                    'splittorows', 'splittocols', 'charts', '|', 'preview', 'searchreplace', 'drafts'] ;                                       scope.ueditorId=attr.id;                              scope.config={};                              if(attr.config!=''&&attr.config!=undefined){                                  scope.config=$.parseJSON(attr.config);                                  editorFunctions=editorFunctions.concat($.parseJSON(attr.config).functions);                              }                                                                UE.delEditor(scope.ueditorId);                              var editor = UE.getEditor(scope.ueditorId,{                                  toolbars: [editorFunctions] ,                                  initialContent : scope.config.content?scope.config.content:'',                                  focus: scope.config.focus?scope.config.focus:false,                                  indentValue:scope.config.indentValue?scope.config.indentValue:'2em',                                  initialFrameWidth:scope.config.initialFrameWidth?scope.config.initialFrameWidth:1000,  //初始化编辑器宽度,默认1000                                  initialFrameHeight:scope.config.initialFrameHeight?scope.config.initialFrameHeight:320, //初始化编辑器高度,默认320                                  readonly : scope.config.readonly?scope.config.readonly:false ,//编辑器初始化结束后,编辑区域是否是只读的，默认是false                                  enableAutoSave: scope.config.enableAutoSave?scope.config.enableAutoSave:true,     //启用自动保存                                  saveInterval: scope.config.saveInterval?scope.config.saveInterval:500,  //自动保存间隔时间， 单位ms                                  fullscreen : scope.config.fullscreen?scope.config.fullscreen:false,//是否开启初始化时即全屏，默认关闭                                  imagePopup: scope.config.imagePopup?scope.config.imagePopup:true,     //图片操作的浮层开关，默认打开                                  allHtmlEnabled:scope.config.allHtmlEnabled?scope.config.allHtmlEnabled:false //提交到后台的数据是否包含整个html字符串                                      });                                                            editor.ready(function(){                                                             });                                                            scope.ueditorSetContent=function(id,value){                                  var editor = UE.getEditor(id);                                  editor.setContent(value);                              }                                                            scope.ueditorGetContent=function(id){                                  var editor = UE.getEditor(id);                                  return editor.getContent();                              }                                                            scope.ueditorGetContentTxt=function(id){                                  var editor = UE.getEditor(id);                                  return editor.getContentTxt();                              }                          },                          post: function(scope, iElement, iAttrs, controller) {                                                           }                      }                    }                }            } ]);})();

构建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>',   

           };

完整配置示例 :

 

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

额外功能描述

属性

描述

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

<pre name="code" class="html">  <div ueditor id="container"  config="{{config}}" ></div>  <div ueditor id="container2" config="{{config2}}" style="margin-top:20px" ></div>    <button ng-click="getContent('container')" >获取container内容</button>  <button ng-click="getContent('container2')" >获取container2内容</button>  <br/> <br/>  <button ng-click="getContentTxt('container')" >获取container内容Txt</button>  <button ng-click="getContentTxt('container2')" >获取container2内容Txt</button>   <br/> <br/>  <button ng-click="setContent()" >设置container内容</button>  <button ng-click="setContent2()" >设置container2内容</button>

JS

   $scope.config={                //初始化编辑器内容                content : '<p>test1</p>',                //是否聚焦 focus默认为false                focus : true,                //首行缩进距离,默认是2em                indentValue:'2em',                //初始化编辑器宽度,默认1000                initialFrameWidth:1000,                //初始化编辑器高度,默认320                initialFrameHeight:320,                //编辑器初始化结束后,编辑区域是否是只读的，默认是false                readonly : false ,                //启用自动保存                enableAutoSave: false,                //自动保存间隔时间， 单位ms                saveInterval: 500,                //是否开启初始化时即全屏，默认关闭                fullscreen : false,                //图片操作的浮层开关，默认打开                imagePopup:true,                     //提交到后台的数据是否包含整个html字符串                allHtmlEnabled:false,                functions :['map','insertimage','insertvideo','attachment','insertcode','template', 'background', 'wordimage']             };        $scope.config2={                functions :['map']             };        $scope.getContent=function(id){           var content=$scope.ueditorGetContent(id);               alert(content);        }        $scope.getContentTxt=function(id){            var content=$scope.ueditorGetContentTxt(id);                alert(content);         }        $scope.setContent=function(){            $scope.ueditorSetContent("container","111111");                  }          $scope.setContent2=function(){            $scope.ueditorSetContent("container2","222222");                  }