1. ホーム
  2. 質問と答え
  3. vue.jsとuikitを使ってHTMLにマークダウンエディタを埋め込む方法は？

vue.jsとuikitを使ってHTMLにマークダウンエディタを埋め込む方法は？

2016-08-03 10 views
0

私のブログプロジェクトはvue.jsとuikitでビルドされていましたが、フロントエンドとPython3がバックエンドでビルドされました。私はblog_edit.htmlにマークダウンエディタを追加したいと思いますが、uikit examples htmleditorを使用しました。テキストエリアから入力することはできません。これはマウスとキーボードには全く反応しないと言われています。私は必要なCodeMirrorとマークされた依存関係を含めました。私のhtmlページは次のように示しています。私のコード enter image description herevue.jsとuikitを使ってHTMLにマークダウンエディタを埋め込む方法は？

は以下の通りです：

{% extends '__base__.html' %} 
{% block title %}编辑日志{% endblock %} 
{% block beforehead %} 
<!-- Codemirror and marked dependencies --> 
<link rel="stylesheet" href="/static/css/codemirror.css"> 
<script src="/static/js/codemirror.js"></script> 
<script src="/static/js/markdown.js"></script> 
<script src="/static/js/overlay.js"></script> 
<script src="/static/js/xml.js"></script> 
<script src="/static/js/gfm.js"></script> 
<script src="/static/js/marked.js"></script> 
<!-- HTML editor CSS and JavaScript --> 
<link rel="stylesheet" href="/static/css/htmleditor.css"> 
<script src="/static/js/htmleditor.js"></script> 
{% endblock %} {% block content %} 
<div class="uk-width-2-3"> 
    <label class="uk-form-label">内容:</label> 
    <div class="uk-htmleditor uk-clearfix" data-mode="split"> 
    <div class="uk-htmleditor-navbar"> 
     <ul class="uk-htmleditor-navbar-nav uk-htmleditor-toolbar"> 
      <li><a data-htmleditor-button="bold" title="Bold" data-uk-tooltip><i class="uk-icon-bold"></i></a></li> 
      <li><a data-htmleditor-button="italic" title="Italic" data-uk-tooltip><i class="uk-icon-italic"></i></a></li> 
      <li><a data-htmleditor-button="strike" title="Strikethrough" data-uk-tooltip><i class="uk-icon-strikethrough"></i></a></li> 
      <li><a data-htmleditor-button="link" title="Link" data-uk-tooltip><i class="uk-icon-link"></i></a></li> 
      <li><a data-htmleditor-button="image" title="Image" data-uk-tooltip><i class="uk-icon-picture-o"></i></a></li> 
      <li><a data-htmleditor-button="blockquote" title="Blockquote" data-uk-tooltip><i class="uk-icon-quote-right"></i></a></li> 
      <li><a data-htmleditor-button="listUl" title="Unordered List" data-uk-tooltip><i class="uk-icon-list-ul"></i></a></li> 
      <li><a data-htmleditor-button="listOl" title="Ordered List" data-uk-tooltip><i class="uk-icon-list-ol"></i></a></li> 
     </ul> 
     <div class="uk-htmleditor-navbar-flip"> 
      <ul class="uk-htmleditor-navbar-nav"> 
       <li class="uk-htmleditor-button-code"><a>HTML</a></li> 
       <li class="uk-htmleditor-button-preview"><a>Preview</a></li> 
       <li><a data-htmleditor-button="fullscreen"><i class="uk-icon-expand"></i></a></li> 
      </ul> 
     </div> 
    </div> 
    <div class="uk-htmleditor-content"> 
     <div class="uk-htmleditor-code"> 
      <textarea data-uk-htmleditor="{maxsplitsize:600}" data-uk-check-display="1" style="display: none;">&lt;h1&gt;Heading&lt;/h1&gt; &lt;p&gt;Lorem ipsum dolor sit &lt;strong&gt;amet&lt;/strong&gt;, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. &lt;a href="#"&gt;This is a link&lt;/a&gt;&lt;/p&gt; &lt;ul&gt; &lt;li&gt;Item&lt;/li&gt; &lt;li&gt;Item&lt;/li&gt; &lt;li&gt;Item&lt;/li&gt; &lt;/ul&gt; &lt;h2&gt;Heading&lt;/h2&gt; &lt;p&gt;Ut enim ad &lt;em&gt;minim&lt;/em&gt; veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.&lt;/p&gt;</textarea> 
      <div class="CodeMirror cm-s-default CodeMirror-wrap" style="height: 500px;"> 
       <div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 274px; left: 14px;"> 
        <textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea> 
       </div> 
       <div class="CodeMirror-vscrollbar" cm-not-content="true" style="bottom: 0px;"> 
        <div style="min-width: 1px; height: 0px;"></div> 
       </div> 
       <div class="CodeMirror-hscrollbar" cm-not-content="true"> 
        <div style="height: 100%; min-height: 1px; width: 0px;"></div> 
       </div> 
       <div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div> 
       <div class="CodeMirror-gutter-filler" cm-not-content="true"></div> 
       <div class="CodeMirror-scroll" tabindex="-1"> 
        <div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: -15px; border-right-width: 15px; min-height: 448px; padding-right: 0px; padding-bottom: 0px;"> 
         <div style="position: relative; top: 0px;"> 
          <div class="CodeMirror-lines"> 
           <div style="position: relative; outline: none;"> 
            <div class="CodeMirror-measure"></div> 
            <div class="CodeMirror-measure"></div> 
            <div style="position: relative; z-index: 1;"></div> 
            <div class="CodeMirror-cursors"> 
             <div class="CodeMirror-cursor" style="left: 4px; top: 260px; height: 20px;">&nbsp;</div> 
            </div> 
            <div class="CodeMirror-code"> 
             <pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"><span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">h1</span><span class="cm-tag cm-bracket">&gt;</span>Heading<span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">h1</span><span class="cm-tag cm-bracket">&gt;</span></span></pre><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"><span cm-text="">&#8203;</span></span></pre><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"><span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">&gt;</span>Lorem ipsum dolor sit <span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">strong</span><span class="cm-tag cm-bracket">&gt;</span>amet<span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">strong</span><span class="cm-tag cm-bracket">&gt;</span>, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">a</span> <span class="cm-attribute">href</span>=<span class="cm-string">"#"</span><span class="cm-tag cm-bracket">&gt;</span>This is a link<span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">a</span><span class="cm-tag cm-bracket">&gt;&lt;/</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">&gt;</span></span></pre><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"><span cm-text="">&#8203;</span></span></pre><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"><span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">ul</span><span class="cm-tag cm-bracket">&gt;</span></span></pre><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"> &nbsp; <span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">li</span><span class="cm-tag cm-bracket">&gt;</span>Item<span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">li</span><span class="cm-tag cm-bracket">&gt;</span></span></pre><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"> &nbsp; <span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">li</span><span class="cm-tag cm-bracket">&gt;</span>Itemsdsd<span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">li</span><span class="cm-tag cm-bracket">&gt;</span></span></pre><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"> &nbsp; <span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">li</span><span class="cm-tag cm-bracket">&gt;</span>Item<span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">li</span><span class="cm-tag cm-bracket">&gt;</span></span></pre><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"><span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">ul</span><span class="cm-tag cm-bracket">&gt;</span></span></pre><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"><span cm-text="">&#8203;</span></span></pre><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"><span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">h2</span><span class="cm-tag cm-bracket">&gt;</span>Heading<span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">h2</span><span class="cm-tag cm-bracket">&gt;</span></span></pre><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"><span cm-text="">&#8203;</span></span></pre><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"><span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">&gt;</span>Ut enim ad <span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">em</span><span class="cm-tag cm-bracket">&gt;</span>minim<span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">em</span><span class="cm-tag cm-bracket">&gt;</span> veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">&gt;</span></span></pre> 
            </div> 
           </div> 
          </div> 
         </div> 
        </div> 
        <div style="position: absolute; height: 15px; width: 1px; border-bottom-width: 0px; border-bottom-style: solid; border-bottom-color: transparent; top: 448px;"></div> 
        <div class="CodeMirror-gutters" style="display: none; height: 463px;"></div> 
       </div> 
      </div> 
     </div> 
     <div class="uk-htmleditor-preview" v-model="content" style="height: 500px;"></div> 
    </div> 
</div>

{％の末端ブロック％}

出典

2016-08-03 kitian

答えて

関連する問題

 関連する問題