threeperson mackdown editor

最新推荐文章于 2016-02-22 08:52:53 发布

最新推荐文章于 2016-02-22 08:52:53 发布 · 206 阅读

文章标签：

#threeperson #mackdown editor #ui editor #bootstrap editor

jquery 同时被 3 个专栏收录

16 篇文章

订阅专栏

bootstrap

2 篇文章

订阅专栏

css

2 篇文章

订阅专栏

本文介绍了一种使用Bootstrap Markdown Editor插件实现博客文章编辑的方法。该插件支持实时预览和Markdown语法高亮，适用于基于Beego框架的博客后端及Bootstrap前端。文章还提供了表单提交验证和自定义工具栏的实现细节。

近日小生闲来无事，工作不是太多，利用业余时间学习了一下golang，并学以致用，搭建了个人的博客。

博客后端基于beego framework，前端基于bootstrap。

由于博客功能仍在逐步完善，gopher看了我的博客，发现博文样式不错，问我如何实现的，我在此简单概述一下实现方式。

threeperson博文创建主要依赖Bootstrap Markdown Editor js插件实现。下面贴出主要代码。

1）引入依赖css和js

<link href="../static/css/bootstrap.css" rel="stylesheet">
<link href="http://cdn.bootcss.com/prettify/r224/prettify.css" rel="stylesheet">

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="../static/js/bootstrap.min.js"></script>
<script src="http://cdn.bootcss.com/prettify/r224/prettify.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ace/1.1.3/ace.js"></script>
 <script src="http://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
<script src="../static/js/bootstrap-markdown-editor.js"></script>

2）页面元素

<div id="editor"></div>

3）初始化编辑器

$("#editor").markdownEditor(
        {
            preview: true,
            onPreview: function (content, callback) {
                callback(marked(content));
            }
        }
    );

4）初始化editor内容

$('#editor').markdownEditor("setContent",content);

5) 如果editor用在form中，会提交到server端，可以参考以下代码

var contentError = "<span class=\"help-block form-error\">内容不能为空</span>";

    $("#editor").markdownEditor(
        {
            preview: true,
            onPreview: function (content, callback) {
                callback(marked(content));
            }
        }
    );

    //articleContent
    $('#editor').markdownEditor("setContent",content);

    $("textarea").attr("name", "content").keyup(function () {
        var content = $('#editor').markdownEditor('content');
        if (null != content && content.length > 0) {
            removeContentError();
        } else {
            showContentError();
        }
    });

    $("form#articleEditorForm").find("input[name='commit']").click(function () {
        var content = $('#editor').markdownEditor('content');
        if (!$.trim(content)) {
            showContentError();
            return false;
        }
        $("textarea").val(marked(content));
    })


    var showContentError = function () {
        $(".md-editor").css("border-color", "red");
        var $contentError = $(".md-editor").next($(".form-error"));
        if (!$contentError || !$contentError.html()) {
            $(".md-editor").after($(contentError));
        }
    }

    var removeContentError = function () {
        $(".md-editor").css("border-color", "#d8d8d8").next(".form-error").remove();
    }

这是beegostudy中完整的初始化和表单提交校验代码

6）自定义bootstrap-markdown-editor 工具栏按钮

bootstrap-markdown-editor 源码写的有些乱，扩展确实是件头疼的事，附件是我做过扩展的bootstrap-markdown-editor

7) 样式