70.富文本编辑器tinyMCE提交数据到go服务端

在后台管理中,当有图文混排等各种文章(比如新闻、小说类)需要使用富文本编辑器。这次我使用了一下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))

看你喜欢那种。


准备上传图片

选择图片

自动插入图片服务器路径

插入编辑器

提交成功

你可能感兴趣的:(70.富文本编辑器tinyMCE提交数据到go服务端)