layui 第三方組件平臺

返回首頁 發(fā)布組件

基于Layui支持表情的Markdown編輯器,目前已經(jīng)支持插入視頻功能了,快來體驗吧 實際效果 可訪問 https://chengliangyun.com/q/jie/3 來查看和體驗

更新:2020-2-24 創(chuàng)建:2019-12-11

文檔

預(yù)覽效果










使用方式:渲染插件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>簡易Markdown編輯器</title>
</head>
<!-- layui樣式 -->
<link rel="stylesheet" href="easyeditor/layui/css/layui.css">
<!-- 部分自定義樣式 -->
<link rel="stylesheet" href="easyeditor/css/easyeditor.css">
<!-- 圖標(biāo) -->
<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_1531710_xb357ub1wmg.css" />
<body>

<!-- Markdown編輯器元素 -->
<textarea id="L_content" name="content" style="" required lay-verify="required" placeholder="請輸入發(fā)表內(nèi)容" class="layui-textarea editor"></textarea>

<script src="easyeditor/js/marked.min.js" type="text/javascript" charset="utf-8"></script>
<script src="easyeditor/layui/layui.js"></script>
<script>
layui.config({
base: 'easyeditor/mods/' //存放layui拓展模塊的目錄位置
}).extend({
easyeditor: 'easyeditor'
}).use(['easyeditor'], function() {
var easyeditor = layui.easyeditor;
//初始化Markdown編輯器
easyeditor.init({
elem: '.editor' //textarea 元素class
,uploadUrl: '/upload' //圖片上傳地址
,videoUploadUrl : '/upload' //視頻上傳地址
,videoUploadSize:'102400' //限制的上傳大小 單位kb 默認 10240 kb
,uploadSize: '' //限制的上傳大小 單位kb 默認 1024k
//,codeSkin:'notepad' //代碼框樣式 默認不填 與notepad
//,style:'fange' //內(nèi)置樣式 目前只有默認 和 方格兩種
//,buttonColor:'#FFB800' //自定義按鈕顏色
//,hoverBgColor:'red' // 自定義鼠標(biāo)懸浮背景顏色
//,hoverColor:'#000000' // 自定義鼠標(biāo)懸浮按鈕顏色
});
//upload 接口要求返回的數(shù)據(jù)格式
// {
// code:0 ,//code=0代表文件保存成功 其他code值 則認為失敗
// msg:'圖片保存失敗' ,//搭配code使用 當(dāng)code不等于 0 時,做出提示信息
// url:'http://xxx.com/images/xxx.jpg' //圖片上傳成功后,圖片的訪問路徑/保存路徑,使用圖片全路徑
// }

});
</script>
</body>
</html>
使用方式:渲染markdown


js代碼部分
<script src="easyeditor/js/marked.min.js" type="text/javascript" charset="utf-8"></script>
<script src="easyeditor/layui/layui.js"></script>
<script>
layui.config({
base: 'easyeditor/mods/' //存放layui拓展模塊的目錄位置
}).extend({
easyeditor: 'easyeditor'
}).use(['easyeditor'], function() {
var easyeditor = layui.easyeditor;
easyeditor.render({
elem:".easyeditor-content" //存放md內(nèi)容的元素ID
})
});
</script>
可以到碼云來獲取源碼: 碼云地址>>>>點我

下載

立即下載 去碼云下載
該擴展組件由第三方用戶主動投遞,并由其自身進行維護,本站僅做收集。