我正在尝试修改 TinyMCE 4“链接”插件,以允许用户从 AJAX 请求动态更新的 ListBox 元素中选择内容。
我在 editor.windowManager.open() 之前创建 ListBox 元素,因此它们最初可以正确呈现。我有一个执行 AJAX 请求的 onselect 处理程序,并以 JSON 格式获取响应。
我需要对 JSON 响应做的是让它更新另一个 ListBox 元素,用新结果替换现有项目。
我很困惑,文档非常不清楚。我不知道我是应该替换整个控件,还是删除项然后添加新项。我不知道我是否需要实例化一个新的 ListBox 控件,或者将其呈现为 HTML 等。
基本上,我可以访问原始呈现的 ListBox (name: "module"} 与win.find('#module');
我有来自 AJAX 请求的新值:var data = tinymce.util.JSON.parse(text).data;
我已经尝试创建一个新的 Control 配置对象,比如
newCtrlconfig = {
type: 'listbox',
label: 'Class',
values: data
};
但我不知道如何渲染它,更不用说替换现有的了。
我试过
var newList = tinymce.ui.Factory.create(newCtrlconfig);
进而
newList.renderHtml()
但即便如此,呈现的 HTML 也不包含项目的任何标记。检查这些对象只是令人沮丧:有“设置”、“值”、“_值”、“项目”,所有这些都可以愉快地存储我的值,但甚至不清楚它们中的哪些会起作用。
由于它是一个 ListBox 而不是一个简单的 SELECT 菜单,我什至不能轻松地使用 DOM 来操作这些值。
有人在 4.x 中征服了 TinyMCE ListBox 吗?
最佳答案
我在 the TinyMCE forum 上找到了这个我已经确认它有效:
tinymce.PluginManager.add('myexample', function(editor, url) {
var self = this, button;
function getValues() {
return editor.settings.myKeyValueList;
}
// Add a button that opens a window
editor.addButton('myexample', {
type: 'listbox',
text: 'My Example',
values: getValues(),
onselect: function() {
//insert key
editor.insertContent(this.value());
//reset selected value
this.value(null);
},
onPostRender: function() {
//this is a hack to get button refrence.
//there may be a better way to do this
button = this;
},
});
self.refresh = function() {
//remove existing menu if it is already rendered
if(button.menu){
button.menu.remove();
button.menu = null;
}
button.settings.values = button.settings.menu = getValues();
};
});
Call following code block from ajax success method
//Set new values to myKeyValueList
tinyMCE.activeEditor.settings.myKeyValueList = [{text: 'newtext', value: 'newvalue'}];
//Call plugin method to reload the dropdown
tinyMCE.activeEditor.plugins.myexample.refresh();
这里的关键是您需要执行以下操作:
关于tinymce - 动态更新 TinyMCE 4 ListBox,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18806049/