diff --git a/module/doc/control.php b/module/doc/control.php
index a804fb1998..dff81a7cc5 100644
--- a/module/doc/control.php
+++ b/module/doc/control.php
@@ -935,6 +935,71 @@ class doc extends control
             }
         }
 
+        if(isset($doc) and $doc->type == 'text')
+        {
+            /* Split content into an array. */
+            $content = explode("\n", $doc->content);
+
+            /* Get the head element, for example h1,h2,etc. */
+            $includeHeadElement = array();
+            foreach($content as $index => $element)
+            {
+                preg_match('/<(h[1-6])>([\S\s]*?)<\/\1>/', $element, $headElement);
+
+                if(isset($headElement[1]) and !in_array($headElement[1], $includeHeadElement) and strip_tags($headElement[2]) != '') $includeHeadElement[] = $headElement[1];
+            }
+
+            /* Get the two elements with the highest rank. */
+            sort($includeHeadElement);
+            $includeHeadElement = array_slice($includeHeadElement, 0, 2);
+
+            if($includeHeadElement)
+            {
+                $outline    = '<ul class="tree tree-angles" data-ride="tree" id="outline">';
+                $preElement = '';
+                foreach($content as $index => $element)
+                {
+                    preg_match('/<(h[1-6])>([\S\s]*?)<\/\1>/', $element, $headElement);
+
+                    /* The current element is existed, the element is in the includeHeadElement, and the text in the element is not null. */
+                    if(isset($headElement[1]) and in_array($headElement[1], $includeHeadElement) and strip_tags($headElement[2]) != '')
+                    {
+                        /* The element is the first level. */
+                        if(array_search($headElement[1], $includeHeadElement) == 0)
+                        {
+                            /* The second level is existed, and previous element is the second level element. */
+                            if(isset($includeHeadElement[1]) and $preElement == $includeHeadElement[1]) $outline .= '</ul></li>';
+                            if($preElement == $includeHeadElement[0]) $outline .= '</li>';
+
+                            /* Add the anchor to the element. */
+                            $content[$index] = str_replace('<' . $includeHeadElement[0] . '>', '<' . $includeHeadElement[0] . " id='anchor{$index}'" . '>', $content[$index]);
+                            $outline        .= '<li class="text-ellipsis">' . html::a('#anchor' . $index, strip_tags($headElement[2]), '', "title='" . strip_tags($headElement[2]) . "'");
+
+                            $preElement = $headElement[1];
+                        }
+                        elseif(array_search($headElement[1], $includeHeadElement) == 1)
+                        {
+                            if($preElement == '') $outline .= '<li><ul>';
+                            if($preElement == $includeHeadElement[0]) $outline .= '<ul>';
+
+                            /* Add the anchor to the element. */
+                            $content[$index] = str_replace('<' . $includeHeadElement[1] . '>', '<' . $includeHeadElement[1] . " id='anchor{$index}'" . '>', $content[$index]);
+                            $outline        .= '<li class="text-ellipsis">' . html::a('#anchor' . $index, strip_tags($headElement[2]), '', "title='" . strip_tags($headElement[2]) . "'") . '</li>';
+
+                            $preElement = $includeHeadElement[1];
+                        }
+                    }
+                    /* */
+                    if(isset($includeHeadElement[1]) and $preElement == $includeHeadElement[1] and !isset($content[$index+1])) $outline .= '</ul></li>';
+                }
+                $outline .= '</ul>';
+
+                $doc->content = implode("\n", $content);
+
+                $this->view->outline = $outline;
+            }
+        }
+
         $this->view->customObjectLibs = $customObjectLibs;
         $this->view->showLibs         = $this->config->doc->custom->objectLibs;
 
diff --git a/module/doc/css/objectlibs.css b/module/doc/css/objectlibs.css
index 7a30b24061..cf0fbe11b3 100644
--- a/module/doc/css/objectlibs.css
+++ b/module/doc/css/objectlibs.css
@@ -25,3 +25,14 @@
 .main-col+.side-col {padding-left: 16px;}
 .main-col iframe {min-height: 380px;}
 .article-content .keywords {margin-bottom: 15px;}
