勉強したことのメモ

webプログラマが勉強したことのメモ。

NicEdit(WYSIWYGエディタ)に画像アップロード機能を追加する方法

      2022/07/14

NicEdit(ウィジウィグエディタ)に画像アップロード機能を追加したかった。本家の方だとnicUploadというプラグインがあるが、日本語版の方は用意されていない模様。調べてみたところ日本語版にもプラグインを移植できそうだったので対応方法をメモ。

 

事前準備

NicEditのダウンロード

NicEditの本家版日本語版をダウンロードしておく。尚、本家版はページ上部の「Download」からダウンロードページに進み「nicUpload」にチェックを入れて「Download」ボタンを押す。

アイコンの編集

本家と日本語版ではnicEditorIcons.gif(アイコン画像リスト)が異なる。具体的には日本語版には画像アップロードアイコンが無い(以下の赤枠部分)。

そのため本家のアイコン画像リストから日本語版に画像アップロード用アイコンを移植する必要がある。ペイントソフト等で以下のような形に編集する。

 

JavaScriptの編集・追記

本件版nicEdit.jsの最下部付近にある以下記述部分をコピーし、日本語版のnicEdit.jsの最下部にペーストする。

var nicUploadOptions = {
    buttons : {
        'upload' : {name : 'Upload Image', type : 'nicUploadButton'}
    }
};

var nicUploadButton=nicEditorAdvancedButton.extend({nicURI:"https://api.imgur.com/3/image",errorText:"Failed to upload image",addPane:function(){if(typeof window.FormData==="undefined"){return this.onError("Image uploads are not supported in this browser, use Chrome, Firefox, or Safari instead.")}this.im=this.ne.selectedInstance.selElm().parentTag("IMG");var A=new bkElement("div").setStyle({padding:"10px"}).appendTo(this.pane.pane);new bkElement("div").setStyle({fontSize:"14px",fontWeight:"bold",paddingBottom:"5px"}).setContent("Insert an Image").appendTo(A);this.fileInput=new bkElement("input").setAttributes({type:"file"}).appendTo(A);this.progress=new bkElement("progress").setStyle({width:"100%",display:"none"}).setAttributes("max",100).appendTo(A);this.fileInput.onchange=this.uploadFile.closure(this)},onError:function(A){this.removePane();alert(A||"Failed to upload image")},uploadFile:function(){var B=this.fileInput.files[0];if(!B||!B.type.match(/image.*/)){this.onError("Only image files can be uploaded");return }this.fileInput.setStyle({display:"none"});this.setProgress(0);var A=new FormData();A.append("image",B);var C=new XMLHttpRequest();C.open("POST",this.ne.options.uploadURI||this.nicURI);C.onload=function(){try{var D=JSON.parse(C.responseText).data}catch(E){return this.onError()}if(D.error){return this.onError(D.error)}this.onUploaded(D)}.closure(this);C.onerror=this.onError.closure(this);C.upload.onprogress=function(D){this.setProgress(D.loaded/D.total)}.closure(this);C.setRequestHeader("Authorization","Client-ID c37fc05199a05b7");C.send(A)},setProgress:function(A){this.progress.setStyle({display:"block"});if(A<0.98){this.progress.value=A}else{this.progress.removeAttribute("value")}},onUploaded:function(B){this.removePane();var D=B.link;if(!this.im){this.ne.selectedInstance.restoreRng();var C="javascript:nicImTemp();";this.ne.nicCommand("insertImage",D);this.im=this.findElm("IMG","src",D)}var A=parseInt(this.ne.selectedInstance.elm.getStyle("width"));if(this.im){this.im.setAttributes({src:D,width:(A&&B.width)?Math.min(A,B.width):""})}}});nicEditors.registerPlugin(nicPlugin,nicUploadOptions);

 

また、以下部分を書き換える。

//画像のアップロード先の変更
//変更前
nicURI:"https://api.imgur.com/3/image"

//変更後
nicURI:"画像をアップロード処理するページのURL(相対パス指定も可)"


//アイコンリストの変更
//変更前
iconList : {"xhtml":1,"bgcolor":2,"forecolor":3,"bold":4,"center":5,"hr":6,"indent":7,"italic":8,"justify":9,"left":10,"ol":11,"outdent":12,"removeformat":13,"right":14,"save":25,"strikethrough":16,"subscript":17,"superscript":18,"ul":19,"underline":20,"image":21,"link":22,"unlink":23,"close":24,"arrow":26,"undo":27,"redo":28},

//変更後
iconList : {"xhtml":1,"bgcolor":2,"forecolor":3,"bold":4,"center":5,"hr":6,"indent":7,"italic":8,"justify":9,"left":10,"ol":11,"outdent":12,"removeformat":13,"right":14,"save":25,"strikethrough":16,"subscript":17,"superscript":18,"ul":19,"underline":20,"image":21,"link":22,"unlink":23,"close":24,"arrow":26,"undo":27,"redo":28,"upload":29},

尚、必要に応じてエラーメッセージ等を日本語に変更する(Failed to upload imageの部分等)。

 

画像のアップロード処理

画像のアップロード処理自体は過去記事のように行えば良いが戻り値に注意。以下のように画像URL、画像横幅サイズ、画像縦幅サイズをJSON形式で返す。

<?php
$img = 'アップロード済みの画像名を入れる';
$imagedata = getimagesize('アップロード先のサーバディレクトリ' . $img);
if( $img ){
    $res = array(
        'data' => array(
            'link' => 'アップロード先のURL' . $img,
            'width' => $imagedata[0],
            'height' => $imagedata[1],
        ),
    );
}

echo json_encode($res);

また、imageというファイル名で送信されるので、受信側は$_FILES['image']で受け取れる。

 

所感

そういえば以前メモしておいたCKEditorだとどうなるんだろうと思って調べてみると公式で用意されているアダプターを利用することで実装できる模様。こちらもその内動作確認しておきたいところ。

 

参考サイト

https://qiita.com/fenrir_wolf_g/items/cad91223325bc45c839b

 - JavaScript

  関連記事

JavaScriptで多次元連想配列

JavaScriptで多次元の配列を作る際にいつも迷ってしまうのでメモ。 ■こう ...

八地方区分→都道府県→路線→駅名の連携したセレクトメニュー

八地方区分(関東、近畿等)をプルダウンから選ぶと区分内の都道府県プルダウンが表示 ...

javascriptでスクロール

やりたかった事は、 ・javascript,jQuery使う ・スクロールさせた ...

javascriptのtry文

javascriptとかjQueryを使ってて、Firefox,chromeはい ...

クロスドメインな状況でiframeがIEのみ挙動がおかしくなる場合

iframeで別のドメインのサイトを表示させた場合に、firefoxやchrom ...

leaflet.jsとOSMでマーカーの画像をそれぞれ指定する

leaflet.jsとOpenStreetMapでマップ上にマーカーを複数設置し ...

jQueryやJavaScriptで認識違いしていたところのメモ(高速化)

認識違いしていたり、知らなかったりでもっと高速な 処理を行えそうな点があったので ...

IE11でフォーム送信時に二重登録される

Internet Explorer11でform送信時にデータが二重登録されると ...

javascriptでゼロパティング

月日をゼロパディングしたかったけど PHPとは違い、そういった関数は無かったので ...

異なる文字コード間でform送信する

formの送り手がUTF-8で受け手がEUC-JP、 なんとかしてjavascr ...