在Asp.Net或.Net Core中配置使用MarkDown富文本编辑器有开源模板代码(代码是.net core3.0版本)
研究如何使用Markdown你们可能要花好几天才能搞定,但是看我的文章或者下载了源码,你搞定一般在10分钟之内。我先给各位介绍下它:
Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档。Markdown 语言在 2004 由约翰·格鲁伯(英语:John Gruber)创建。Markdown 编写的文档可以导出 HTML 、Word、图像、PDF、Epub 等多种格式的文档。随着它的越来越流行我们的网站自然不能落后,那么我来教大家怎么配置使用吧!
实现效果如图:
1.首先你要引用markdown相关文件库(开源项目地址)
<link href="~/Lib/MarkDown/css/editormd.css" rel="stylesheet" />
<link href="~/Lib/MarkDown/css/editormd.preview.css" rel="stylesheet" />
<script src="~/Lib/MarkDown/js/editormd.js"></script>
2.html中添加编辑器(加载数据只需要放在textarea标签内即可加载到编辑器)
<div id="test-editormd">
<textarea id="articleContent" style="display: none;">@Html.Raw(Model.Context)</textarea>
</div>
3.设置初始化(此时暂不教大家上传图片,想了解请看我后面的博客介绍)
$(function () {
testEditor = editormd("test-editormd", {
width: "99%",
height: ,
syncScrolling: "single",
path: "/Lib/MarkDown/lib/",
saveHTMLToTextarea: true,
emoji: true
}); });
4.获取数据保存
function btnSave() {
alert("html数据:" + testEditor.getHTML());
alert("markdown数据:" + testEditor.getMarkdown());
//保存大家根据需要保存文本就好。
}
相关推荐:
1.在Asp.Net Core中配置使用MarkDown富文本编辑器实现图片上传和截图上传(开源代码.net core3.0)
开源地址 动动小手,点个推荐吧!
注意:我们机遇屋该项目将长期为大家提供asp.net core各种好用demo,旨在帮助.net开发者提升竞争力和开发速度,建议尽早收藏该模板集合项目。
在Asp.Net或.Net Core中配置使用MarkDown富文本编辑器有开源模板代码(代码是.net core3.0版本)的更多相关文章
- 在Asp.Net Core中配置使用MarkDown富文本编辑器实现图片上传和截图上传(开源代码.net core3.0)
我们的富文本编辑器不能没有图片上传尤其是截图上传,下面我来教大家怎么实现MarkDown富文本编辑器截图上传和图片上传. 1.配置编辑器到html页 <div id="test-edi ...
- Asp.Net Core中配置使用Kindeditor富文本编辑器实现图片上传和截图上传及文件管理和上传(开源代码.net core3.0)
KindEditor使用JavaScript编写,可以无缝的于Java..NET.PHP.ASP等程序接合. KindEditor非常适合在CMS.商城.论坛.博客.Wiki.电子邮件等互联网应用上使 ...
- vue-cli中如何集成UEditor 富文本编辑器?
1.根据后台语言下载对应的editor插件版本 地址:https://ueditor.baidu.com/website/download.html 2.将下载好的资源放在/static/uedito ...
- EXTJS中整合tinymce的富文本编辑器,添加上传图片功能
提供部分代码.Ext.create('Ext.window.Window', { id: 'wind', title: 'CRUD窗口', modal: true, height: 800, widt ...
- 在 Vue 项目中引入 tinymce 富文本编辑器
项目中原本使用的富文本编辑器是 wangEditor,这是一个很轻量.简洁编辑器 但是公司的业务升级,想要一个功能更全面的编辑器,我找了好久,目前常见的编辑器有这些: UEditor:百度前端的开源项 ...
- 百度Web富文本编辑器ueditor在ASP.NET MVC3项目中的使用说明
====================================================================== [百度Web富文本编辑器ueditor在ASP.NET M ...
- ASP.NET MVC 中使用 UEditor 富文本编辑器
在上篇<使用ASP.NET MVC+Entity Framework快速搭建博客系统>中,已经基本上可以实现博客分类和博客文章的CURD.但是,文章编辑界面实在是…… 好吧,咱得搞专业点. ...
- ASP.NET网站使用Kindeditor富文本编辑器配置步骤
1. 下载编辑器 下载 KindEditor 最新版本,下载页面: http://www.kindsoft.net/down.php 2. 部署编辑器 解压 kindeditor-x.x.x.zip ...
- TinyMCE(富文本编辑器)在Asp.Net中的使用方法
TinyMCE(富文本编辑器)在Asp.Net中的使用方法 转至:http://www.cnblogs.com/freeliver54/archive/2013/02/28/2936506.htm ...
随机推荐
- 2.java三大特性
1. 封装 方法:将属性值修饰为私有,提供get和set方法.造成所有对对象的访问都是通过方法的调用来完成(配合this的使用) 结果:用户不能直接随意改变一个对象内的属性,必须通过调用方法(验证)来 ...
- Vsftpd运行的两种模式-xinetd运行模式和 standalone模式
vsftpd运行的两种模式-xinetd运行模式和 standalone模式 vsftpd提供了standalone和inetd(inetd或xinetd)两种运行模式. standalone一次性启 ...
- sleep方法要求处理中断异常:InterruptedException
package seday08.thread;/*** @author xingsir * 当一个线程调用sleep方法处于阻塞状态的过程中,这个线程的中断方法interrupt被调用时,则sleep ...
- 「SAP技术」为正常库存管理的物料做成本中心采购会是什么结果?
SAP 为正常库存管理的物料做成本中心采购会是什么结果? 这种采购可以正常进行,收货后SAP会更新采购订单里指定的费用类科目,而库存数量和库存价值都不会增加. 1, 如下物料号,是正常做库存管理的物料 ...
- 通过 loganalyzer 展示数据库中的系统日志
目录 通过 loganalyzer 展示数据库中的日志 环境准备 准备服务器: 日志服务器: 数据库服务器: 测试日志服务器和数据库是否连接: websrv服务器端: 通过 loganalyzer 展 ...
- C/C++ 项目编译工具简介
本文基于一个需要对 C 语言家族项目进行编译.生成解决方案的开发者的视角,对编译过程中所需要的各个工具进行简要的名词解释. GCC | LLVM 提供编译器 <-- GNU Make 根据配置文 ...
- python 打飞机项目 ( 基类封装 )
项目代码 | plane # -*- coding:utf-8 -*- import pygame, time from Plane import Plane from HeroPlane impor ...
- ESP32的NVS使用指南
NVS总的来说,就是非易失性存储,类似MCU EEPROM,但实际上调用ESP32这些函数,数据是存储在FLASH中的. 它的管理方式类似数据库的表,在NVS里面可以存储很多个不同的表,每个表下面有不 ...
- 【性能测评】DSP库,MDK5的AC5,AC6,IAR和Embedded Studio的三角函数性能
测试条件: 1.IAR8.30开最高等级速度优化. 2.MDK5.27正式版使用AC5开最高等级优化3,开启时间优化,测试C标准库和微库MicroLib两种. 3.MDK5.27正式版使用AC6开最高 ...
- js实现弹出框跟随鼠标移动
又是新的一天网上冲浪,在bing的搜索页面下看到这样一个效果: 即弹出框随着鼠标的移动而移动.思路大概为: 调用onmousemove函数,将鼠标的当前位置赋予弹出框即可 //html <div ...