所以我正在制作一个需要
HTML输入框的MVC网站.
我有一个从ajax对话框窗口加载的文本区域.据我所知,当我隐藏对话框时,TinyMCE需要我删除控件,这很好.
我有一个从ajax对话框窗口加载的文本区域.据我所知,当我隐藏对话框时,TinyMCE需要我删除控件,这很好.
但是我无法让编辑器加载.我使用版本4.1.9(2015-03-10)与jquery模块.
即tinymce.jquery.js& jquery.tinymce.min.js
对话窗口打开后,我打电话给这个;
$("textarea").tinymce({
// General options
mode: "textareas",theme: "modern",// Theme options
menubar: false,toolbar: "bold,italic,underline,|,bullist,numlist",statusbar: false,init_instance_callback: function (editor) {
console.log("tinymce init: " + editor.id);
}
});
但是我在以下方法的javascript中得到一个异常,看起来self.ariaTarget是未定义的,导致启动elm.setAttribute的行失败,因为elm为null.
我不明白我做错了什么.
/**
* Sets the specified aria property.
*
* @method aria
* @param {String} name Name of the aria property to set.
* @param {String} value Value of the aria property.
* @return {tinymce.ui.Control} Current control instance.
*/
aria: function(name,value) {
var self = this,elm = self.getEl(self.ariaTarget);
if (typeof value === "undefined") {
return self._aria[name];
} else {
self._aria[name] = value;
}
if (self._rendered) {
elm.setAttribute(name == 'role' ? name : 'aria-' + name,value);
}
return self;
},
谢谢您的帮助.
标记
编辑：
我一直在关注这个jsfiddle http://jsfiddle.net/thomi_ch/m0aLmh3n/19/而不是在文档中加载tinymce,它在初始化时从URL加载它(见下文).我已将我的代码更改为使用相同的script_url作为示例,它可以渲染编辑器(缺少图标等,因为css无法找到)但这对我来说意味着我的tinymce.jquery版本有问题.js文件.
$('textarea').tinymce({
script_url : 'http://demo.nilooma.com/system/plugins/tinymce/4.1.6/tiny_mce/tinymce.gzip.PHP',toolbar: 'link',plugins: 'link',forced_root_block : '',init_instance_callback: function(editor) {
console.log('tinymce init: '+editor.id);
}
});
我试过了tinymce.jquery.js&来自4.1.9版本的tinymce.js& 4.1.6正如jsfiddle所使用的那样,所有组合都给出了同样的错误.
是否可能与另一个库不兼容？
解决方法
我找到了解决这个问题的方法.我相信它是由于尝试多次初始化元素引起的,之后我还发现了一个缺陷,即元素没有显示编辑器,因为它在被隐藏时被初始化.
我用来初始化bootstrap模式的代码就是这个;
$("#myModal").modal({
keyboard: true
},"show");
//Bind open
$("#myModal").on("show.bs.modal",function () {
$(document).trigger("DialogLoaded");
});
//Bind close
$("#myModal").on("hidden.bs.modal",function () {
$(document).trigger("DialogClosed");
});
然后我听听文件上的事件;
tinyMCE.init({
// General options
mode: "textareas",init_instance_callback: function(editor) {
console.log("tinymce init: " + editor.id);
}
});
$(document).on("DialogLoaded",function () {
var textAreas = $("textarea",$("#myModal"));
for (var i = 0; i < textAreas.length; i++) {
//Check if element already has editor enabled
if (tinymce.get(textAreas[i].id)) {
//Remove existing editor
tinyMCE.execCommand("mceRemoveEditor",false,textAreas[i].id);
}
//Add editor
tinyMCE.execCommand("mceAddEditor",textAreas[i].id);
}
});
$(document).on("DialogClosed",function () {
//Remove all editors in dialog
var textAreas = $("textarea",$("#myModal"));
for (var i = 0; i < textAreas.length; i++) {
//Check if element already has editor enabled
if (tinymce.get(textAreas[i].id))
tinyMCE.execCommand("mceRemoveEditor",textAreas[i].id);
}
});
我想有几点需要记住;
>仅在可见元素上加载tinyMCE
>首先初始化tinyMCE
>确保仅加载每个元素一次
>确保每个textarea都有一个唯一的ID(并在隐藏后将其删除)
我希望这有助于其他人与TinyMCE有任何问题.
谢谢,标记.