codeMirror within an extendable doesn't seem to disappear/appear when a button is selected

问题

I am attempting to developing this system where you can edit code using the CodeMirror text area's and then the code is automatically run in an iframe.

On this system there will be a button that a lows the user to make the CSS textarea and the table column disappear. But for some reason I cant get it to work. Here is the code that I have got so far, as follows:

<script src="lib/codemirror.js"></script>
<script src="mode/clike/clike.js" type="text/javascript"></script>
<link href="lib/codemirror.css" rel="stylesheet" type="text/css" />
<script src="mode/htmlmixed/htmlmixed.js"></script>
<script src="mode/xml/xml.js"><!-- needed for htmlmixed --></script>
<script src="mode/css/css.js"></script>
<link href="theme/default.css" rel="stylesheet" type="text/css" />
<link href="theme/mdn-like.css" rel="stylesheet" type="text/css" />

<style>
    .CodeMirror {
        border:none;
        width:100%;
        height:451px;
        margin-left:100;
    }
</style>




 <table id="sample2" width="100%" height="500px" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
			<tr>
               <td colspan="3"><button onClick="displayCSS()">Hide/Show CSS</button></td>
            <tr>
			<tr>
				<td class="left">
				
				<textarea id="code" name="code" style="padding-top:0px; border:none;" ><!DOCTYPE html>
<html>
	<head>
						
	</head>
	<body>
					
	</body>
</html>
</textarea> 
 <select style="height:46px; width:100%; margin:0px; position:relative; left:0%;">
  <option value="volvo">index.html</option>
  <option value="saab">another_page.html</option>
  <option value="mercedes">placeholder_page.html</option>
  <option value="audi">other.html</option>
</select>
<script> 
  var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
    lineNumbers: true,
    matchBrackets: true,
    mode: "htmlmixed",
    lineWrapping: true,
    theme: 'default',
  });
</script>
				
				</td>
				
				<td>1</td><td></td>
				
	



	<td class="left" id="Column" class="hidden" style="position:relative; left:17px;">
				
				<textarea id="code2" name="code2" style="padding-top:0px; border:none; padding-left:300px;" >h2 {
    visibility: hidden;
}

h2 {
    visibility: hidden;
}

h2 {
    visibility: hidden;
}

h2 {
    visibility: hidden;
}
</textarea> 
 <select style="height:46px; width:100%; margin:0px; position:relative; left:0%;">
  <option value="volvo">main.css</option>
  <option value="saab">main2.css</option>
  <option value="mercedes">main3.css</option>
  <option value="audi">other.css</option>
</select>
<script> 
  var editor = CodeMirror.fromTextArea(document.getElementById("code2"), {
    lineNumbers: true,
    matchBrackets: true,
    mode: "text/css",
    lineWrapping: true,
    theme: 'default',
  });
</script>
				
				</td>
	
	
	
	
	
	
	
	
	
	
	
	
	
			
		
<td class="right" style="border-collapse: collapse; padding:none; margin:none; border:none;">

<iframe src="http://duckduckgo.com" style="width:99%; height:100%; border:none; margin-left:13px;"></iframe>
			




</td>



</tr>
																			
</table>

I still need to make the code executed in the iFrame automatically, but for now I just want the user to be able to make the css textarea disappear and appear. Any help would be highly appreciated - thanks :)

回答1:

I noticed there were three errors. The displayCSS function wasn't defined at all. You need to include jQuery. And the tr around the button isn't closed properly.

Here's the modified code:

<script src="jquery.min.js"></script>
<script src="codemirror.js"></script>
<link href="../css/codemirror.css" rel="stylesheet" type="text/css" />
<script src="htmlmixed/htmlmixed.js"></script>
<script src="xml.js"><!-- needed for htmlmixed --></script>
<script src="css.js"></script>

<style>
    .CodeMirror {
        border:none;
        width:100%;
        height:451px;
        margin-left:100;
    }
</style>




 <table id="sample2" width="100%" height="500px" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
            <tr>
               <td colspan="3"><button onclick="displayCSS()">Hide/Show CSS</button></td>
            </tr>
            <tr>
            <td class="left">
                <textarea id="code" name="code" style="padding-top:0px; border:none;" >
                    <!DOCTYPE html>
                    <html>
                        <head>

                        </head>
                        <body>

                        </body>
                    </html>
                </textarea> 
                 <select style="height:46px; width:100%; margin:0px; position:relative; left:0%;">
                  <option value="volvo">index.html</option>
                  <option value="saab">another_page.html</option>
                  <option value="mercedes">placeholder_page.html</option>
                  <option value="audi">other.html</option>
                </select>
                <script> 
                  var editor1 = CodeMirror.fromTextArea(document.getElementById("code"), {
                    lineNumbers: true,
                    matchBrackets: true,
                    mode: "htmlmixed",
                    lineWrapping: true,
                    theme: 'default',
                  });
                </script>   
            </td>

    <td class="left" id="Column" class="hidden" style="position:relative; left:17px;">
         <textarea id="code2" name="code2" style="padding-top:0px; border:none; padding-left:300px;" >
            h2 
            {
                visibility: hidden;
            }

            h2 
            {
                visibility: hidden;
            }

            h2 
            {
                visibility: hidden;
            }

            h2 
            {
                visibility: hidden;
            }
         </textarea> 
         <select style="height:46px; width:100%; margin:0px; position:relative; left:0%;">
          <option value="volvo">main.css</option>
          <option value="saab">main2.css</option>
          <option value="mercedes">main3.css</option>
          <option value="audi">other.css</option>
        </select>
        <script> 
          var editor2 = CodeMirror.fromTextArea(document.getElementById("code2"), {
            lineNumbers: true,
            matchBrackets: true,
            mode: "text/css",
            lineWrapping: true,
            theme: 'default',
          });
        </script>
    </td>               
    <td class="right" style="border-collapse: collapse; padding:none; margin:none; border:none;">
        <iframe src="http://duckduckgo.com" style="width:99%; height:100%; border:none; margin-left:13px;"></iframe>
    </td>
</tr>

</table>

<script>
function displayCSS()
{
    var cm = $('.CodeMirror')[1].CodeMirror;
    $(cm.getWrapperElement()).toggle();
}
</script>

Edit

http://jsfiddle.net/aLwjhp1w/1/

来源：https://stackoverflow.com/questions/31836019/codemirror-within-an-extendable-td-doesnt-seem-to-disappear-appear-when-a-but

标签

javascript