I am using the texteditor extension.  Is it possible to remove all html/rich text on a paste?

I have to clone a group of objects inside a div tag. After they are cloned, then all of the objects inside the div tag are initialized using jEasy calls. The process works but extremely slow in IE and only bearable using chrome.   Is there a faster way to clone or initialize a group of JEasy objects? 
 
HTML code:

Code:

<div id=cloneMe0>
	<div>
		<label id="CurrentProductNumberLabel0" class="textbox-label">Current Product Number</label>
		<input name="CurrentProductNumber0" id="CurrentProductNumber0" class="textbox etextbox" type="text" maxlength="50" />
	</div>
	<div>
		<label id="ProductDescriptionLabel0" class="textbox-label">Product Name<a href="javascript:niente();" name="helpText" data-helpid="4"><i class="fa fa-info-circle" aria-hidden="true"></i></a></label>
		<textarea id="ProductDescription0" name="ProductDescription0" style="height: 118px" data-options="multiline:true" class="textarea etextbox"></textarea>
	</div>
	<div>
		<label id="QuantityPerCaseLabel0" class="textbox-label">Quantity Per Case</label>
		<input id="QuantityPerCase0" name="QuantityPerCase0" class="textbox enumberbox" />
	</div>
	<div>
		<label id="EstimatedProductionDateLabel0" class="textbox-label">Estimated Production Date</label>
		<input id="EstimatedProductionDate0" name="EstimatedProductionDate0" class="textbox edatebox" />
	</div>
	<div>
		<table id="dg-Components0" title="" class="edatagrid" style="height: 240px"
		    toolbar="#toolbar"
		    rownumbers="false" singleselect="true" striped="true" remotesort="false">
		    <thead>
			<th field="ComponentBuyer_Name" width="200" sortable="true">Buyer</th>                                        
			<th field="ComponentEngineer_Name" width="200" sortable="true">Engineer</th>
			<th field="OldComponentNumber" width="200" sortable="true">Old Component Number</th>
			<th field="ComponentDescription" width="334" sortable="true">Component Description</th>
			<th field="Niente" width="500">&nbsp;</th>
		    </thead>
		</table>
	</div>
</div>

JQuery with JEasy code:

Code:

       var cloneIndex = 1;

       $("#cloneMe0").clone()
            .appendTo("#someParents")
            .attr("id", "cloneMe" + cloneIndex)
            .addClass("cloneProductComponent")
            .find("*")
            .each(function () {
                var id = this.id || "";
                var match = id.match(regex) || [];
                if (match.length == 3) {
                    var strid = match[1];
                    var strname;
                    strid = strid.replace(/^0+|0+$/g, "") + (cloneIndex);

                    if (this.name == undefined) {
                        strname = strid;
                    } else {
                        strname = this.name;
                    }

                    strname = strname.replace(/^0+|0+$/g, "") + (cloneIndex);

                    this.id = strid;
                    this.name = strname;

                    if ($(this).hasClass("etextbox")) {
                        $(this).textbox();
                    }

                    if ($(this).hasClass("enumberbox")) {
                        $(this).numberbox({ groupSeparator: ',' });
                    }
                    
                    if ($(this).hasClass("enumarictextbox")) {
                        $(this).textbox();
                    }

                    if ($(this).hasClass("ecurrencybox")) {
                        $(this).numberbox({ precision: 2, groupSeparator: ',', decimalSeparator: '.', prefix: '$' });
                    }

                    if ($(this).hasClass("ecomboboxProductType")) {
                        $(this).combobox({
                            data: FormMeta['FormMeta14'],
                            panelHeight: 'auto',
                            valueField: 'id',
                            textField: 'text'
                        });
                    }

                    if ($(this).hasClass("ecomboboxProductBuyer")) {
                        $(this).combobox({
                            data: FormMeta['FormMeta12'],
                            panelHeight: 'auto',
                            valueField: 'id',
                            textField: 'text'
                        });
                    }

                    if ($(this).hasClass("ecomboboxComponentBuyer")) {
                        $(this).combobox({
                            data: FormMeta['FormMeta12'],
                            panelHeight: 'auto',
                            valueField: 'id',
                            textField: 'text'
                        });
                    }

                    if ($(this).hasClass("ecomboboxComponentEngineer")) {
                        $(this).combobox({
                            data: FormMeta['FormMeta13'],
                            panelHeight: 'auto',
                            valueField: 'id',
                            textField: 'text'
                        });
                    }

                    if ($(this).hasClass("edatebox")) {
                        if ($(this).hasClass("eArtWorkReqDate")) {
                            $(this).datebox({
                                onChange: function (newDate, oldDate) {
                                    if (newDate != null) {
                                        if (newDate.length > 0 && oldDate != newDate) {
                                            if (Date.parse(newDate) && clickSelected) {
                                                addNewNote(newDate, oldDate, 'ArtRequireDate', strname);
                                            }
                                        }
                                    }
                                },
                                editable: false,
                                validateOnCreate: false
                            });
                        } else {
                            $(this).datebox({ editable: false });
                        }
                    }

                    if ($(this).find('a').attr("name") == "helpText") {
                        buildFieldHelp($(this).find('a[name=helpText]'));
                    }

                    if ($(this).hasClass("edatagrid")) {
                        $(this).datagrid({
                            onSelect: function (index, row) {
                                populateComponentForm(index, row, cloneIndex);
                            },
                            rowStyler: function (index, row) {
                                if (row.isvalid == false) {
                                    return 'background-color:#ffa8a8;color:#4a4a4a;';
                                }
                            }
                        });
                    }                }
            });

I am using the text editor in a form.  on submit, the server throws a 500 error because of the html tags.  What is the best approach to parse it before submit?  Use the form's onSubmit event?   

Thank Jerry,

I did download the extension and it works great.  However, can i disable and enable the texteditor using code?  I wanted to use the texteditor as part of a form. so enabling and disabling it needs to be dynamic.  is it even possible?

 

But I am not using a datagrid tho.  I am just using a textbox that is part of a form.

Can I disable the whole text editor?  I can't find a method that will allow me to do that.  Please help.  thx

I followed the example and created a text editor this way:

Code:

<div class="easyui-texteditor" title="TextEditor" style="width:700px;height:300px;padding:20px">
    <h3 style="text-align:center">TextEditor</h3>
    <p style="text-align:center">TextEditor is a lightweight html5 editor based on EasyUI. It is completely customizable to fit your needs.</p>
</div>

Is there a way I can use the textbox control for rich text?  I all need is simple formatting like italic or bold.

Thanks...

I need to disable all fields on the form after submit.  I basically need the form to become read only after submit.

Thanks for your replay.  The combobox on the example doesn't have a default selection, ie "- Select City -".  See my example, if I set the "required:true" attribute, the "- Select City -" default selection is a valid selection.  If I set the "validType: 'notFirst[\'- Select City -\']'", the combobox will show as an invalid selection as soon as the form load.

I only want the combobox to validate during on submit.

How do i validate a combobox only on form submit?  Here is the code i use to submit the form.

Code:

$('#ff').form('submit',{
                onSubmit:function(){
                    return $(this).form('enableValidation').form('validate');
                }
            });

I initialized a combobox like this and it is validating as soon as the form is loaded.  I only want it to validate it on form submit:

Code:

$('#CityGroup').combobox({
            panelHeight: 'auto',
            selectOnNavigation: false,
            valueField: 'id',
            textField: 'text',
            editable: true,
            url: '/control/ajaxApp.aspx?a=getComboList&t=City_Group',
            required: true,
            validType: 'notFirst[\'-Select Security Group-\']'
        });

is there a method i can use to disable the entire from after submit?  for example:

Code:

$(this).form('disable')

How do you properly clone a section of a form?  I need to clone the "section" dynamically and then populate it with data from a database.  I need to be able to assign incremental ids to all cloned fields/sections.

Here is how I declare the form:

Code:

<form id="ff" method="post">
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="name" style="width:100%" data-options="label:'Name:',required:true">
            </div>
            <section id="userInfo">
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="email" style="width:100%" data-options="label:'Email:',required:true,validType:'email'">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="subject" style="width:100%" data-options="label:'Subject:',required:true">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="message" style="width:100%;height:60px" data-options="label:'Message:',multiline:true">
            </div>
            <div style="margin-bottom:20px">
                <select class="easyui-combobox" name="language" label="Language" style="width:100%"><option value="ar">Arabic</option><option value="bg">Bulgarian</option><option value="ca">Catalan</option><option value="zh-cht">Chinese Traditional</option><option value="cs">Czech</option><option value="da">Danish</option><option value="nl">Dutch</option><option value="en" selected="selected">English</option><option value="et">Estonian</option><option value="fi">Finnish</option><option value="fr">French</option><option value="de">German</option><option value="el">Greek</option><option value="ht">Haitian Creole</option><option value="he">Hebrew</option><option value="hi">Hindi</option><option value="mww">Hmong Daw</option><option value="hu">Hungarian</option><option value="id">Indonesian</option><option value="it">Italian</option><option value="ja">Japanese</option><option value="ko">Korean</option><option value="lv">Latvian</option><option value="lt">Lithuanian</option><option value="no">Norwegian</option><option value="fa">Persian</option><option value="pl">Polish</option><option value="pt">Portuguese</option><option value="ro">Romanian</option><option value="ru">Russian</option><option value="sk">Slovak</option><option value="sl">Slovenian</option><option value="es">Spanish</option><option value="sv">Swedish</option><option value="th">Thai</option><option value="tr">Turkish</option><option value="uk">Ukrainian</option><option value="vi">Vietnamese</option></select>
            </div>
            </section>
        </form>

Thanks for the solution.  The range extension works great.  However, the "message" is not showing up in my edatagrid.  The editable numberbox field turns red but the message is not there.

I used a numberbox in a edatagrid.  I also set a max/min range.  If a user enter a number outside of that range, the number box automatically correct it by changing the user's input to one of the border number (max/min).  Is there a way to stop that from happening and just popup a message letting the user know that they have entered a number outside of the range?

Thanks...

that did it!  thx!