[英]How do I make tinyMCE editor stay in my jQgrid textarea formedit form after first initialize?
I have a jqgrid that I am trying to use tinyMCE in the text area to send/store html in my database and reload to my grid. 我有一个jqgrid,我试图在文本区域中使用tinyMCE在数据库中发送/存储html并重新加载到网格中。 I have a custom column with tinyMCE for the text area but after I open editform once and close it next time it is opened tinymce does not initialize and a regular textarea appears.
我在文本区域有一个带有tinyMCE的自定义列,但是在一次打开editform并在下次打开它时将其关闭之后,tinymce不会初始化并且会出现常规的textarea。 (Also when url modal it looses focus and focuses on editform. The text is pasted to the back "Project" field instead(picture below).)What I'm I doing wrong?
(同样,当使用url modal时,它会失去焦点,而将注意力集中在editform上。而是将文本粘贴到后面的“ Project”字段中(如下图)。)我在做什么错?
Reason why my TineMCE "Links" was losing focus was because of a simple syntax error. 我的TineMCE“链接”之所以失去关注,是因为一个简单的语法错误。 I had modal:true in the editgrid code.
我在editgrid代码中有modal:true。
UPDATE FOR WORKING INLINE EDIT IMPLEMENTATION Here are examples for correct implementation for inline edit(Thank you @Oleg): DEMO1 | 内联编辑实现的更新以下是内联编辑正确实现的示例(谢谢@Oleg): DEMO1 | DEMO2
演示2
INLINE EDIT WORKING CODE SAMPLE: 内联编辑工作代码示例:
{ name: "note", width: 260, sortable: false, editable: true,
//edittype: "textarea"
edittype:'custom',
editoptions: {
custom_element: function (value, options) {
var elm = $("<textarea></textarea>");
elm.val(value);
// give the editor time to initialize
setTimeout(function () {
try {
tinymce.remove("#" + options.id);
} catch(ex) {}
tinymce.init({selector: "#" + options.id, plugins: "link"});
}, 50);
return elm;
},
custom_value: function (element, oper, gridval) {
var id;
if (element.length > 0) {
id = element.attr("id");
} else if (typeof element.selector === "string") {
var sels = element.selector.split(" "),
idSel = sels[sels.length - 1];
if (idSel.charAt(0) === "#") {
id = idSel.substring(1);
} else {
return "";
}
}
if (oper === "get") {
return tinymce.get(id).getContent({format: "row"});
} else if (oper === "set") {
if (tinymce.get(id)) {
tinymce.get(id).setContent(gridval);
}
}
}}
}
jqGrid column: jqGrid列:
<script src="js/jquery-1.9.0.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.10.3.custom.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
<script src="tinymce/tinymce.min.js"type="text/javascript"></script>
<script src="tinymce/jquery.tinymce.min.js"type="text/javascript"></script>
<script src= "tinymce/plugins/link/plugin.min.js" type="text/javascript"></script>
<script type="text/javascript">
... ...
{ name:'notes',
index:'notes',
edittype:'custom', editable:true,
editoptions:{
"custom_element":function( value , options) {
var elm = $('<textarea></textarea>');
elm.val( value );
// give the editor time to initialize
setTimeout( function() {
tinymce.init({selector: "textarea#notes",plugins: "link"});
}, 100);
return elm;
},
"custom_value":function( element, oper, gridval) {
if(oper === 'get') {
return tinymce.get('notes').getContent({format: 'row'});
} else if( oper === 'set') {
if(tinymce.get('notes')) {
tinymce.get('notes').setContent( gridval );
}
}
}}}
Try to replace the code of custom_element
to the following 尝试将
custom_element
的代码替换为以下代码
custom_element: function (value, options) {
var elm = $("<textarea></textarea>");
elm.val(value);
// give the editor time to initialize
setTimeout(function () {
try {
tinymce.remove("#" + options.id);
} catch(ex) {}
tinymce.init({selector: "#" + options.id, plugins: "link"});
}, 50);
return elm;
}
One more simpel 另一只simpel
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.