+
+.article-content {width: 100%; display: inline-block;}
+.outline {position: relative;}
+.outline .outline-toggle i.icon-angle-right, i.icon-angle-left {width: 18px; height: 18px; background: #efefef; border-radius: 50%; position: absolute;}
+.outline .outline-toggle i.icon-angle-right:before {content: "\e314"; cursor: pointer;}
+.outline .outline-toggle i.icon-angle-left:before {content: "\e315"; cursor: pointer;}
+.outline ul li {list-style: none;}
+.outline-content {display: none; padding-top: 18px;}
+.outline-content a {color: #838A9D;}
+.outline-content li.text-ellipsis.active>a {font-weight: 700; color: #0c64eb;}
+#outline li.has-list.open:before {content: unset;}
diff --git a/module/doc/js/objectlibs.js b/module/doc/js/objectlibs.js
index 7ee6b36f77..ffa86ae886 100644
--- a/module/doc/js/objectlibs.js
+++ b/module/doc/js/objectlibs.js
@@ -93,3 +93,35 @@ document.addEventListener("msfullscreenChange", function (e)
 {
     if(!document.msfullscreenElement) exitFullScreen();
 })
+
+$(function()
+{
+    $('.outline').height($('.article-content').height());
+
+    $(document).on('click', '.outline .outline-toggle i.icon-angle-right', function()
+    {
+        $('.article-content').width('85%');
+        $('.outline').css({'min-width' : '180px', 'border-left' : '2px solid #efefef'});
+        $(this).removeClass('icon-angle-right').addClass('icon-angle-left').css('left', '-9px');
+        $('.outline-content').show();
+    })
+
+    $(document).on('click', '.outline .outline-toggle i.icon-angle-left', function()
+    {
+        $('.article-content').width('100%');
+        $(this).removeClass('icon-angle-left').addClass('icon-angle-right');
+        $('.outline-content').hide();
+    })
+
+    $('.outline-content li.text-ellipsis').click(function()
+    {
+        console.log(this);
+        $('.outline-content li.text-ellipsis.active').removeClass('active');
+        $(this).addClass('active');
+
+        event.stopPropagation();
+    })
+
+    $('#outline li.has-list').addClass('open in');
+    $('#outline li.has-list>i+ul').prev('i').remove();
+})
diff --git a/module/doc/view/content.html.php b/module/doc/view/content.html.php
index 06248a89a7..7b8b8f1684 100644
--- a/module/doc/view/content.html.php
+++ b/module/doc/view/content.html.php
@@ -65,62 +65,72 @@ $sessionString .= session_name() . '=' . session_id();
             <?php endif;?>
           </div>
         </div>
-        <div class="detail-content article-content">
-          <?php if($doc->keywords):?>
-          <p class='keywords'>
-            <?php foreach($doc->keywords as $keywords):?>
-            <?php if($keywords) echo "<span class='label label-outline'>$keywords</span>";?>
+        <div class="table-row">
+          <div class="detail-content article-content table-col">
+            <?php if($doc->keywords):?>
+            <p class='keywords'>
+              <?php foreach($doc->keywords as $keywords):?>
+              <?php if($keywords) echo "<span class='label label-outline'>$keywords</span>";?>
+              <?php endforeach;?>
+            </p>
+            <?php endif;?>
+            <?php
+            if($doc->type == 'url')
+            {
+                $url = $doc->content;
+                if(!preg_match('/^https?:\/\//', $doc->content)) $url = 'http://' . $url;
+                $urlIsHttps = strpos($url, 'https://') === 0;
+                $serverIsHttps = ((isset($_SERVER["HTTPS"]) && $_SERVER["HTTPS"] == 'on') or (isset($_SERVER['HTTP_X_FORWARDED_PROTO']) and strtolower($_SERVER['HTTP_X_FORWARDED_PROTO']) == 'https'));
+                if(($urlIsHttps and $serverIsHttps) or (!$urlIsHttps and !$serverIsHttps))
+                {
+                    echo "<iframe width='100%' id='urlIframe' src='$url'></iframe>";
+                }
+                else
+                {
+                    $parsedUrl = parse_url($url);
+                    $urlDomain = $parsedUrl['scheme'] . '://' . $parsedUrl['host'];
+
+                    $title    = '';
+                    $response = common::http($url);
+                    preg_match_all('/<title>(.*)<\/title>/Ui', $response, $out);
+                    if(isset($out[1][0])) $title = $out[1][0];
+
+                    echo "<div id='urlCard'>";
+                    echo "<div class='url-icon'><img src='{$urlDomain}/favicon.ico' width='45' height='45' /></div>";
+                    echo "<div class='url-content'>";
+                    echo "<div class='url-title'>{$title}</div>";
+                    echo "<div class='url-href'>" . html::a($url, $url, '_target') . "</div>";
+                    echo "</div></div>";
+                }
+            }
+            else
+            {
+                echo $doc->content;
+            }
+            ?>
+            <?php foreach($doc->files as $file):?>
+            <?php if(in_array($file->extension, $config->file->imageExtensions)):?>
+            <div class='file-image'>
+              <a href="<?php echo $file->webPath?>" target="_blank">
+                <img onload="setImageSize(this, 0)" src="<?php echo $this->createLink('file', 'read', "fileID={$file->id}");?>" alt="<?php echo $file->title?>" title="<?php echo $file->title;?>">
+              </a>
+              <span class='right-icon'>
+                <?php if(common::hasPriv('file', 'download')) echo html::a($this->createLink('file', 'download', 'fileID=' . $file->id) . $sessionString, "<i class='icon icon-export'></i>", '', "class='btn-icon' style='margin-right: 10px;' title=\"{$lang->doc->download}\"");?>
+                <?php if(common::hasPriv('doc', 'deleteFile')) echo html::a('###', "<i class='icon icon-trash'></i>", '', "class='btn-icon' title=\"{$lang->doc->deleteFile}\" onclick='deleteFile($file->id)'");?>
+              </span>
+            </div>
+            <?php unset($doc->files[$file->id]);?>
+            <?php endif;?>
             <?php endforeach;?>
-          </p>
-          <?php endif;?>
-          <?php
-          if($doc->type == 'url')
-          {
-              $url = $doc->content;
-              if(!preg_match('/^https?:\/\//', $doc->content)) $url = 'http://' . $url;
-              $urlIsHttps = strpos($url, 'https://') === 0;
-              $serverIsHttps = ((isset($_SERVER["HTTPS"]) && $_SERVER["HTTPS"] == 'on') or (isset($_SERVER['HTTP_X_FORWARDED_PROTO']) and strtolower($_SERVER['HTTP_X_FORWARDED_PROTO']) == 'https'));
-              if(($urlIsHttps and $serverIsHttps) or (!$urlIsHttps and !$serverIsHttps))
-              {
-                  echo "<iframe width='100%' id='urlIframe' src='$url'></iframe>";
-              }
-              else
-              {
-                  $parsedUrl = parse_url($url);
-                  $urlDomain = $parsedUrl['scheme'] . '://' . $parsedUrl['host'];
-
-                  $title    = '';
-                  $response = common::http($url);
-                  preg_match_all('/<title>(.*)<\/title>/Ui', $response, $out);
-                  if(isset($out[1][0])) $title = $out[1][0];
-
-                  echo "<div id='urlCard'>";
-                  echo "<div class='url-icon'><img src='{$urlDomain}/favicon.ico' width='45' height='45' /></div>";
-                  echo "<div class='url-content'>";
-                  echo "<div class='url-title'>{$title}</div>";
-                  echo "<div class='url-href'>" . html::a($url, $url, '_target') . "</div>";
-                  echo "</div></div>";
-              }
-          }
-          else
-          {
-              echo $doc->content;
-          }
-          ?>
-          <?php foreach($doc->files as $file):?>
-          <?php if(in_array($file->extension, $config->file->imageExtensions)):?>
-          <div class='file-image'>
-            <a href="<?php echo $file->webPath?>" target="_blank">
-              <img onload="setImageSize(this, 0)" src="<?php echo $this->createLink('file', 'read', "fileID={$file->id}");?>" alt="<?php echo $file->title?>" title="<?php echo $file->title;?>">
-            </a>
-            <span class='right-icon'>
-              <?php if(common::hasPriv('file', 'download')) echo html::a($this->createLink('file', 'download', 'fileID=' . $file->id) . $sessionString, "<i class='icon icon-export'></i>", '', "class='btn-icon' style='margin-right: 10px;' title=\"{$lang->doc->download}\"");?>
-              <?php if(common::hasPriv('doc', 'deleteFile')) echo html::a('###', "<i class='icon icon-trash'></i>", '', "class='btn-icon' title=\"{$lang->doc->deleteFile}\" onclick='deleteFile($file->id)'");?>
-            </span>
           </div>
-          <?php unset($doc->files[$file->id]);?>
+          <?php if(!empty($outline) and strip_tags($outline)):?>
+          <div class="outline table-col">
+            <div class="outline-toggle"><i class="icon icon-angle-right"></i></div>
+            <div class="outline-content">
+              <?php echo $outline;?>
+            </div>
+          </div>
           <?php endif;?>
-          <?php endforeach;?>
         </div>
       </div>
       <?php echo $this->fetch('file', 'printFiles', array('files' => $doc->files, 'fieldset' => 'true', 'object' => $doc));?>