我的博客项目由前端的vue.js和uikit以及后端的Python3构建，现在我想在我的blog_edit.html中添加一个降价编辑器，我使用了uikit examples htmleditor，但它没有工作，我不能从textarea输入。它完全不同于它根本不响应鼠标和键盘。我已经包含了必要的CodeMirror和标记的依赖项。我的html页面显示如下： enter image description here
以下是我的代码：
{% 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;"><h1>Heading</h1> <p>Lorem ipsum dolor sit <strong>amet</strong>, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <a href="#">This is a link</a></p> <ul> <li>Item</li> <li>Item</li> <li>Item</li> </ul> <h2>Heading</h2> <p>Ut enim ad <em>minim</em> 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.</p></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;"> </div>
</div>
<div class="CodeMirror-code">
<pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">h1</span><span class="cm-tag cm-bracket">></span>Heading<span class="cm-tag cm-bracket"></</span><span class="cm-tag">h1</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"><span cm-text="">​</span></span></pre><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">></span>Lorem ipsum dolor sit <span class="cm-tag cm-bracket"><</span><span class="cm-tag">strong</span><span class="cm-tag cm-bracket">></span>amet<span class="cm-tag cm-bracket"></</span><span class="cm-tag">strong</span><span class="cm-tag cm-bracket">></span>, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <span class="cm-tag cm-bracket"><</span><span class="cm-tag">a</span> <span class="cm-attribute">href</span>=<span class="cm-string">"#"</span><span class="cm-tag cm-bracket">></span>This is a link<span class="cm-tag cm-bracket"></</span><span class="cm-tag">a</span><span class="cm-tag cm-bracket">></</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"><span cm-text="">​</span></span></pre><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">ul</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">li</span><span class="cm-tag cm-bracket">></span>Item<span class="cm-tag cm-bracket"></</span><span class="cm-tag">li</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">li</span><span class="cm-tag cm-bracket">></span>Itemsdsd<span class="cm-tag cm-bracket"></</span><span class="cm-tag">li</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"> <span class="cm-tag cm-bracket"><</span><span class="cm-tag">li</span><span class="cm-tag cm-bracket">></span>Item<span class="cm-tag cm-bracket"></</span><span class="cm-tag">li</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"></</span><span class="cm-tag">ul</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"><span cm-text="">​</span></span></pre><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">h2</span><span class="cm-tag cm-bracket">></span>Heading<span class="cm-tag cm-bracket"></</span><span class="cm-tag">h2</span><span class="cm-tag cm-bracket">></span></span></pre><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"><span cm-text="">​</span></span></pre><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">></span>Ut enim ad <span class="cm-tag cm-bracket"><</span><span class="cm-tag">em</span><span class="cm-tag cm-bracket">></span>minim<span class="cm-tag cm-bracket"></</span><span class="cm-tag">em</span><span class="cm-tag cm-bracket">></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"></</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">></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>
{％endblock％}