Question

我想要做的脚本可以使用比tinymce更多的textarea 这个：

并没有添加按钮

的任何问题

但是当我删除最后一行时的问题

然后我在textarea中添加新行消失tinymce

我尝试解决此问题，但使用hide（）函数而不是remove（）

但是，许多问题都会出现数字ID

以及此

的所有代码

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="content-type" content="text/html" />
    <meta name="author" content="gencyolcu" />
     <script src="//tinymce.cachefly.net/4.2/tinymce.min.js"></script>
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
     <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
$(document).ready(function ()
{
    $(document).on("click", ".RemoveBottun", function()
    {
        var numItemsLiens = $('.trLines').length;
        if (numItemsLiens > 1)
        {
            $('#addHereItem .trLines:last').remove();
            tinyMCE.execCommand('mceAddControl', false, $("#addHereItem tbody textarea"));
        }else 
        {
            return false;
        }
    })
    tinymce.init({
        selector: "textarea",
        width: "300",
        height: "100",
        toolbar_items_size: 'small',
    });
                    var max_fieldstable = 500; //maximum input boxes allowed
                    var add_button      = $(".addNewBottun"); //Add button ID
                    var two = 1;
                    $(document).on("click", ".addNewBottun", function(e){ //on add input button click
                    var xtable = $('#addHereItem tbody .trLines:last').attr('dir');
                        e.preventDefault();
                        if(xtable < max_fieldstable){ //max input box allowed
                            xtable++; //text box increment
                            $("#addHereItem tbody").append('<tr class="trLines showItem" id="remove_'+xtable+'" dir="'+xtable+'"><td>'+(two + xtable)+'</td><td><textarea class="areatexting" style="width: 250px;height: 81px;" id="details_'+xtable+'" name="display_price[content]['+xtable+'][details]"></textarea></td></tr>'); //add input box
                        }else 
                        {
                            $(this).hide();
                        }
    tinymce.init({
        selector: ".areatexting",
        width: "300",
        height: "100",
        toolbar_items_size: 'small',
    });
                        return false;
                    });
})
</script>
</head>
<body>
<table style="" id="addHereItem" class="table table-bordered">
    <thead>
        <tr>
            <td style="width: 1%;">NO</td>
            <td style="width: 30%;">Details</td>
        </tr>
    </thead>
    <tbody>
       <tr class="trLines showItem" id="remove_0" dir="0">
            <td>1</td>
            <td>
            <textarea required="required" name="display_price[content][0][details]"></textarea>
            </td>
        </tr>
        </tbody>
    <tfoot>
        <tr>
            <td colspan="2"><input type="button" class="addNewBottun btn btn-primary btn-xs" value="+ Add New Item" /> 
             <input type="button" class=" btn btn-danger btn-xs RemoveBottun" value="- Remove Item" /> 
            </td>
        </tr>
    </tfoot>
        </table>
</body>
</html>

Answer 1

我找到了这个问题的答案删除项目时添加此行

tinymce.execCommand('mceRemoveEditor', true, id_text_area_without#);

并在添加新项目时添加此行

tinyMCE.execCommand('mceAddControl', true, id_text_area_without#);

这和所有解决thuisa问题

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="content-type" content="text/html" />
    <meta name="author" content="gencyolcu" />
         <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
     <script src="//tinymce.cachefly.net/4.2/tinymce.min.js"></script>

     <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>


<script>
$(document).ready(function ()
{

    $(document).on("click", ".RemoveBottun", function()
    {
        var numItemsLiens = $('.trLines').length;
        if (numItemsLiens > 1)
        {
            var realId = Number(numItemsLiens - 1);
          // console.log(realId);
          $('#addHereItem .trLines:last').remove();
          tinymce.execCommand('mceRemoveEditor', true, "details_"+realId);
        }else 
        {
            return false;
        }
    })
    tinymce.init({
         mode : "exact",
        selector: "textarea",
        width: "300",
        height: "100",
        toolbar_items_size: 'small',
    });
                    var max_fieldstable = 500; //maximum input boxes allowed
                    var add_button      = $(".addNewBottun"); //Add button ID
                    var two = 1;
                    $(document).on("click", ".addNewBottun", function(e){ //on add input button click
                    var xtable = $('#addHereItem tbody .trLines:last').attr('dir');
                        e.preventDefault();
                        if(xtable < max_fieldstable){ //max input box allowed
                            xtable++; //text box increment
                            $("#addHereItem tbody").append('<tr class="trLines showItem" id="remove_'+xtable+'" dir="'+xtable+'"><td>'+(two + xtable)+'</td><td><textarea class="areatexting" style="width: 250px;height: 81px;" id="details_'+xtable+'" name="display_price[content]['+xtable+'][details]"></textarea></td></tr>'); //add input box
                        }else 
                        {
                            $(this).hide();
                        }
    tinymce.init({
         mode : "exact",
        selector: ".areatexting",
        width: "300",
        height: "100",
        toolbar_items_size: 'small',
    });
    tinyMCE.execCommand('mceAddControl', true, "details_"+xtable);
                        return false;
                    });
})
</script>
</head>
<body>
<table style="" id="addHereItem" class="table table-bordered">
    <thead>
        <tr>
            <td style="width: 1%;">NO</td>
            <td style="width: 30%;">Details</td>
        </tr>
    </thead>
    <tbody>
       <tr class="trLines showItem" id="remove_0" dir="0">
            <td>1</td>
            <td>
            <textarea required="required" name="display_price[content][0][details]"></textarea>
            </td>
        </tr>
        </tbody>
    <tfoot>
        <tr>
            <td colspan="2"><input type="button" class="addNewBottun btn btn-primary btn-xs" value="+ Add New Item" /> 
             <input type="button" class=" btn btn-danger btn-xs RemoveBottun" value="- Remove Item" /> 
            </td>
        </tr>
    </tfoot>
        </table>
</body>
</html>

使用tinymce textarea删除功能时出错

1 个答案: