When creating a tab of easyui, The easyui tab component dynamically loads content in two ways: Content and href. When using content, IFRAME is usually used to embed a page, which is suitable for small projects and easy for others to view yourSource codeIs not conduciveCodeProtection. This method is easy to use and generally does not cause any problems. When using href, you need to pay attention to many issues.
For example, there are two HTML pages. tab.htmis the tabw.htm page, and kind.htm dynamically loads the called page for the tab, which uses the rich text editor.
Tab.html source code is as follows:
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HTML xmlns = "http://www.w3.org/1999/xhtml">the source code of kind.htm is as follows:
<SCRIPT type = "text/JavaScript"> var editor; $ (function () {window. setTimeout (function () {editor = kindeditor. create ('# note', {width: '680px', height: '300px ', items: ['source',' | ', 'undo', 'redo ', '|', 'preview', 'print ', 'template', 'code', 'Cut', 'copy', 'paste ', 'plainpaste', 'wordpaste ', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent ', 'outdent', 'subscript ', 'superscript', 'clearhtml ', 'quickformat', 'selectall',' | ', 'fullscreen', '/', 'formatblock', 'fontname', 'fontsize ', '|', 'forecolor', 'hilitecolor', 'bold ', 'italic', 'underline', 'strikethangout', 'lineheight', 'removeformat', '| ', 'image', 'flash', 'Media ', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak', 'anchor ', 'link', 'unlink'], uploadjson: '/filecontroller/upload', filemanagerjson:'/filecontroller/filemanage', allowfilemanager: true });}, 1) ;}); </SCRIPT> <Div class = "easyui-layout" data-Options = "Fit: True, border: false "> <Div data-Options =" region: 'center', border: false "Title =" "style =" overflow: hidden; "> <Form ID =" form "method =" Post "> <Table class =" Table-Hover table-condensed "> <tr> <TH> NO. </Th> <TD> <input name = "ID" type = "text" class = "span2" value = "8c130179-b86d-4da2-9028-f819619216ff" readonly = "readonly"> </TD> <TH> bug name </Th> <TD> <input name = "name" type = "text" Placeholder = "Enter the bug name" class = "easyui-validatebox span2" data-Options =" required: true "value =" zsdcasdasdasd "> </TD> </tr> <TH> bug type </Th> <TD> <select name =" typeid "class = "easyui-ComboBox" data-Options = "width: 140, height: 29, Editable: false, panelheight: 'auto' "> <option value =" 0 "> error </option> <option value =" 1 "selected =" selected "> function </option> </SELECT> </TD> <TH> browse server attachments </Th> <TD> <button type = "button" class = "BTN" onclick = "filemanage (); "> browse server </button> </TD> </tr> <TH> bug description </Th> <TD colspan =" 3 "> <textarea name = "NOTE" id = "NOTE" Cols = "50" rows = "5"> kindeditor </textarea> </TD> </tr> </table> </form> </div>When you run the tab.htmpage, you will find that although the content of the kind.htm page is loaded, the rich editor in this article is invalid.
The solution at this time is as follows: Just click the "yellow" Page. (PS: Why is it like this? If you see this in prawns and know the reason, please kindly advise !)
The solution code is as follows:
Use panel on the 1.tab.htm page:
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HTML xmlns = "http://www.w3.org/1999/xhtml">2: The kind.htm page contains panel:
<SCRIPT type = "text/JavaScript"> var editor; $ (function () {window. setTimeout (function () {editor = kindeditor. create ('# note', {width: '680px', height: '300px ', items: ['source',' | ', 'undo', 'redo ', '|', 'preview', 'print ', 'template', 'code', 'Cut', 'copy', 'paste ', 'plainpaste', 'wordpaste ', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent ', 'outdent', 'subscript ', 'superscript', 'clearhtml ', 'quickformat', 'selectall',' | ', 'fullscreen', '/', 'formatblock', 'fontname', 'fontsize ', '|', 'forecolor', 'hilitecolor', 'bold ', 'italic', 'underline', 'strikethangout', 'lineheight', 'removeformat', '| ', 'image', 'flash', 'Media ', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak', 'anchor ', 'link', 'unlink'], uploadjson: '/filecontroller/upload', filemanagerjson:'/filecontroller/filemanage', allowfilemanager: true });}, 1) ;}); </SCRIPT> <Div class = "easyui-panel" Title = "My panel" style = "height: 700px;" data-Options = "noheader: true, fit: True, height: 700 "> <Div class =" easyui-layout "data-Options =" Fit: True, border: false "> <Div data-Options =" region: 'center', border: false "Title =" "style =" overflow: hidden; "> <Form ID =" form "method =" Post "> <Table class =" Table-Hover table-condensed "> <tr> <TH> NO. </Th> <TD> <input name = "ID" type = "text" class = "span2" value = "8c130179-b86d-4da2-9028-f819619216ff" readonly = "readonly"> </TD> <TH> bug name </Th> <TD> <input name = "name" type = "text" Placeholder = "Enter the bug name" class = "easyui-validatebox span2" data-Options =" required: true "value =" zsdcasdasdasd "> </TD> </tr> <TH> bug type </Th> <TD> <select name =" typeid "class = "easyui-ComboBox" data-Options = "width: 140, height: 29, Editable: false, panelheight: 'auto' "> <option value =" 0 "> error </option> <option value =" 1 "selected =" selected "> function </option> </SELECT> </TD> <TH> browse server attachments </Th> <TD> <button type = "button" class = "BTN" onclick = "filemanage (); "> browse server </button> </TD> </tr> <TH> bug description </Th> <TD colspan =" 3 "> <textarea name = "NOTE" id = "NOTE" Cols = "50" rows = "5"> kindeditor </textarea> </TD> </tr> </table> </form> </div>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
