博客系统-写文章之富文本编辑器editor

editor
直接再官网下载下来

之后从下载下来的文件选取有用的文件放到项目专门包下，注意下图
可以选择下载好的文件中的上图部分，放入新建md中

然后就是写文章页面

<!DOCTYPE html>
<html class="x-admin-sm" lang="zh" xmlns:th="http://www.thymeleaf.org"><head><meta charset="UTF-8"><title>富文本编辑器</title><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><!--Editor.md--><link rel="stylesheet" th:href="@{/md/css/editormd.css}"/><link rel="stylesheet" th:href="@{/layui/css/layui.css}"/><link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
</head><body style="background: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%)"><div class="layui-fluid"><div class="layui-row layui-col-space15"><div class="layui-col-md12"><!--博客表单--><form name="mdEditorForm" id="mdEditorForm"><div align="center"><input class="layui-input" type="text" name="title" placeholder="请在此输入文章标题✍️"></div><div id="article-content"><!--博客内容--><textarea name="content" id="content" style=""> </textarea></div></form></div></div>
</div>
</body><!--Editor.md-->
<script th:src="@{/js/jquery.js}"></script>
<script th:src="@{/md/editormd.js}"></script><script type="text/javascript">var testEditor;//window.onload = function(){ }$(function() {testEditor = editormd("article-content", {width : "100%",height : "900px",syncScrolling : "single",path : "../md/lib/", //使用自己的路径saveHTMLToTextarea : true,    // 保存 HTML 到 Textareaemoji: true,theme: "dark",//工具栏主题previewTheme: "dark",//预览主题editorTheme: "pastel-on-dark",//编辑主题tex : true,                   // 开启科学公式TeX语言支持，默认关闭flowChart : true,             // 开启流程图支持，默认关闭sequenceDiagram : true,       // 开启时序/序列图支持，默认关闭,//图片上传imageUpload : true,imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],imageUploadURL : "/article/file/upload", //图片上传路径onload : function() {console.log('onload', this);},/*指定需要显示的功能按钮*/toolbarIcons : function() {return ["undo","redo","|","bold","del","italic","quote","ucwords","uppercase","lowercase","|","h1","h2","h3","h4","h5","h6","|","list-ul","list-ol","hr","|","link","reference-link","image","code","preformatted-text","code-block","table","datetime","emoji","html-entities","pagebreak","|","goto-line","watch","preview","fullscreen","clear","search","|","help","info","releaseIcon", "index"]},/*自定义功能按钮，下面我自定义了2个，一个是发布，一个是返回首页*/toolbarIconTexts : {releaseIcon : "<span bgcolor=\"gray\">发布</span>",index : "<span bgcolor=\"red\">重新编辑</span>",},/*给自定义按钮指定回调函数*/toolbarHandlers:{releaseIcon : function(cm, icon, cursor, selection) {//表单提交mdEditorForm.method = "post";mdEditorForm.action = "/article/addarticle";//提交至服务器的路径mdEditorForm.submit();},index : function(){window.location.href = '/article/toeditor';//刷新当前页面},}});});
</script></html>

然后，再在controller中写新增文章的代码即可。html中已经指定访问路径。
最终实现效果

博客系统-写文章之富文本编辑器editor相关推荐

小程序 html编辑器,小程序富文本编辑器editor初体验
终于,微信在5月9号的v2.7.0版本中新增了 editor富文本编辑器组件,今天有时间了准备体验一下在5月6日的时候写了一篇小程序富文本解析的「伪需求」,从wxParse到towxml的坑,当时还 ...
小程序（二十五）微信小程序富文本编辑器editor上传图片
官方给出的示例代码中图片上传功能是将图片上传至小程序的缓存中,代码如下所示: insertImage(e) {console.log(e);const that = thiswx.chooseImag ...
python个人网站开发_python 全栈开发，Day81(博客系统个人主页,文章详情页)
一.个人主页随笔分类需求:查询当前站点每一个分类的名称以及对应的文章数完成这个需求,就可以展示左侧的分类它需要利用分组查询,那么必须要会基于双下划线的查询. 基于双下划线的查询,简单来讲,就是 ...
python 全栈开发，Day81(博客系统个人主页,文章详情页)
一.个人主页随笔分类需求:查询当前站点每一个分类的名称以及对应的文章数完成这个需求,就可以展示左侧的分类它需要利用分组查询,那么必须要会基于双下划线的查询. 基于双下划线的查询,简单来讲,就是 ...
layui获取select 文本_小程序富文本编辑器editor初体验
终于,微信在5月9号的v2.7.0版本中新增了 editor富文本编辑器组件,今天有时间了准备体验一下在5月6日的时候写了一篇小程序富文本解析的「伪需求」,从wxParse到towxml的坑,当时还 ...
小程序开发笔记（二）：微信小程序富文本编辑器editor的使用
小程序在去年5月的 v2.7.0 版本新增了组件editor富文本编辑器,但对于像我这种开发新手,要熟练使用还是有一定难度.所以记录一下我的学习过程,希望对大家有帮助. 小程序有详细的微信开发 ...
微信小程序富文本编辑器editor初体验-图片上传
https://developers.weixin.qq.com/miniprogram/dev/component/editor.html 以前没有小程序富文本编辑器,只能输入文字,图片上传后,在服 ...
html5博客在线写文章,HTML5响应式清新博客文章类织梦模板（移动端自适应）
模板介绍 ★模板介绍★ HTML5响应式清新博客文章类织梦模板(移动端自适应),测试完整无错,兼容主流浏览器.模板包含安装说明,并包含测试数据.本模板基于DEDECms 5.7 UTF-8设计,需要G ...
Django博客系统(推荐文章数据展示)
1. 添加文章浏览量数据 1.每次请求文章详情时给浏览量+1 try:article=Article.objects.get(id=id) except Article.DoesNotExist:re ...

博客系统-写文章之富文本编辑器editor

博客系统-写文章之富文本编辑器editor相关推荐

最新文章

热门文章