Top

Popular Search:

- Starter kit
- Element
- components
- forms
- tables

#### Editors

#### Summer note Offical link Preview link

    <!-- Html code for display summernote -->
    <div class="summernote">
      <p class="text-muted">
      Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical
      Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at
      Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem
    </p>
    </div>

##### To use summer note you have to add the following script file

    <!--Summer-note js-->
    <script src="../assets/js/summernote/summernote.js"></script>
    <script src="../assets/js/summernote/summernote.custom.js"></script>

##### To use summer note you have to add the following style file

    <!-- Summernote css -->
    <link rel="stylesheet" href="../assets/css/summernote.css">

#### CKeditor Offical link Preview link

    <!-- Html code for display ckeditor -->
      <textarea id="editor1" name="editor1" cols="30"
      rows="10"><h2>Technical details <a id="tech-details" name="tech-details"></a></h2>
        <table align="right" border="1" cellpadding="5" cellspacing="0">
          <caption><strong>Mission crew</strong></caption>
          <thead>
            <tr>
              <th scope="col">Position</th>
              <th scope="col">Astronaut</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Commander</td>
              <td>Neil A. Armstrong</td>
            </tr>
          </tbody>
        </table>
      <p>Launched by a <strong>Saturn V</strong> rocket from <a href="#">Kennedy Space Center</a> in Merritt Island, Florida on July 16, Apollo 11 was the fifth manned mission of <a href="#">NASA</a>'s Apollo program. The Apollo spacecraft had three parts:</p>
      <ol>
        <li><strong>Command Module</strong> with a cabin for the three astronauts which was the only part which landed back on Earth</li>
        <li><strong>Service Module</strong> which supported the Command Module with propulsion, electrical power, oxygen and water</li>
        <li><strong>Lunar Module</strong> for landing on the Moon.</li>
      </ol>
      <p>After being sent to the Moon by the Saturn V's upper stage, the astronauts separated the spacecraft from it and travelled for three days until they entered into lunar orbit. Armstrong and Aldrin then moved into the Lunar Module and landed in the <a href="#">Sea of Tranquility</a>. They stayed a total of about 21 and a half hours on the lunar surface. After lifting off in the upper part of the Lunar Module and rejoining Collins in the Command Module, they returned to Earth and landed in the <a href="#">Pacific Ocean</a> on July 24.</p>
    </textarea>

##### To use summer note you have to add the following script files

    <!--ckeditor js-->
    <script src="../assets/js/ckeditor/ckeditor.js"></script>
    <script src="../assets/js/ckeditor/styles.js"></script>
    <script src="../assets/js/ckeditor/adapters/jquery.js"></script>
    <script src="../assets/js/ckeditor/ckeditor.custom.js"></script>

#### Simple Mde Offical link Preview link

    <!-- Html code for display simple mde -->
    <textarea
    <div id="editable">Lorem ipsum dolor sit amet consectetur adipiscing elit maecenas congue, nisi suscipit curae auctor libero luctus est mauris, nostra torquent varius eros eget blandit pellentesque nascetur. Curabitur mauris porttitor sociosqu donec non phasellus posuere varius vestibulum rutrum a, sagittis mi magnis ridiculus commodo malesuada platea iaculis lobortis</textarea>
    </div>
    <div id="html_container"></div>

###### To use simple mde you have to add the following script files

    <!-- Simple MDE editor jquery-->
    <script src="../assets/js/simple-mde/simplemde.min.js"></script>
    <script src="../assets/js/simple-mde/simplemde.custom.js"></script>

###### To use simple mde you have to add the following style files

    <!-- Simple-MDE css -->
    <link rel="stylesheet prefetch" href="../assets/css/simple-mde.css">

#### Ace code Offical link Preview link

    <div class="ace-editor" id="editor">
      /* Sample JavaScript edit source */
      // Define a module
      var app = angular.module('app', ['ui.bootstrap']);
      // Define a conroller.
      app.controller('GrokController', ['$scope', '$filter',
      function($scope, $filter) {
        $scope.today = function() {
        $scope.dt = new Date();
      };
      $scope.today();
      $scope.isOpened = false;
      $scope.open = function($event) {
      $event.preventDefault();
      $event.stopPropagation();
      $scope.isOpened = true;
      };
    }]);
    /* End of sample edit source */
    </div>

##### To use ace code you have to add the following script files

    <!-- ace code editor js -->
    <script src="../assets/js/ace-editor/ace.js"></script>
    <script src="../assets/js/ace-editor/ace-custom.js"></script>