для людей, которые задаются вопросом, как добавить пользовательский комбинированный список в nicEdit, вот мой пост в блоге, чтобы отобразить пользовательский выпадающий список с динамическими значениями
Ссылка
Черезредактируя js-файл NiceEdit, мы можем добавить пользовательское поле со списком в NicEdit
. Следующим способом мы можем добавить выпадающий список или выпадающий список в NicEdit.Вы можете получить раскрывающееся значение из базы данных посредством вызова ajax и показать его в NicEdit. Прежде всего, загрузите и внедрите NicEdit на странице aspx. Загрузите файл NiceEdit js, и вы можете включить его с помощью следующего кода (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>
Теперь добавьте функцию AJAX getddlData () в файл niceEdit.js в конец файла
// 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;
}
// Добавьте webMethod в codebehind (файл .cs) в раскрывающееся значение 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 ={button: {Добавить следующую функцию fontFormat ниже
'CustomBookmark': {name: __ ('Вставить закладку'), введите: '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()
}
В опциях DropDown нажмите Это добавитКапляВнизу значения в текстовом редакторе на позиции курсора.
END, вы должны увидеть результаты