在后台管理中,当有图文混排等各种文章(比如新闻、小说类)需要使用富文本编辑器。这次我使用了一下tinyMCE编辑器。这款编辑器是免费开源的。
Download everything you need for production usage (including a jQuery integration plugin) for free. TinyMCE is open source and licensed under LGPL 2.1.
LGPL2.1可以让我们放心的使用了。
首先在https://www.tiny.cloud/download/self-hosted/ 下载tinyMCE
安装很简单,只要在页面里引用就可以了。
当然,还需要init,这里给出一个设置的代码例子
这个上传的前端代码,实现了一个文件的上传,同时还上传了一个字符串参数myid。(项目中你可以用这个参数做一些上传用户的判断之类的。)
代码中需要注意的部分
tinymce.init({
selector: '#NContent',
auto_focus: "NContent",
这里的NContent是对应界面模板中的 textarea 组件id
xhr.open("POST", "../upload2/?myid="+myId);
formData = new FormData();
formData.append("uploadfile", blobInfo.blob());
这里面的 upload2 是接收数据的路径,uploadfile是传递文件的组件名称name,都是需要在服务端对应的。
if (!json || typeof json.location != 'string') {
failure('Invalid JSON: ' + xhr.responseText);
return;
}
这段代码中 json.location 中的 location 是服务端接收到文件后,返回给客户端的json串中的一个键。
html模板完整代码
{{define "news"}}
Joel News
News
标题:{{.NTitle}}
作者:{{.NAuthor}}
发布时间:{{.NPublish}}
内容:{{.NContent }}
附件:{{.NAttachment}}
关键字:{{.NKeyword}}
标签:{{.NTab}}
分类:{{.NClass}}
{{end}}
这个模板命名为 news
下面来看golang代码。
此代码借用前面章节使用过的代码示例,稍作修改。
代码大体分两个部分,一个新闻的模板绑定,一个文件的服务端接收。
新闻代码
type News struct {
NTitle string //标题
NAuthor string //作者
NPublish string //发布时间
NContent template.HTML //内容
NAttachment string //附件
NKeyword string //关键字
NTab string //标签
NClass string //分类
}
func processNewsHandler(writer http.ResponseWriter, request *http.Request) {
var RNTitle = request.FormValue("NTitle")
var RNAuthor = request.FormValue("NAuthor")
var RNPublish = request.FormValue("NPublish")
var RNContent = request.FormValue("NContent")
var RNAttachment = request.FormValue("NAttachment")
var RNKeyword = request.FormValue("NKeyword")
var RNTab = request.FormValue("NTab")
var RNClass = request.FormValue("NClass")
myNews := News{}
myNews.NTitle = RNTitle
myNews.NAuthor = RNAuthor
myNews.NPublish = RNPublish
myNews.NContent = template.HTML(RNContent)
myNews.NAttachment = RNAttachment
myNews.NKeyword = RNKeyword
myNews.NTab = RNTab
myNews.NClass = RNClass
t, _ := template.ParseFiles("./JoelTempWeb/tmplNews2.html")
t.ExecuteTemplate(writer, "news", myNews)
}
文件接收代码
//单页上传,无模板文件,只有模板代码
func index(writer http.ResponseWriter, request *http.Request) {
writer.Write([]byte(tpl))
}
const tpl = `
上传文件
`
func upload(writer http.ResponseWriter, request *http.Request) {
request.ParseMultipartForm(32<<20)
//接收客户端传来的文件 uploadfile 与客户端保持一致
file, handler, err := request.FormFile("uploadfile")
myid := request.FormValue("myid")
fmt.Println(myid)
if err != nil{
fmt.Println(err)
return
}
defer file.Close()
//上传的文件保存在ppp路径下
ext := path.Ext(handler.Filename) //获取文件后缀
fileNewName := string(time.Now().Format("20060102150405"))+strconv.Itoa(time.Now().Nanosecond())+ext
f, err := os.OpenFile("./ppp/"+fileNewName, os.O_WRONLY|os.O_CREATE, 0666)
if err != nil{
fmt.Println(err)
return
}
defer f.Close()
io.Copy(f, file)
back := "{\"error\":false,\"location\":\"../cdn/image/"+fileNewName+"\"}"
fmt.Fprintln(writer, string(back))
//location33 := "../cdn/image/"+fileNewName
//back := make(map[string]interface{})
//back["error"] = false
//back["location"] = location33
//result, _:= json.Marshal(back)
//fmt.Fprintln(writer, string(result))
}
接收代码里,包含了一段内嵌的页面提交代码。用来测试上传功能。就是这部分
//单页上传,无模板文件,只有模板代码
func index(writer http.ResponseWriter, request *http.Request) {
writer.Write([]byte(tpl))
}
const tpl = `
上传文件
`
如果不必要,可是删除。
main里的代码部分
http.HandleFunc("/news/", processNewsHandler)
http.HandleFunc("/upload2/", upload)
http.HandleFunc("/index/", index)
http.Handle("/cdn/image/", http.StripPrefix("/cdn/image/", http.FileServer(http.Dir("ppp"))))
http.Handle("/RichText/", http.StripPrefix("/RichText/", http.FileServer(http.Dir("JoelTempWeb/JoelRichText")))) //富文本编辑器
server := http.Server{
Addr: ":8090",
}
server.ListenAndServe()
在接收文件的代码中,返回给客户端值给出了2种写法
back := "{\"error\":false,\"location\":\"../cdn/image/"+fileNewName+"\"}"
fmt.Fprintln(writer, string(back))
//location33 := "../cdn/image/"+fileNewName
//back := make(map[string]interface{})
//back["error"] = false
//back["location"] = location33
//result, _:= json.Marshal(back)
//fmt.Fprintln(writer, string(result))
看你喜欢那种。