nicEditのパネルのアイコンが小さすぎてスマホでの操作が困難すぎるので大きくした。
nicEditにはパネルサイズを指定する方法もあるようだけどパネル全体の大きさ(面積)は変わってもアイコンのサイズは変わらなかった。
もっといい方法があるのかもしれないけど、nicEditにサイズを指定するオプションを追加した。
環境
サーバ側
- ubuntu 22.04 LTS
- Apache/2.4.54 (Debian)
- NicEdit 日本語版 2016年11月28日
クライアント側
- windows10 Pro
- Chrome 131.0.6778.266（Official Build） （64 ビット）
nicEditにオプションを追加
まずは、オプションの追加。オプションに赤字の buttonSizeを追加し、デフォルトは18(px)に。
var nicEditorConfig = bkClass.extend({
buttons : {
'bold' : {name : '強調(太字)', command : 'Bold', tags : ['B','STRONG'], css : {'font-weight' : 'bold'}, key : 'b'},
'italic' : {name : '強調(イタリック)', command : 'Italic', tags : ['EM','I'], css : {'font-style' : 'italic'}, key : 'i'},
'underline' : {name : '下線', command : 'Underline', tags : ['U'], css : {'text-decoration' : 'underline'}, key : 'u'},
'left' : {name : '左寄せ', command : 'justifyleft', noActive : true},
'center' : {name : '中央揃え', command : 'justifycenter', noActive : true},
'right' : {name : '右寄せ', command : 'justifyright', noActive : true},
'justify' : {name : '両端揃え', command : 'justifyfull', noActive : true},
'ol' : {name : '番号リスト', command : 'insertorderedlist', tags : ['OL']},
'ul' : {name : 'リスト', command : 'insertunorderedlist', tags : ['UL']},
'subscript' : {name : '下付き文字', command : 'subscript', tags : ['SUB']},
'superscript' : {name : '上付き文字', command : 'superscript', tags : ['SUP']},
'strikethrough' : {name : '取り消し線', command : 'strikeThrough', css : {'text-decoration' : 'line-through'}},
'removeformat' : {name : '全ての装飾を削除', command : 'removeformat', noActive : true},
'indent' : {name : 'インデント', command : 'indent', noActive : true},
'outdent' : {name : 'インデント解除', command : 'outdent', noActive : true},
'hr' : {name : '区切り線', command : 'insertHorizontalRule', noActive : true},
'undo' : {name : '取り消し', command : 'undo', noActive : true},
'redo' : {name : 'やり直し', command : 'redo', noActive : true}
},
iconsPath : 'auto',
convertToText : true,
keepBrTags : false,
buttonList : ['save','bold','italic','underline','left','center','right','ol','ul','fontSize','fontFamily','fontFormat','indent','outdent','image','upload','link','unlink','forecolor','bgcolor','undo','redo'],
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,"clos\
e":24,"arrow":26,"undo":27,"redo":28,"upload":29},
externalCSS : '',
buttonSize : 18 // kirin
});
オプションの処理でアイコンサイズとアイコンのエリアのサイズを計算。
var nicEditor = bkClass.extend({
construct : function(o) {
if (typeof o == 'undefined') {
o = {fullPanel : true, xhtml : true};
} else {
if (typeof o.xhtml == 'undefined') o.xhtml = true;
if (o.panelType != null) {
if (o.panelType == 'full') {
o.fullPanel = true;
} else if (o.panelType == 'nostyle') {
o.xhtml = true;
o.buttonList = ['bold','italic','ol','ul','fontFormat','link','unlink','subscript','superscript','strikethrough','removeformat','hr','undo','redo'];
} else if (o.panelType == 'noimage') {
o.buttonList = ['bold','italic','underline','left','center','right','ol','ul','fontSize','fontFamily','fontFormat','indent','outdent','link','unlink','forecolor','bgcolor','subscript','superscript','strikethrough','removeformat','hr','undo','redo'];
} else if (o.panelType == 'mini') {
o.buttonList = ['bold','italic','left','center','right','ol','ul','link','unlink','removeformat','hr','undo','redo'];
} else if (o.panelType == 'nostylemini') {
o.xhtml = true;
o.buttonList = ['bold','italic','ol','ul','link','unlink','removeformat','hr','undo','redo'];
}
}
if (typeof o.buttonList == 'undefined' && !o.fullPanel) o.fullPanel = true;
}
this.options = new nicEditorConfig();
bkExtend(this.options,o);
this.nicInstances = new Array();
this.loadedPlugins = new Array();
var plugins = nicEditors.nicPlugins;
for(var i=0;i<plugins.length;i++) {
this.loadedPlugins.push(new plugins[i].p(this,plugins[i].o));
}
nicEditors.editors.push(this);
bkLib.addEvent(document.body,'mousedown', this.selectCheck.closureListener(this) );
buttonSize = this.options.buttonSize; // kirin
buttonContainerSize = buttonSize + 2; // kirin
},
panelInstance : function(e,o) {
計算したサイズを適用。
getIcon : function(iconName,options) {
var icon = this.options.iconList[iconName];
var file = (options.iconFiles) ? options.iconFiles[iconName] : '';
if (this.options.iconsPath != null && this.options.iconsPath == 'auto') {
this.options.iconsPath = 'nicEditorIcons.gif';
var scripts = document.getElementsByTagName('script');
for (var i=0; i<scripts.length; i++) {
if (scripts[i].src != null && scripts[i].src.search(/nicEdit\.js$/) != -1) {
this.options.iconsPath = scripts[i].src.replace('nicEdit.js','nicEditorIcons.gif');
break;
}
}
}
// kirin // return {backgroundImage : "url('"+((icon) ? this.options.iconsPath : file)+"')", backgroundPosition : ((icon) ? ((icon-1)*-18) : 0)+'px 0px'};
return {backgroundImage : "url('"+((icon) ? this.options.iconsPath : file)+"')", backgroundPosition : ((icon) ? ((icon-1)*-buttonSize) : 0)+'px 0px'};
ここも計算したサイズを適用。
var nicEditorButton = bkClass.extend({
construct : function(e,buttonName,options,nicEditor) {
this.options = options.buttons[buttonName];
this.name = buttonName;
this.ne = nicEditor;
this.elm = e;
this.margin = new bkElement('DIV').setStyle({'float' : 'left', marginTop : '2px'}).appendTo(e);
// kirin // this.contain = new bkElement('DIV').setStyle({width : '20px', height : '20px'}).addClass('buttonContain').appendTo(this.margin);
this.contain = new bkElement('DIV').setStyle({width : buttonContainerSize+'px', height : buttonContainerSize+'px'}).addClass('buttonContain').appendTo(this.margin);
this.border = new bkElement('DIV').setStyle({backgroundColor : '#efefef', border : '1px solid #efefef'}).appendTo(this.contain);
// kirin // this.button = new bkElement('DIV').setStyle({width : '18px', height : '18px', overflow : 'hidden', zoom : 1, cursor : 'pointer'}).addClass('button').setStyle(this.ne.getIcon(buttonName,options)).appendTo(this.border);
this.button = new bkElement('DIV').setStyle({width : buttonSize+'px', height : buttonSize+'px', overflow : 'hidden', zoom : 1, cursor : 'pointer'}).addClass('button').setStyle(this.ne.getIcon(buttonName,options)).appendTo(this.border);
this.button.addEvent('mouseover', this.hoverOn.closure(this)).addEvent('mouseout',this.hoverOff.closure(this)).addEvent('mousedown',this.mouseClick.closure(this)).noSelect();
if(!window.opera) {
使ってみる
主なファイルの構成は下記の通り。
├── memo-edit.html
├── memo-edit.css
├── memo-edit.js
├── nicEdit_ja/
│ ├── nicEdit.js
│ ├── nicEditorIcon+upload-x1.gif
│ ├── nicEditorIcon+upload-x2.gif
│ ├── nicEditorIcon+upload-x3.gif
│ ├── nicEditorIcon+upload-x4.gif
│ ├── nicEditorIcon+upload.gif
│ ├── upload.php
htmlファイル(memo-edit.html)。nicEditのパネルを置くDIV要素(id="nicPanel")とテキストを書くtextarea要素(id="nicText")を配置。フローティングの為にパネルの親のDIV要素(id="header")も配置。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<script src="nicEdit_ja/nicEdit.js" type="text/javascript"></script>
<script src="memo-edit.js" type="text/javascript"></script>
<link rel="stylesheet" href="memo-edit.css">
<title>メモ編集</title>
</head>
<body>
<header class="header" id="header">
<div id="nicPanel">
<!-- NicEditツールバーがここに表示されます -->
</div>
</header>
<div id ="container">
<!-- 編集対象のテキストエリア -->
<textarea id="nicText">
初期テキストをここに入力してください。
</textarea>
</div>
</body>
</html>
cssファイル(memo-edit.css)。PCとスマホの切り替えを簡易的にメディアクエリ(@media)の幅でやってる。PCの場合は--device-typeは"PC"、スマホの場合は"Phone"にしてる。PCのブラウザでもウィンドウの幅を800px以下に狭くすればスマホ用の表示になる。
フローティングのテストも入れちゃってるので長いんだけど。。。
:root {
--header-height: 100px;
}
body {
--device-type: PC;
}
#nicPanel {
width: 100%;
font-size: 18px;
}
#container{
position: fixed; /* 上部に固定 */
top: var(--header-height);
width: 100%;
height: calc(100% - var(--header-height));
background-color: green;
border-radius: 15px;
overflow-x: hidden;
overflow-y: scroll;
}
#nicText{
width: 100%;
height: 100%;
}
/* nicEdit */
/* ヘッダーのスタイル */
.header {
position: fixed; /* 上部に固定 */
font-size: 18px;
background-color: #9FC7D8;
padding: 5px 5px;
position: fixed; /* ヘッダーを固定 */
top: 0;
width: 100%;
z-index: 1000; /* サイドバーより前面に表示 */
}
.textmemo {
height: 100%;
width: 100%;
top: 200px;
left: 0;
padding-top: 100px; /* ヘッダー分の余白を確保 */
}
/* 小画面用のスタイル：サイドバー非表示 */
@media screen and (max-width: 800px) {
body {
--device-type: Phone;
}
}
javascriptファイル(memo-edit.js)。青字の部分でスマホだったら4倍のアイコン、PCだったら2倍のアイコンに切り替えて、赤字の部分で追加したオプションにアイコンのサイズとアイコンファイルを渡してる。スマホ対応という意味ではviewportを使えば青字の処理は不要なんだけど、追加したAPIのテストということで。
File Edit Options Buffers Tools JavaScript Help
var myNicEditor;
// DOM読み込み後にNicEditを初期化
bkLib.onDomLoaded(function() {
var nicEditButtonSize = 72;
var nicEditIconPath = "nicEdit_ja/nicEditorIcon+upload-x4.gif";
const main = document.getElementById("header");
const mainComputedStyle = getComputedStyle(main);
const deviceType = mainComputedStyle.getPropertyValue('--device-type');
if(deviceType == "PC"){
nicEditButtonSize = 36;
nicEditIconPath = "nicEdit_ja/nicEditorIcon+upload-x2.gif";
}
// NicEditエディタインスタンスを作成
myNicEditor = new nicEditor({
fullPanel: true, // フルツールバーを有効化
buttonSize: nicEditButtonSize,
iconsPath: nicEditIconPath
});
// ツールバーを特定のパネルに設定
myNicEditor.setPanel('nicPanel');
// テキストエリアにエディタ機能を追加
myNicEditor.addInstance('nicText');
});
これを動かすとこんな感じ。
変更前のアイコンサイズが18pxがこれなので大きくなってる。
ドロップダウンも大きくしたいんだけどまだうまくいってない。。。
拡大したアイコン画像
アイコン画像(nicEditorIcon.gif)は、gimpで200%、300%等と拡大して作っただけなので粗いけど、ちょっとコードを試すには使えるかと。nicEditorIcon+uploadはnicEdit日本語版に画像アップロードのアイコンを追加しただけのもので、x1.5、x2、x3、x4はそれを拡大したもの。個人的にはx1.5が好みかも。。。
nicEditorIcon+upload.gif ：
nicEditorIcon+upload-x1.5.gif：
nicEditorIcon+upload-x2.gif ：
nicEditorIcon+upload-x3.gif ：
nicEditorIcon+upload-x4.gif ：
みんなこのちっこいアイコンをどうしてるんだろ？簡単な方法があるのかなぁ。。
気が向いたら感想をお願いします。(ログイン不要、ボタンを押すだけです)
