首次初始化后，如何使tinyMCE编辑器保留在我的jQgrid textarea编码形式中？ [英] How do I make tinyMCE editor stay in my jQgrid textarea formedit form after first initialize?

问题描述

我有一个jqgrid，我试图在文本区域中使用tinyMCE在我的数据库中发送/存储html并重新加载到我的网格。我有一个带有tinyMCE的自定义列用于文本区域，但在我打开editform一次并在下次打开时关闭它，tinymce不会初始化并出现常规textarea。 （同样，当url模态它失去焦点并专注于editform。文本被粘贴到后面的Project字段而不是（下图）。）我做错了什么？

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. 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. (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?

我的TineMCE链接失去焦点的原因是因为语法错误。我在editgrid代码中有modal：true。

Reason why my TineMCE "Links" was losing focus was because of a simple syntax error. I had modal:true in the editgrid code.

工作在线编辑实施的更新
以下是内联编辑正确实施的示例（谢谢@Oleg）： DEMO1 | DEMO2

内联编辑工作代码示例：

   { 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列：

<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 );
                }
            }
      }}}

推荐答案

尝试将 custom_element 的代码替换为以下内容

Try to replace the code of custom_element to the following

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;
}

还有一个simpel

One more simpel

这篇关于首次初始化后，如何使tinyMCE编辑器保留在我的jQgrid textarea编码形式中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！