近日小生闲来无事,工作不是太多,利用业余时间学习了一下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) 样式