个人中心
gpt4 book ai didi

javascript - 将删除函数与tinymce textarea一起使用时出错

转载 作者：行者123 更新时间：2023-11-27 23:57:16 25 4
gpt4 key购买 nike

我希望脚本可以使用tinymce以外的文本区域这:

enter image description here

添加按钮没有任何问题

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

然后我在文本区域中添加新行消失tinymce

enter image description here

我试图解决这个问题，但使用 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>

最佳答案

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

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>

关于javascript - 将删除函数与tinymce textarea一起使用时出错，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32158174/

25 4 0
文章推荐： c++ - 我在 C++ 中使用 tolower() 时遇到问题
文章推荐： C++ vector::erase 提示重载解析和删除运算符 '=='
文章推荐： jquery - Bootstrap 4 下拉菜单从第一个菜单位置开始
文章推荐： c++ - 自包含从 std::enable_shared_from_this 继承的自身的 shared_ptr
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com