UMEditorアップロード画像ワード

1.4.2以降、オフィシャルは機能的な変更を行っていません1.4.2ワードコピーセクションにバグはなく、他のバージョンは手動で転送できません。

この記事で使用するバックエンドはJavaです。フロントエンドはJspです(フロントエンドは同じです。バックグラウンド言語が適切でない場合は、Base64エンコードとデコードを自分で行う必要があります)。

同社のビジネスはIE8をサポートする必要があるため、実際にはインターネット上に多くのリッチテキストボックスがあり、その効果は非常に良好です。

たとえば、www.wangEditor.comはトライアル後のIE8をサポートしていませんでした。

したがって、Ueditorに戻ると、公式のメンテナンス不足のため、新しい監査人は単語の自動ダンプをいつサポートするかわからないので、自分で解決策を見つけ出すことしかできません。

必要がない場合、ueditorは推奨されません。代替手段はありません。

変更されたプラグインはIE8にのみ適しています。

ここで説明するポイントは、Baiduの公式エディタが単語画像のバッチダンプをサポートしていないことです。単語を貼り付けた後、手動で画像を選択して再度アップロードする必要があります。インターネット上にあるほとんどの例は、この操作に関するものです。単語イメージをバッチで自動的にアップロードする必要がある場合は、WordPasterコントロールを使用できます。

 

1. IE設定

信頼済みサイトを信頼済みサイトに追加します。

ここでのローカルテストは直接http:// localhostです。

クライアントのファイルを読み取る必要があるため、データソースにアクセスするための権限を設定する必要があります。

ActiveXObject設定は、ここに記載されていない参照用にインターネットに送信できます。

フロント

IEの準備が整いました。

ueditor.all.jsのキーコードを変更します

行14006の近くで、それがueditorの別のバージョンである場合、関数が正常であれば、次のコードをコピーできます。

var imgPath = attrs.src;

var imgUrl = attrs.src;

if(navigator.appName === 'Microsoft Internet Explorer'){// IEブラウザーかどうかを判別

    if(navigator.userAgent.match(/ Trident / i)&& navigator.userAgent.match(/ MSIE 8.0 / i)){//ブラウザのカーネルがTridentカーネルIE8.0かどうかを確認

        var realPath = imgPath.substring(8、imgPath.length);

        var filename = imgPath.substring(imgPath.lastIndexOf( '/')+ 1、imgPath.length);

        var result = UploadForIE.saveAttachment(filename、realPath);

        もし(結果){

            var json = eval( '(' + result + ')');

            imgUrl = json.url;

        }

    }

}

img.setAttr({

 

    幅:attrs.width、

    高さ:attrs.height、

    alt:attrs.alt、

    word_img:attrs.src、

    src:imgUrl、

    'style': 'background:url(' +(flag?opt.themePath + opt.theme + '/images/word.gif':opt.langPath + opt.lang + '/images/localimage.png')+ ' )no-repeat center center; border:1px solid #ddd '

})

 

uploadForIE.js。

var UploadForIE = {

    // xml添付ファイルに保存し、ajax経由でアップロードします

    saveAttachment:function(upload_filename、localFilePath){

        //バックグラウンドで画像の保存を受け入れる方法。

        var upload_target_url = "uploadImg";

        var strTempFile = localFilePath;

        // XMLオブジェクトを作成し、XMLドキュメントデータを結合します

        var xml_dom = UploadForIE.createDocument();

        xml_dom.loadXML( '<?xml version = "1.0" encoding = "GBK"?> <root />');

        // ADODB.Streamオブジェクトを作成します

        var ado_stream = new ActiveXObject( "adodb.stream");

        //ストリームデータタイプをバイナリタイプに設定します

        ado_stream.Type = 1; // adTypeBinary

        // ADODB.Streamオブジェクトを開きます

        ado_stream.Open();

        //ローカルファイルをADODB.Streamオブジェクトにロードします

        ado_stream.LoadFromFile(strTempFile);

        //ファイルサイズを取得します(バイト単位)

        var byte_size = ado_stream.Size;

        //データ送信ユニットのサイズを1KBに設定します

        var byte_unit = 1024;

        //ファイル分割データユニットの数を取得します

        var read_count = parseInt((byte_size / byte_unit).toString())+ parseInt((((byte_size%byte_unit)== 0)?0:1);

 

        // XML要素ノードを作成し、アップロードされたファイル名を保存します

        var node = xml_dom.createElement( "uploadFilename");

        node.text = upload_filename.toString();

        var root = xml_dom.documentElement;

        root.appendChild(node);

 

        // XML要素ノードを作成し、アップロードされたファイルサイズを保存します

        var node = xml_dom.createElement( "uploadFileSize");

        node.text = byte_size.toString();

        root.appendChild(node);

 

        // XML要素ノードを作成し、アップロードされたファイルのコンテンツを保存します

        for(var i = 0; i <read_count; i ++){

            var node = xml_dom.createElement( "uploadContent");

            //ファイルコンテンツのエンコード方式はBase64です

            node.dataType = "bin.base64";

            //現在保存されているデータノードのサイズを決定し、条件に従って分類操作を実行します

            if((parseInt(byte_size%byte_unit)!= 0)&&(i == parseInt(read_count-1))){

                //データパケットサイズがデータユニットの整数倍でない場合、データユニットよりも小さい最後に残っているデータを読み取ります

                node.nodeTypedValue = ado_stream.Read();

            } そうしないと {

                //完全なデータユニットのデータを読み取ります

                node.nodeTypedValue = ado_stream.Read(byte_unit);

            }

            root.appendChild(node);

        }

 

        // ADODB.Streamオブジェクトを閉じます

        ado_stream.Close();

        ado_streamを削除します。

        // Microsoft.XMLHTTPオブジェクトを作成します

        // var xmlhttp = new ActiveXObject( "microsoft.xmlhttp");

        var xmlhttp = window.XMLHttpRequest?新しいXMLHttpRequest():新しいActiveXObject( "Microsoft.XMLHttp");

        // Microsoft.XMLHTPオブジェクトを開きます

        xmlhttp.open( "post"、upload_target_url、false);

        // Microsoft.XMLHTPオブジェクトを使用してファイルをアップロードします

        xmlhttp.send(xml_dom);

        var state = xmlhttp.readyState;

        var success_state = true;

        if(state!= 4){

            success_state = false;

        }

        var result = xmlhttp.responseText;

 

        xmlhttpを削除します。

        結果を返す;

    }、

 

    // DOMdocuemntを作成します

    createDocument:function(){

        var xmldom;

        var versions = ["MSXML2.DOMDocument.6.0"、 "MSXML2.DOMDocument.5.0"、 "MSXML2.DOMDocument.4.0"、 "MSXML2.DOMDocument.3.0"、 "MSXML2.DOMDocument"]、

        私、

        len;

        for(i = 0、len = versions.length; i <len; i ++){

            {を試す

                xmldom = new ActiveXObject(versions [i]);

                if(xmldom!= null)break;

            } catch(ex){

                //飛び越える

                alert( "ドキュメントオブジェクトの作成に失敗しました!");

            }

        }

        xmldomを返します。

    }

}

 

UEditorAction save pictureメソッド

@RequestMapping( "/ uploadImg")

    public void uploadADO(HttpServletRequest request、HttpServletResponse response){

        文字列path1 = request.getContextPath();

        文字列basePath = request.getScheme()+ "://" + request.getServerName()+ ":" + request.getServerPort()+ path1;

 

        文字列rootPath = request.getServletContext()。getRealPath( "/");

        //データ送信ユニットのサイズを1KBに設定します

        int unit_size = 1024;

        // xmlファイルのサイズを初期化します(バイト単位)

        int xmlFileSize = 0;

        //アップロードファイル名(完全なファイル名)を初期化します

        文字列xmlFilename = "";

        //アップロードファイルの保存パスを初期化します(絶対物理パス)

        文字列xmlFilepath = "";

        //ファイルストレージのバイト配列を宣言します

        byte [] xmlFileBytes = null;

        {を試す

            // SAXシリアルxmlファイルパーサーを初期化します

            SAXBuilderビルダー= new SAXBuilder();

            ドキュメントdoc = builder.build(request.getInputStream());

            要素eRoot = doc.getRootElement();

            //アップロードされたファイルの完全な名前を取得します

            イテレーターit_name = eRoot.getChildren( "uploadFilename")。iterator();

            if(it_name.hasNext()){

                xmlFilename =((Element)it_name.next())。getText();

            }

            //保存されている相対パスディレクトリ

            文字列relativePath = "/temp/"+EditorUtil.getToday()+"/";

            xmlFilepath = rootPath + relativePath;

 

            //アップロードされたファイルのサイズを取得します

            イテレーターit_size = eRoot.getChildren( "uploadFileSize")。iterator();

            if(it_size.hasNext()){

                xmlFileSize = Integer.parseInt(((Element)it_size.next())

                        .getText());

                if(xmlFileSize> 0){

                    int unit_count = 0;

                    //ファイルの内容を格納するバイト配列にストレージスペースを割り当てます

                    xmlFileBytes = new byte [xmlFileSize];

                    //ファイルの内容をループで読み取り、バイト配列に保存します

                    イテレーターit_content = eRoot.getChildren( "uploadContent")

                            .iterator();

                    while(it_content.hasNext()){

                        // Base64コーデックを初期化します

                        BASE64Decoder base64 = new BASE64Decoder();

                        byte [] xmlNodeByteArray = base64

                                .decodeBuffer(((Element)it_content.next())

                                        .getText());

                        if(xmlNodeByteArray.length> = unit_size){

                            //完全なデータユニットのデータを読み取ります

                            System.arraycopy(xmlNodeByteArray、0、xmlFileBytes、

                                    unit_count * unit_size、unit_size);

                        } そうしないと {

                            // 1データ単位未満のすべてのデータを読み取ります

                            System.arraycopy(xmlNodeByteArray、0、xmlFileBytes、

                                    unit_count * unit_size、xmlFileSize

                                            %unit_size);

                        }

                        //ファイルのコンテンツを引き続き読み続けます

                        unit_count ++;

                    }

                }

            }

 

            //ルートを保存します

            ファイルパス= new File(xmlFilepath);

            if(!path.exists()){

                path.mkdirs();

            }

            //ファイルの単語を保存し、画像の名前を貼り付けます

            ファイルfile = new File(path、xmlFilename);

            //ファイルの入出力ストリームを作成します

            FileOutputStream fos = new FileOutputStream(file);

            //ファイルの内容を書き込みます

            fos.write(xmlFileBytes);

            fos.flush();

            //ファイルの入出力ストリームを閉じます

            fos.close();

 

            ReturnUploadImage rui = new ReturnUploadImage();

            rui.setTitle(xmlFilename); //ここでファイル名を設定する必要があります。例:xxx.jpg

            rui.setOriginal(xmlFilename); //ファイル名をここで設定する必要があります。例:xxx.jpg

            rui.setState( "SUCCESS");

            rui.setUrl(basePath + relativePath + xmlFilename);

 

            JSONObject json = new JSONObject(rui);

            String result = json.toString(); //これはUEditorに戻るためのフォーマット変換です

            response.getWriter()。write(result);

        }キャッチ(例外e){

            e.printStackTrace();

        }

    }

最適化されたコード:

upload.jsp

<%@ page language = "java" import = "java.util。*" pageEncoding = "utf-8"%>

<%@ page contentType = "text / html; charset = utf-8"%>

<%@ページインポート= "Xproer。*"%>

<%@ page import = "org.apache.commons.lang.StringUtils"%>

<%@ page import = "org.apache.commons.fileupload。*"%>

<%@ page import = "org.apache.commons.fileupload.disk。*"%>

<%@ page import = "org.apache.commons.fileupload.servlet。*"%>

<%out.clear();

/ * 

    更新レコード:

        2013-01-25 SmartUploadの使用をキャンセルし、代わりにcommons-fileuploadコンポーネントを使用します。SmartUploadにメモリリークがあることがテストで判明したためです。

* /

//文字列パス= request.getContextPath();

// String basePath = request.getScheme()+ "://" + request.getServerName()+ ":" + request.getServerPort()+ path + "/";

 

文字列uname = ""; // = request.getParameter( "uid");

文字列upass = ""; // = request.getParameter( "fid");

 

//ファイルのアップロードリクエストがあることを確認します

boolean isMultipart = ServletFileUpload.isMultipartContent(request);

FileItemFactoryファクトリ=新しいDiskFileItemFactory();  

ServletFileUpload upload = new ServletFileUpload(factory);

//upload.setSizeMax(262144);//256KB

リストファイル= null;

試す

{

    ファイル= upload.parseRequest(request);

}

キャッチ(FileUploadException e)

{//ファイルサイズの例外の処理 

    out.println( "アップロードファイルの例外:" + e.toString());

    戻る;

  

}

 

FileItem imgFile = null;

//アップロードされたすべてのファイルを取得します

イテレーターfileItr = files.iterator();

//すべてのファイルをループします

while(fileItr.hasNext())

{

    //現在のファイルを取得します

    imgFile =(FileItem)fileItr.next();

    //アップロードフィールドのファイルフィールドではなく、単純なフォームフィールドを無視します(<input type = "text" />など)。

    if(imgFile.isFormField())

    {

        文字列fn = imgFile.getFieldName();

        文字列fv = imgFile.getString();

        if(fn.equals( "uname"))uname = fv;

        if(fn.equals( "upass"))upass = fv;

    }

    そうしないと

    {

        ブレーク;

    }

}

アップローダーup = new Uploader(pageContext、request);

up.SaveFile(imgFile);

文字列url = up.GetFilePathRel();

out.write(url);

response.setHeader( "Content-Length"、url.length()+ ""); //コントロールが戻りアドレスを正しく読み取れるようにContent-lengthタグを返します。

%>

 

その他のバックグラウンド関数とjsについては、ダウンロードファイルのUEditorActionとuploadForIE.jsを参照してください。

以下は、私がインストールした依存型pom構造で、自分の構造に応じて調整できます。

  <依存関係>

            <groupId> com.baidu </ groupId>

            <artifactId> ueditor </ artifactId>

            <version> 1.1.0 </ version>

        </依存関係>

 

springbootとアイデアに基づいて、ここでは自動ダンプ機能のみが抽出されています。この機能はまだテストされておらず、gitコードは公開されていません。その後のテストの後に公開されます。

csdnを使用して、最初にコードをダウンロードして表示できます。

ueditor.jarはpomで参照されています

状況に応じてjarパッケージをインストールする必要があります

1.4.2のjarパッケージのバージョンは1.1.0です。

mvn install:install-file -DgroupId = com.baidu -DartifactId = ueditor -Dversion = 1.1.0 -Dpackaging = jar -Dfile = \ ueditor \ jsp \ lib \ ueditor-1.1.0.jar

走る

UeditorApplicationの主なメソッド

次に、http:// localhost:8088 / ueditor /にアクセスしてテストします。

 

完了後の効果:

写真は自動的にバッチでアップロードされます。手動で1つずつアップロードする写真を選択する必要はありません。ユーザーエクスペリエンスはBaidu ueditorよりも優れており、アップロード効率は高くなります。

 

アップロードが成功すると、画像のアドレスは自動的にサーバーのアドレスに置き換えられます

 

画像は自動的にサーバーに保存されます

 

詳細については、次の記事を参照してください。

http://blog.ncmem.com/wordpress/2019/08/12/ueditor-word%E5%9B%BE%E7%89%87%E8%BD%AC%E5%AD%98%E4%BA% A4%E4%BA%92 /

 

ディスカッショングループ:223813913

おすすめ

転載: blog.csdn.net/weixin_45525177/article/details/108442237