angularjs統合ueditor入門

Ueditor 1.4.3.3 (jsp版) の脆弱性を修正しました。

<テーブル

1

Ueditorが2回目のロードでDomのレンダリングに失敗する

2

複数画像のアップロード - オンライン管理 絶対パスリソースを使用した画像に関する問題で、Google Chromeでのアクセスがブロックされる

3

Controller.jspの画像判定問題

4

画像検索オンライン、Googleマップなど、長い間使われていなかった機能を削除する。

フロントエンド - JSの依存関係を追加する

<スパン <

スクリプト 言語 = "javascript"。 src = "ueditor/ueditor.config.js"。 ></ スクリプト >

<スパン <

スクリプト 言語 = "javascript"。 src = "ueditor/ueditor.all.js"。 ></ スクリプト >

<スパン <

スクリプト 言語 = "javascript"。 src = エディター / ueditorDirective.js"。 ></ スクリプト >

<スパン <スパン フロントエンド - モジュールの追加 

<スパン ヴァル  myAppModule =  angularを使用します。 モジュール ( ' アプリ ' <スパン , [ <スパン ' ueditor.directive ' ]) ;

<スパン バックエンド - jarパッケージの追加

ueditor/jsp/libのjarをプロジェクトに追加します。プロジェクトがmavenプロジェクトの場合、ユーザーLibrariesを作成し、Deloyment Assemblyに追加することをお勧めします。

<スパン 備考 :commons-io-2.4.jar。 は必須であり、このバージョンより小さくすることはできません。 ueditor の場合、必須のメソッドです。 コモンズ-イオ このバージョンより低い場合は、アップグレードしてください

ueditorでcontroller.jspを表示したところ

<%@ page language="java" contentType="text/html; charset=UTF-8"
	import="com.baidu.uiditor.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& gt;
            <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& gt;
            <span class="tab" data-content-id="search" style="display:none"><var id="lang_tab_search& quot;></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"> write your initialization here</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', 'insertorderedli

<スパン ueditorの構造体構築

<スパン <

ディブ ユーエディター イド = コンテナ" コンフィグ = となります。 <未定義 {config}}" <スパン ></ ディブ >

<スパン <

ディブ ueditor <スパン イド = コンテナ2" コンフィグ = となります。 <未定義 {config2}}" ></ ディブ >

<スパン  ueditor ディレクティブ属性は必須です。id は必須で、エディタの一意な識別子を指定します。 config は ueditor の設定項目として省略することができます。

<スパン uiditorの設定

最小限の設定例：リッチテキストコンテンツの初期化のみ

  $scope.config={ <未定義

                コンテンツ: '<p>test1</p>' とします。 ,

           };

<スパン 完全な構成例 :

 $scope.config={
                //initialize editor content
                content : '<p>test1</p>',
                //whether to focus or not focus defaults to false
                focus : true,
                //first line indent distance, default is 2em
                indentValue:'2em',
                //initial editor width, default is 1000
                initialFrameWidth:1000,
                //initialize the editor height, default 320
                initialFrameHeight:320,
                //whether the editor area is read-only after the editor initialization, default is false
                readonly : false ,
                //Enable auto save
                enableAutoSave: false,
                //AutoSave interval, in ms
                saveInterval: 500,
                //whether to enable fullscreen on initialization, default off
                fullscreen : false,
                //float switch for image manipulation, default on
                imagePopup: true,     
                //whether the data submitted to the backend contains the whole html string
                allHtmlEnabled:false,
         //additional functions functions :['map','insertimage','insertvideo','attachment',
,'insertcode','webapp','template',
'background','wordimage']     
        };

<スパン 追加機能の説明

<テーブル

<スパン <スパン 属性

<スパン <スパン 説明

<スパン プリント

<スパン プリント機能

<スパン 挿入画像

<スパン オンライン画像管理、一括アップロード、オンライン画像挿入の3つの機能付き

<スパン インサートビデオ

<スパン 一括アップロードとWeb動画挿入の2つの機能で

<スパン 添付ファイル

<スパン 添付ファイルの一括アップロードと添付ファイルのオンライン管理機能

<スパン 地図

<スパン Baiduマップの特徴

<スパン インサートコード

<スパン コードエディタ機能

<スパン テンプレート

<スパン テンプレート機能

<スパン 背景

<スパン 現在のリッチテキストエディタの背景を設定する

<スパン ワードイメージ

<スパン 画像ダンプ機能

注意：アップロードされた画像/動画/添付ファイルは、webディレクトリ/uedito/jsp/uploadフォルダに保存されます。

      グローバルな設定は、ueditor.config.jsファイルを変更してください、設定は非常に多く、ドキュメントにはありません、ファイル内の設定の使用方法はコメントされています

      設定をアップロードするには、config.jsonファイルを修正してください、多くの設定がありますが、ファイル内の設定の使用はコメントされています

<スパン Ueditorのメソッド

.ueditorSetContent(id,value)です。

  対応するueditorエディタの内容を設定します。注意：このメソッドは初期化前には使用できません。                             

.ueditorGetContent(id)

  ueditorのエディタにあるすべてのコンテンツを取得する              

.ueditorGetContentTxt(id)です。

  ueditorエディタでテキストコンテンツを取得する         

デモ 

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')" >Get container content</button>
  <button ng-click="getContent('container2')" >Get container2 content</button>
  <br/> <br/>
  <button ng-click="getContentTxt('container')" >Get container content Txt</button>
  <button ng-click="getContentTxt('container2')" >Get container2 Content Txt</button>
   <br/> <br/>
  <button ng-click="setContent()" >settainer content</button>
  <button ng-click="setContent2()" >Set container2 content</button>

JS

   $scope.config={
                //initialize editor content
                content : '<p>test1</p>',
                //whether to focus or not focus defaults to false
                focus : true,
                //first line indent distance, default is 2em
                indentValue:'2em',
                //initial editor width, default is 1000
                initialFrameWidth:1000,
                //initialize the editor height, default 320
                initialFrameHeight:320,
                //whether the editor area is read-only after the editor initialization, default is false
                readonly : false ,
                //Enable auto save
                enableAutoSave: false,
                // Auto-save interval in ms
                saveInterval: 500,
                //whether to turn on the initialization of the full screen, the default is off
                fullscreen : false,
                //Float switch for image manipulation, default on
                imagePopup: true,     
                //whether the data submitted to the backend contains the whole html string
                allHtmlEnabled:false, functions :['map','insertimage','insertvideo','attachment','insertcode','template', 'background', 'wordimage']     
        };
        $scope.config2={
                functions :['map']     
        };
        $scope.getContent=function(id){
           var content=$scope.uiditorGetContent(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","22222222");          
        }