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

roydon_

已于 2023-06-21 20:59:05 修改

阅读量1.7k

点赞数 4

分类专栏： Java 文章标签： java spring boot

于 2022-05-23 16:50:40 首次发布

本文链接：https://blog.csdn.net/m0_51390535/article/details/124930309

版权

Java 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

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 到 Textarea
            emoji: 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>