javascript - 如何使用 vue.js 和 uikit 将降价编辑器嵌入到我的 html 中？

Question

我的博客项目是由前端的 vue.js 和 uikit 构建的，现在我想添加一个 markdown 编辑器，我使用了 uikit 示例 htmleditor，但它不起作用，我无法从 textarea 输入。

以下是我的代码：

{% 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>
        </div>

</div>

{% endblock %}

我不知道为什么？我是 js 和前端的新手。谢谢你帮助我