富文本编辑器 editor.md 使用以及图片复制粘贴,本地上传方法

推荐几款好用的富文本编辑器

  1. wangEditor --基于js和css开发,简单易用容易开发。官网地址在这里插入图片描述
  2. TinyMCE --TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器,由JavaScript写成。它对IE6+和Firefox1.5+都有着非常良好的支持。官网教程内容比较丰富,插件支持也比较多,但是不支持markdown。
    3.	在这里插入图片描述![
  3. editor.nd 功能齐全,支持markdown编辑,开源免费,但是官方文档介绍非常的少。本文将着重介绍该富文本编辑器的使用。

editor.md 使用教程

1、下载官方资源库

  1. 下载链接
    在这里插入图片描述
  2. 虽然官方的介绍有限,但是资源库里面还是有实例可以认真看看的。里面有官网的示例代码
  3. 初始化加载js文件和css样式文件
<link rel="stylesheet" href="editormd/css/editormd.css" />
<div id="test-editor"> 
    <textarea style="display:none;"> 
    </textarea>
</div>
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="editormd/editormd.min.js"></script>
<script type="text/javascript">
    $(function() {
    <!-- test-editor 即是需要初始化富文本编辑器对应的div id -->
        var editor = editormd("test-editor", {
       		//path -资源库lib的路径
            path   : "editormd/lib/"
        });
    });
</script>

这样就可以生成基本的富文本编辑器了
在这里插入图片描述
4. 打开example中full.html 我们可以看到全部功能的配置

        <script type="text/javascript">
            var testEditor;
            
            $(function() {
                
                $.get('test.md', function(md){
                    testEditor = editormd("test-editormd", {
                        width: "90%",
                        height: 740,
                        path : '../lib/',
                        theme : "dark",//主题 夜间模式
                        previewTheme : "dark", //主题 夜间模式
                        editorTheme : "pastel-on-dark",//主题 夜间模式
                        markdown : md,
                        codeFold : true,
                        //syncScrolling : false,
                        saveHTMLToTextarea : true,    // 保存 HTML 到 Textarea
                        searchReplace : true,
                        //watch : false,                // 关闭实时预览
                        htmlDecode : "style,script,iframe|on*",            // 开启 HTML 标签解析,为了安全性,默认不开启    
                        //toolbar  : false,             //关闭工具栏
                        //previewCodeHighlight : false, // 关闭预览 HTML 的代码块高亮,默认开启
                        emoji : true,//表情
                        taskList : true,//代办
                        tocm            : true,         // Using [TOCM]
                        tex : true,                   // 开启科学公式TeX语言支持,默认关闭
                        flowChart : true,             // 开启流程图支持,默认关闭
                        sequenceDiagram : true,       // 开启时序/序列图支持,默认关闭,
                        //dialogLockScreen : false,   // 设置弹出层对话框不锁屏,全局通用,默认为true
                        //dialogShowMask : false,     // 设置弹出层对话框显示透明遮罩层,全局通用,默认为true
                        //dialogDraggable : false,    // 设置弹出层对话框不可拖动,全局通用,默认为true
                        //dialogMaskOpacity : 0.4,    // 设置透明遮罩层的透明度,全局通用,默认值为0.1
                        //dialogMaskBgColor : "#000", // 设置透明遮罩层的背景颜色,全局通用,默认为#fff
                        imageUpload : true,
                        imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                        imageUploadURL : "./php/upload.php",
                        onload : function() {
                            console.log('onload', this);
                            //this.fullscreen();
                            //this.unwatch();
                            //this.watch().fullscreen();

                            //this.setMarkdown("#PHP");
                            //this.width("100%");
                            //this.height(480);
                            //this.resize("100%", 640);
                        }
                    });
                });
                
                $("#goto-line-btn").bind("click", function(){
                    testEditor.gotoLine(90); //跳转到90行
                });
                
                $("#show-btn").bind('click', function(){
                    testEditor.show();//显示富文本编辑器
                });
                
                $("#hide-btn").bind('click', function(){
                    testEditor.hide();//隐藏编辑器
                });
                
                $("#get-md-btn").bind('click', function(){
                    alert(testEditor.getMarkdown());//*获取markdown
                });
                
                $("#get-html-btn").bind('click', function() {
                    alert(testEditor.getHTML());//获取生成的HTML
                });                
                
                $("#watch-btn").bind('click', function() {
                    testEditor.watch();
                });                 
                
                $("#unwatch-btn").bind('click', function() {
                    testEditor.unwatch(); //关闭预览
                });              
                
                $("#preview-btn").bind('click', function() {
                    testEditor.previewing();//打开预览
                });
                
                $("#fullscreen-btn").bind('click', function() {
                    testEditor.fullscreen();//全屏操作
                });
                
                $("#show-toolbar-btn").bind('click', function() {
                    testEditor.showToolbar();//显示工具栏
                });
                
                $("#close-toolbar-btn").bind('click', function() {
                    testEditor.hideToolbar();//关闭工具栏
                });
                
                $("#toc-menu-btn").click(function(){
                	//配置生成目录
                    testEditor.config({
                        tocDropdown   : true,
                        tocTitle      : "目录 Table of Contents",
                    });
                });
                
                $("#toc-default-btn").click(function() {
                	//关闭生成目录功能
                    testEditor.config("tocDropdown", false);
                });
            });
        </script> 

介绍几个比较好用的

  1. 生成目录,tocDropdown设置成true,在编辑器使用 [TOC] 即可生成目录
         $(function() { 
                   
                testEditor = editormd({
                    id      : "test-editormd",
                    width   : "90%",
                    height  : 640,
                    path    : "lib/",
                    flowChart : true,             // 开启流程图支持,默认关闭
                    saveHTMLToTextarea : true,    // 保存 HTML 到 Textarea
                    searchReplace : true,
                    imageUpload : true,
                    imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                    imageUploadURL : "./php/upload.php",
                    onload : function() {
                        console.log('onload', this);
                        //加载完成后 配置生成目录
                        testEditor.config("tocDropdown", true);
                           
                        }
                });   
            });

效果图
如果是设置tocTitle,则将会生成目录菜单,效果图如下

onload : function() {
                       console.log('onload', this);
                       //加载完成后 配置生成目录
                        testEditor.config({
                           tocDropdown   : true,
                           tocTitle      : "目录 Table of Contents",
                       });
                          
                       }

在这里插入图片描述

  1. 通过markdown前端显示文本内容
  • 添加css样式和js文件(这里的js与前面在后台编辑器引用lib方式不同)
        <script src="js/jquery.min.js"></script>
        <script src="../lib/marked.min.js"></script>
        <script src="../lib/prettify.min.js"></script>
        
        <script src="../lib/raphael.min.js"></script>
        <script src="../lib/underscore.min.js"></script>
        <script src="../lib/sequence-diagram.min.js"></script>
        <script src="../lib/flowchart.min.js"></script>
        <script src="../lib/jquery.flowchart.min.js"></script>

        <script src="../editormd.js"></script>

		<!-- blog content -->
		<div id="editmd" class="post-content" >
			<!-- textarea 加载testEditor.getMarkdown()的内容 -->
			<textarea style="display:none;" name="test-editormd-markdown-doc"></textarea>
		</div>
		<script type="text/javascript">
   		//editor 初始化
   		$(function(){
   			var Editor;  
   			 //markdownToHTML 将markdown文本转换为HTML
	   		 Editor = editormd.markdownToHTML("editmd", {
	   	        htmlDecode      : "style,script,iframe",  // you can filter tags decode
	   	     	markdown        : markdown ,//+ "\r\n" + $("#append-test").text(),
              //htmlDecode      : true,       // 开启 HTML 标签解析,为了安全性,默认不开启
                htmlDecode      : "style,script,iframe",  // you can filter tags decode
              //toc             : false,
                tocm            : true,    // Using [TOCM]
               //tocContainer    : "#custom-toc-container", // 自定义 ToC 容器层
               //gfm             : false,
               //tocDropdown     : true,
               // markdownSourceCode : true, // 是否保留 Markdown 源码,即是否删除保存源码的 Textarea 标签
	   	        emoji           : true,
	   	        taskList        : true,
	   	        tocm            : true, //对目录解析
	   	        tex             : true,  // 默认不解析
	   	        flowChart       : true,  // 默认不解析
	   	        sequenceDiagram : true,  // 默认不解析  
	   	    });
	   	 });
		</script>
  • 显示效果:
    在这里插入图片描述
  1. 图片上传功能,imageUploadURL 上传图片接口,imageFormats 格式限定,imageUpload : true开启图片上传功能,主要返回的数据需要遵循规定的格式。
	            $(function() {                
                var testEditor = editormd("test-editormd", {
                    width: "90%",
                    height: 640,
                    markdown : "",
                    path : '../lib/',
                    //dialogLockScreen : false,   // 设置弹出层对话框不锁屏,全局通用,默认为 true
                    //dialogShowMask : false,     // 设置弹出层对话框显示透明遮罩层,全局通用,默认为 true
                    //dialogDraggable : false,    // 设置弹出层对话框不可拖动,全局通用,默认为 true
                    //dialogMaskOpacity : 0.4,    // 设置透明遮罩层的透明度,全局通用,默认值为 0.1
                    //dialogMaskBgColor : "#000", // 设置透明遮罩层的背景颜色,全局通用,默认为 #fff
                    imageUpload : true,
                    imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                    imageUploadURL : "./php/upload.php?test=dfdf",
                    
                    /*
                     上传的后台只需要返回一个 JSON 数据,结构如下:
                     {
                        success : 0 | 1,           // 0 表示上传失败,1 表示上传成功
                        message : "提示的信息,上传成功或上传失败及错误信息等。",
                        url     : "图片地址"        // 上传成功时才返回
                     }
                     */
                });
            });
  1. 复制粘贴上传图片功能,本功能编辑器没有自带,但是我们可以通过插件方式进行优化。

原文地址: [作者地址](https://rumenz.com/rumenbiji/editor-md-drag-upload-file.html)
因为接口原因我做了一些修改,有需要的可以参考原作者的代码

  • 数据返回格式
    在这里插入图片描述

新建文件:uploadImg.js

function initPasteDragImg(Editor){
    var doc = document.getElementById(Editor.id) 
    doc.addEventListener('paste', function (event) {
        var items = (event.clipboardData || window.clipboardData).items;
        var file = null;
        if (items && items.length) {
            // 搜索剪切板items
            for (var i = 0; i < items.length; i++) {
                if (items[i].type.indexOf('image') !== -1) {
                    file = items[i].getAsFile();
                    break;
                }
            }
        } else {
            console.log("当前浏览器不支持");
            return;
        }
        if (!file) {
            console.log("粘贴内容非图片");
            return;
        }
        uploadImg(file,Editor);
    });
    var dashboard = document.getElementById(Editor.id)
    dashboard.addEventListener("dragover", function (e) {
        e.preventDefault()
        e.stopPropagation()
    })
    dashboard.addEventListener("dragenter", function (e) {
        e.preventDefault()
        e.stopPropagation()
    })
    dashboard.addEventListener("drop", function (e) {
        e.preventDefault()
        e.stopPropagation()
     var files = this.files || e.dataTransfer.files;
     uploadImg(files[0],Editor);
     })
}
function uploadImg(file,Editor){
    var formData = new FormData();
    var fileName=new Date().getTime()+"."+file.name.split(".").pop();
    formData.append('file', file,file.name); 
    $.ajax({
    	"type": 'POST',  
        "url": Editor.settings.imageUploadURL,//获取我们配置的url
        "data": formData,
        "dateType": "json",
        "processData": false,
        "contentType": false,
        "mimeType": "multipart/form-data",
        success: function(ret){
        	 var json = $.parseJSON(ret);
        
        	if(json.success){
        		var url = json.body;
        		var type = json.type; 
        		if(/(png|jpg|jpeg|gif|bmp|ico|image)/.test(type)){
                    Editor.insertValue("![图片alt]("+url+" ''图片title'')");
                }else{
                    Editor.insertValue("[下载附件]("+url+")");
                }    
        	}else{
        		alert("上传失败");
        	}
              
        },
        error: function (err){
            console.log('请求失败')
        } 
    });
}

效果图:
在这里插入图片描述

本地图片上传

请参考博客:http://www.stopping.top/u/Blog/9

总结

对于个人博客而言,editormd是一款非常合适的选择,功能齐全,加之markdown编辑方式,以及图片复制粘贴上传容易实现。

#end

发布了18 篇原创文章 · 获赞 11 · 访问量 2万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 创作都市 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览