前端——添加JS依賴(lài)
<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下添加到項(xiàng)目工程中，如果你的工程是maven工程，建議您建立user Libraries,并且加入到Deloyment Assembly中
注意:commons-io-2.4.jar為必須，不能小于這個(gè)版本，否則報(bào)錯(cuò)，因?yàn)闆](méi)有ueditor所需的方法，如果你的commons-io小于這個(gè)版本，請(qǐng)升級(jí)
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 );
-
- %>
- <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>
- (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">這里寫(xiě)你的初始化內(nèi)容</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, //初始化編輯器寬度,默認(rèn)1000
- initialFrameHeight:scope.config.initialFrameHeight?scope.config.initialFrameHeight:320, //初始化編輯器高度,默認(rèn)320
- readonly : scope.config.readonly?scope.config.readonly:false ,//編輯器初始化結(jié)束后,編輯區(qū)域是否是只讀的，默認(rèn)是false
- enableAutoSave: scope.config.enableAutoSave?scope.config.enableAutoSave:true, //啟用自動(dòng)保存
- saveInterval: scope.config.saveInterval?scope.config.saveInterval:500, //自動(dòng)保存間隔時(shí)間， 單位ms
- fullscreen : scope.config.fullscreen?scope.config.fullscreen:false,//是否開(kāi)啟初始化時(shí)即全屏，默認(rèn)關(guān)閉
- imagePopup: scope.config.imagePopup?scope.config.imagePopup:true, //圖片操作的浮層開(kāi)關(guān)，默認(rèn)打開(kāi)
- allHtmlEnabled:scope.config.allHtmlEnabled?scope.config.allHtmlEnabled:false //提交到后臺(tái)的數(shù)據(jù)是否包含整個(gè)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) {
-
- }
- }
- }
- }
- } ]);
-
- })();
構(gòu)建ueditor結(jié)構(gòu)
<div ueditor id="container" config="{{config}}" ></div>
<div ueditor id="container2" config="{{config2}}" ></div>
ueditor指令屬性必須。 id必須,指定了編輯器的唯一標(biāo)識(shí)。config可以省略,為ueditor的配置項(xiàng)。
配置ueditor
最簡(jiǎn)配置示例:初始化富文本內(nèi)容即可
$scope.config={
content : '<p>test1</p>',
};
完整配置示例 :
- $scope.config={
- //初始化編輯器內(nèi)容
- content : '<p>test1</p>',
- //是否聚焦 focus默認(rèn)為false
- focus : true,
- //首行縮進(jìn)距離,默認(rèn)是2em
- indentValue:'2em',
- //初始化編輯器寬度,默認(rèn)1000
- initialFrameWidth:1000,
- //初始化編輯器高度,默認(rèn)320
- initialFrameHeight:320,
- //編輯器初始化結(jié)束后,編輯區(qū)域是否是只讀的，默認(rèn)是false
- readonly : false ,
- //啟用自動(dòng)保存
- enableAutoSave: false,
- //自動(dòng)保存間隔時(shí)間， 單位ms
- saveInterval: 500,
- //是否開(kāi)啟初始化時(shí)即全屏，默認(rèn)關(guān)閉
- fullscreen : false,
- //圖片操作的浮層開(kāi)關(guān)，默認(rèn)打開(kāi)
- imagePopup:true,
- //提交到后臺(tái)的數(shù)據(jù)是否包含整個(gè)html字符串
- allHtmlEnabled:false,
- //額外功能添加 functions :['map','insertimage','insertvideo','attachment',
- ,'insertcode','webapp','template',
- 'background','wordimage']
- };
額外功能描述
屬性 | 描述 |
print | 打印功能 |
insertimage | 具有在線圖片管理、批量上傳、插入在線圖片這三個(gè)功能 |
insertvideo | 具有批量上傳、插入網(wǎng)絡(luò)視頻這兩個(gè)功能 |
attachment | 批量上傳附件和附件在線管理功能 |
map | 百度地圖功能 |
insertcode | 代碼編輯器功能 |
template | 模板功能 |
background | 設(shè)置當(dāng)前富文本編輯的背景 |
wordimage | 圖片轉(zhuǎn)存功能 |
注意：上傳圖片/視頻/附件保存在web目錄/uedito/jsp/upload文件夾下
全局配置請(qǐng)修改ueditor.config.js文件，配置非常多，不在文檔中一一列舉，文件中配置用法已注釋
上傳配置請(qǐng)修改config.json文件,配置非常多，文件中配置用法已注釋
Ueditor方法
.ueditorSetContent(id,value)
設(shè)置對(duì)應(yīng)ueditor編輯器的內(nèi)容，注意：這個(gè)方法不能在初始化之前使用
.ueditorGetContent(id)
獲取ueditor編輯器中的全部?jī)?nèi)容
.ueditorGetContentTxt(id)
獲取ueditor編輯器中的文本內(nèi)容
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內(nèi)容</button>
- <button ng-click="getContent('container2')" >獲取container2內(nèi)容</button>
- <br/> <br/>
- <button ng-click="getContentTxt('container')" >獲取container內(nèi)容Txt</button>
- <button ng-click="getContentTxt('container2')" >獲取container2內(nèi)容Txt</button>
- <br/> <br/>
- <button ng-click="setContent()" >設(shè)置container內(nèi)容</button>
- <button ng-click="setContent2()" >設(shè)置container2內(nèi)容</button>
JS
