WordPress.org
Get WordPress

Plugin Directory

Changeset 2138062


Ignore:
Timestamp:
08/12/2019 10:56:38 AM (7 years ago)
Author:
biodunhi
Message:

Added short code

Location:
html5-code-editor/trunk
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • html5-code-editor/trunk/assets/css/style.css

    r2138016 r2138062  
    5858    padding-top: 10px;
    5959}
     60.desc{
     61    text-align: center;
     62    font-weight: bold;
     63}
     64.desc code {
     65    color: red;
     66}

  • html5-code-editor/trunk/assets/js/core.js

    r2138016 r2138062  
    1515  }
    1616}
     17loadscript();

  • html5-code-editor/trunk/html5-code-editor.php

    r2138016 r2138062  
    4141        </div>
    4242        <hr>
     43        <p class="desc">Easily integrate in Page and Post with this shortcode <code>[html5code]</code></p>
    4344        <div class="content">
    4445                 <!-- Textarea container start here -->
    … …  
    113114        <?php
    114115    }
     116
     117
     118
     119  //Adding shortcode
     120  function html5_code_editorfunction(){
     121      wp_enqueue_style( 'style-css', plugin_dir_url( __FILE__ ).'assets/css/style.css' );
     122      wp_enqueue_script( 'core-js', plugin_dir_url( __FILE__ ).'assets/js/core.js' );
     123    $snipet = "<div class='wrap'>";
     124    ?>
     125           <div class="contenthtml">
     126      <div id="hearder1">
     127          <code>HTML5 <span>CODE</span> Editor</code>
     128        </div>
     129        <hr>
     130        <div class="content">
     131           <!-- Textarea container start here -->
     132          <div class="textareacontainer">
     133            <div class="textarea">
     134                <div class="headerCon">
     135                  <div class="headerText">Edit This Code:</div>
     136                </div>
     137                <!-- HTML5 Editor begins here -->
     138                <div class="textareawrapper">
     139                    <textarea autocomplete="off" class="code_input" id="textareaCode" wrap="logical" spellcheck="false"><!DOCTYPE html>
     140                      <html>
     141                        <head>
     142                            <style type="text/css">
     143                                p{
     144                                    color: red;
     145                                    font-weight: bold;
     146                                }
     147                                #demo{
     148                                    color: blue;
     149                                }
     150                            </style>
     151                        </head>
     152                        <body>
     153
     154                            <p>This example calls a function which performs a calculation, and returns the result:</p>
     155
     156                            <p id="demo"></p>
     157
     158                            <script>
     159                            function myFunction(a, b) {
     160                                return a * b;
     161                            }
     162                            document.getElementById("demo").innerHTML = myFunction(4, 3);
     163                            </script>
     164
     165                        </body>
     166                      </html>
     167                      </textarea>
     168                                <form autocomplete="off" class="codeform">
     169                                  <input type="hidden" name="code" id="code" />
     170                                  <input type="hidden" id="bt" name="bt" />
     171                                </form>
     172                 </div>
     173               <!-- HTML5 Editor ends here -->
     174            </div>
     175          </div>
     176          <!-- Textarea container ends here -->
     177
     178          <center>
     179              <button class="seeResult" type="button" onclick="loadscript()">
     180                 See Result &raquo;
     181            </button>
     182          </center>
     183
     184          <!-- Result field for HTML5 -->
     185          <div class="iframecontainer">
     186            <div class="iframe">
     187              <div class="headerCon">
     188                <div class="headerText">Result:</div>
     189              </div>
     190              <div id="iframewrapper" class="iframewrapper">
     191              </div>
     192            </div>
     193          </div>
     194          <!-- Result field end for HTML5 -->
     195    </div>
     196  <?php $snipet .= "</div>";
     197    return $snipet;
     198  }
     199
     200  add_shortcode('html5code','html5_code_editorfunction');
    115201?>
Note: See TracChangeset for help on using the changeset viewer.