nicEditでカスタムコンボボックスを追加する方法を知りたい人のために、動的な値でカスタムドロップダウンを表示するための私のブログ投稿があります
リンク
NiceEdit jsファイルを編集することで、NicEditにカスタムコンボボックスを追加できます。
次の方法で、ドロップダウンまたはコンボボックスをNicEditに追加できます。ajax呼び出しを介してデータベースからドロップダウン値を取得し、NicEditに表示できます。まず、aspxページにNicEditをダウンロードして実装します。NiceEditjsファイルをダウンロードし、次のコードで有効にできます（http://nicedit.com/） 。
<div style="height: 700px; width: 70%; overflow: scroll"> <div id="sample"><script type="text/javascript" src="../scripts/nicEdit.js"></script><script src="../nicExample/nicExample.js"></script>
<script type="text/javascript">
bkLib.onDomLoaded(function () {
// nicEditors.allTextAreas()
new nicEditor({ fullPanel: true }).panelInstance('area2');});</script>
<h4>NicEdit Textarea</h4><textarea name="area2" id="area2" style="width: 70%; height: 700px"> </textarea>
</div></div>
次に、ファイルの最後にあるniceEdit.jsファイルにgetddlData（）Ajax関数を追加します。
// AJAX call
function getddlData() {
var ajaxResponse;
$.ajax({
type: "POST",
url: 'NicEdit.aspx/GetBookMarkData', // AJAX call to fecth dropdown data
contentType: "application/json; charset=utf-8",
dataType: "json",
async: false,
cache: false,
// Text file name
success: function (response) {
// //alert(data.d); // or do some other data processing
// //return data.d;
ajaxResponse = response;
}
});
return ajaxResponse.d;
}
// codebehind（.csファイル）のwebMethodをfetechドロップダウン値に追加してniceditに
[WebMethod]
public static string GetBookMarkData()
{
///Also you can get DB's data here
/// (2 responses dropdown values being filled : 'drop down Value', drop down Text)
/// Need DB data in , seprated list Formate: @@Test@@,TestOne, TestOne, @@Test2@@,Test2,Test2
string sbookmarkData = "<<Test_Name>>,Test Name,<<Test_Add>>,Test Add,<<Test_Location>>,Test Location,<<Test_City>>,Test City,<<Test_Phone>>,Test Phone";
return sbookmarkData;
}
次に、NicEdit jsファイルを開いてコピー（行番号1552）するか、次の行を検索します。
var nicEditorFontFormatSelect = nicEditorSelect.extend({
Copy complete function and create another one by changing names etc
var nicEditorInsertBookmark = nicEditorSelect.extend({
/* By Pankaj Sharma : Not Needed Now */
sel: {
'[[Location]]': "Test Name",
pre: "Test Address",
h6: "Test City",
h5: "Test State",
h4: "Test Zip",
h3: "Test ABC",
h2: "Test One",
},
init: function () {
/* Pankaj Sharma */
this.setDisplay("Insert Bookmark");
var response = getddlData();
var responseArr = response.split(",");
var strings = [];
//for (itm in this.sel) {
// // var A = itm.toUpperCase();
// //this.add( A, this.sel[itm] )
// }
for (i = 0; i < responseArr.length; i++) {
strings.push([responseArr[i], responseArr[i + 1]]);
i = i + 1;
}
for (var i in strings) {
this.add(strings[i][0], strings[i][1]);
}
/* END HERE*/
},
});
1230行目に移動するか、次の行を検索します。
var nicSelectOptions = {ボタン：{以下のfontFormat関数を追加
'CustomBookmark'：{名前：__（'ブックマークの挿入'）、タイプ：'nicEditorInsertBookmark'、//コマンド：'InsertBookmark' // InsertBookmark}
更新された関数は次のようになります
var nicSelectOptions = {
buttons: {
'fontSize': {
name: __('Select Font Size'),
type: 'nicEditorFontSizeSelect',
command: 'fontsize'
},
'fontFamily': {
name: __('Select Font Family'),
type: 'nicEditorFontFamilySelect',
command: 'fontname'
},
'fontFormat': {
name: __('Select Font Format'),
type: 'nicEditorFontFormatSelect',
command: 'formatBlock'
},
'CustomBookmark': {
name: __('Insert Bookmark'),
type: 'nicEditorInsertBookmark', //
command: 'InsertBookmark' //InsertBookmark
}
}
};
次に、1385行目に移動するか、次のように更新します。function（A）{次のように変更します
update: function (A) {
// alert(this.options.command);
if (this.options.command == 'InsertBookmark') {+
var editor = nicEditors.findEditor("area2");
var range = editor.getRng();
var editorField = editor.selElm();
editorField.nodeValue = editorField.nodeValue.substring(0, range.startOffset) + A + editorField.nodeValue.substring(range.endOffset, editorField.nodeValue.length);
}
else {
// alert(A);
/* END HERE */
this.ne.nicCommand(this.options.command, A);
}
this.close()
}
ドロップダウンオプションでクリックすると、カーソル位置のテキストエディタにドロップダウン値が追加されます。
終了、結果を確認できるはずです