DedeCMS集成Markdown编辑器

织梦教程 0次 来源：老K模板网 收藏

第一步​

下载 editormd.zip 压缩包，解压后，上传到 wwwroot/include 目录下。如图所示：

image-20221120135053289

image-20221120174755832

第二步​

将以下代码加入到 wwwroot/include/inc/inc_fun_funAdmin.php 文件。

<button title="Copy Code" class="copy" style="touch-action: manipulation; border: 1px solid var(--vp-code-copy-code-border-color); padding: 0px; background-image: var(--vp-icon-copy); direction: ltr; position: absolute; top: 12px; right: 12px; z-index: 3; border-radius: 4px; width: 40px; height: 40px; opacity: 0; background-position: 50% center; background-size: 20px; background-repeat: no-repeat; transition: border-color 0.25s, background-color 0.25s, opacity 0.25s;"></button>php
else if($GLOBALS['cfg_html_editor']=='editormd')
{
 $link = $GLOBALS["cfg_cmspath"]."/include/editormd/css/editormd.min.css";
 $jquery = $GLOBALS["cfg_cmspath"]."/assets/pkg/jquery/jquery.min.js";
 $script = $GLOBALS["cfg_cmspath"]."/include/editormd/editormd.min.js";
 $path = $GLOBALS["cfg_cmspath"]."/include/editormd/lib/";

 $code = '
  <link rel="stylesheet" href="'.$link.'" />
  <div id="editormd">
   <textarea style="display:none;">'.dede_htmlspecialchars($fvalue).'</textarea>
  </div>
  <input type="hidden" id="'.$fname.'" name="'.$fname.'" value="'.dede_htmlspecialchars($fvalue).'">
  <script src="'.$jquery.'"></script>
  <script src="'.$script.'"></script>
  <script type="text/javascript">
   $(function() {
    editormd("editormd", {
     width  : "100%",
     height : 720,
     path   : "'.$path.'",
     emoji  : true,
     onchange : function() {
      document.getElementById("'.$fname.'").value = this.getValue();
     }
    });
   });
  </script>
 ';

 if($gtype=="print")
 {
  echo $code;
 }
 else
 {
  return $code;
 }
}

具体位置，如下图所示：

image-20221120175757927

第三步​

设置DedeCMS系统配置参数 cfg_html_editor 值为 editormd 。如下图所示：

image-20221120180244925

也可以使用以下SQL命令，同时更新一下 cfg_html_editor 的 参数说明 与 参数值 ：

<button title="Copy Code" class="copy" style="touch-action: manipulation; border: 1px solid var(--vp-code-copy-code-border-color); padding: 0px; background-image: var(--vp-icon-copy); direction: ltr; position: absolute; top: 12px; right: 12px; z-index: 3; border-radius: 4px; width: 40px; height: 40px; opacity: 0; background-position: 50% center; background-size: 20px; background-repeat: no-repeat; transition: border-color 0.25s, background-color 0.25s, opacity 0.25s;"></button>sql
UPDATE `#@__sysconfig` SET `info` = 'Html编辑器支持（wangEditor、ckeditor、fck、editormd）', `value` = 'editormd' WHERE `varname` = 'cfg_html_editor';

image-20221120181433699

第四步​

修改相应的模板文件，添加以下资源调用，用于渲染 Markdown 代码，缺一不可：

<button title="Copy Code" class="copy" style="touch-action: manipulation; border: 1px solid var(--vp-code-copy-code-border-color); padding: 0px; background-image: var(--vp-icon-copy); direction: ltr; position: absolute; top: 12px; right: 12px; z-index: 3; border-radius: 4px; width: 40px; height: 40px; opacity: 0; background-position: 50% center; background-size: 20px; background-repeat: no-repeat; transition: border-color 0.25s, background-color 0.25s, opacity 0.25s;"></button>html
<link rel="stylesheet" href="{dede:global.cfg_cmsurl/}/include/editormd/css/editormd.preview.min.css" />

<script src="{dede:global.cfg_cmsurl/}/assets/pkg/jquery/jquery.min.js"></script>
<script src="{dede:global.cfg_cmsurl/}/include/editormd/lib/marked.min.js"></script>
<script src="{dede:global.cfg_cmsurl/}/include/editormd/lib/prettify.min.js"></script>
<script src="{dede:global.cfg_cmsurl/}/include/editormd/lib/raphael.min.js"></script>
<script src="{dede:global.cfg_cmsurl/}/include/editormd/lib/underscore.min.js"></script>
<script src="{dede:global.cfg_cmsurl/}/include/editormd/lib/sequence-diagram.min.js"></script>
<script src="{dede:global.cfg_cmsurl/}/include/editormd/lib/flowchart.min.js"></script>
<script src="{dede:global.cfg_cmsurl/}/include/editormd/lib/jquery.flowchart.min.js"></script>
<script src="{dede:global.cfg_cmsurl/}/include/editormd/editormd.min.js"></script>

同时，把 {dede:field.body /} 替换成以下代码：

<button title="Copy Code" class="copy" style="touch-action: manipulation; border: 1px solid var(--vp-code-copy-code-border-color); padding: 0px; background-image: var(--vp-icon-copy); direction: ltr; position: absolute; top: 12px; right: 12px; z-index: 3; border-radius: 4px; width: 40px; height: 40px; opacity: 0; background-position: 50% center; background-size: 20px; background-repeat: no-repeat; transition: border-color 0.25s, background-color 0.25s, opacity 0.25s;"></button>html
<div id="editormd-view">
 <textarea style="display:none;">{dede:field.body runphp='yes'}@me = dede_htmlspecialchars(@me);{/dede:field.body}</textarea>
</div>

<script type="text/javascript">
 $(function() {
  editormd.markdownToHTML("editormd-view", {
   htmlDecode      : "style,script,iframe",  // you can filter tags decode
   emoji           : true,
   taskList        : true,
   tex             : true,  // 默认不解析
   flowChart       : true,  // 默认不解析
   sequenceDiagram : true,  // 默认不解析
  });
 });
</script>

大功告成了！喜欢 Markdown 的小伙伴快来试试吧！

免责声明：1.凡本站注明“来源：XXX（非老K模板网）”的作品，均转载自其它媒体，所载的文章、图片、音频视频文件等资料的版权归版权所有人所有，如有侵权，请联系laokcms#126.com处理；2.凡本站转载内容仅代表作者本人观点，与老K模板网无关。

相关文档

0 条评论

网友留言

搜索帮助

更多

人气文章

Copyright © 2024 © 老K模板网 ✪ 版权所有
赣ICP备20009342号