使用editor.md将多个markdown文档呈现为HTML

时间:2018-07-17 06:26:39

标签: javascript markdown

我有这样的模板

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
   package="javadi60.saber.storeassistant">

   <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
   <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

   <application
      android:allowBackup="true"
      android:dialogTheme="@style/CustomDialog"
      android:icon="@mipmap/myappicon"
      android:label="@string/app_name"
      android:roundIcon="@mipmap/ic_launcher_round"
      android:supportsRtl="true"
      android:theme="@style/AppTheme">
      <activity android:name=".MainActivity">
          <intent-filter>
              <action android:name="android.intent.action.MAIN" />
              <category android:name="android.intent.category.LAUNCHER" />
          </intent-filter>
      </activity>
      <activity android:name=".insertData" />
      <activity android:name=".setting" />
      <activity android:name=".dellAll" />
      <activity android:name=".reports" />
      <activity android:name=".login" />
  </application>

</manifest>

可以使用editor.md将其呈现为html:

<div class="post-text">
    <div id='article-editormd-view'>
        <textarea style="display:none;">
{{ article.content }}
        </textarea>
    </div>
</div>

$(function(){ editormd.markdownToHTML("article-editormd-view", { htmlDecode : "style,script,iframe", // you can filter tags decode emoji : true, taskList : true, lineNumbers : false, }); 是ID

当我尝试在for循环中渲染多个注释时,例如:

article-editormd-view

它不起作用,

我通读了官方文档,但没有找到解决方案。

1 个答案:

答案 0 :(得分:2)

comment-editormd-view应该是元素的ID。因此,单个文本框的第一个示例可以正常工作,因为您已将其设置为元素的ID。

但是,当您尝试使用for循环进行操作时,请将其设置为element的类。因此,editor.md尝试使用选择器#comment-editormd-view在单个元素上而不是选择器.comment-editormd-view在所有元素上发挥作用。

可能的解决方案是简单地使用一个计数器,每个div具有不同的ID,以及一个为每个div创建文本框的脚本。像这样(未经测试的代码):

<script> var count = 0 </script>

{% for comment in page.object_list %}
  <script> count++ </script>

  <div id={{'comment-editormd-view' + count}}>
    <textarea style="display: none">
      {{ comment.body }}
    </textarea>
  </div>

  <script>
    editormd.markdownToHTML('comment-editormd-view' + count, {
      htmlDecode : 'style, script, iframe',
      emoji : true,
      taskList : true,
      lineNumbers : false
    });
  </script>

{% endfor %}

HTML元素ID:https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id

HTML元素类:https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class