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