目的和用法

复制word图文到mindoc的froala编辑器，批量图片自动转存到mindoc服务器。
复制web图文到mindoc的froala编辑器，批量图片自动转存到mindoc服务器。
单纯的图片批量上传froala编辑器不支持（无论是按钮上传还是多图片复制黏贴上传都不支持），所以还是切换到markdown编辑器进行图片批量上传（按钮上传）。

互联网的记忆只有10年，超过10年，随着技术的进步和人员的离去，很多知识会消失，例如bbs已经消失，那些年bbs上的资料也随着服务器没有维护而消失；还有很多个人博客也会随着技术进步换成了另外的方式，个人服务器到期而消失；例如qq zone即qq空间，由于其封闭性，采用flash开发，技术老旧，无法检索到，知识封闭，也消失了。所以，对于好的知识，应该鼓励尽量多人去复制保存下来，多平台展示。

使用方法：首先在项目设置里选择frolala编辑器，保存。然后进人项目编辑就可以利用froala编辑器的word和web图文转存功能了。
存在的问题：
5.1 该编辑器没有调得完美，所以从功能角度，仅用于对付批量图文转存，具体编辑我还是喜欢markdown的编辑器。
有时候word图文无法转存，是因为word可能不是docx格式，doc格式另存为docx好像也不行，好像必须是一开始就是docx格式。
有时候web图文无法转存，例如bing里的新闻页面，图文转存后会出现蒙皮，百度的一些新闻页面里的png/jpg文件名后跟着一串字符，无法转存。
5.2 github.com/mindoc上的代码不带froala的css和js文件，需要用户自行下载放到mindoc的static/froala里。

第一天

跟踪流程——试想，有没有一种工具能够将下面这个流程直接给出来呢？要花挺多时间来人工读代码。

项目设置

首先是项目设置（book/setting.tpl）里，选择某个编辑器

<form method="post" id="bookEditForm" action="{{urlfor "BookController.SaveBook"}}">

                <div class="form-group">
                  <label>{{i18n $.Lang "blog.text_editor"}}</label>
                  <div class="radio">
                    <label class="radio-inline">
                      <input type="radio" {{if eq .Model.Editor "markdown"}} checked{{end}} name="editor" value="markdown"> Markdown {{i18n $.Lang "blog.text_editor"}}
                    </label>
                    <label class="radio-inline">
                      <input type="radio" {{if eq .Model.Editor "cherry_markdown"}} checked{{end}} name="editor" value="cherry_markdown"> Markdown {{i18n $.Lang "blog.text_editor"}}(cherry)
                    </label>
                    <label class="radio-inline">
                      <input type="radio" {{if eq .Model.Editor "new_html"}} checked{{end}} name="editor" value="new_html"> Html {{i18n $.Lang "blog.text_editor"}}(Quill)
                    </label>
                    <label class="radio-inline">
                      <input type="radio" {{if eq .Model.Editor "html"}} checked{{end}} name="editor" value="html"> Html {{i18n $.Lang "blog.text_editor"}}(wangEditor)
                    </label>
                    <!-- 3xxx 20240603 -->
                    <label class="radio-inline">
                      <input type="radio" {{if eq .Model.Editor "froala"}} checked{{end}} name="editor" value="froala"> Froala {{i18n $.Lang "blog.text_editor"}}
                    </label>
                  </div>
                </div>

这里选择了之后，确定保存会传给BookController.SaveBook

// 保存项目信息
func (c *BookController) SaveBook() {

    editor := strings.TrimSpace(c.GetString("editor"))

    if err := book.Update(); err != nil {
        c.JsonResult(6006, i18n.Tr(c.Lang, "message.failed"))
    }

保存到数据库中数据表book里。

查阅book

当我们查阅book的时候
对应的服务端

// 阅读文档
func (c *DocumentController) Read() {

c.TplName = fmt.Sprintf("document/%s_read.tpl", bookResult.Theme)

data.DocIdentify = doc.Identify

服务端取到的内容通过kancloud.js加载到defult_read.tpl

/***
 * 加载文档到阅读区
 * @param $url
 * @param $id
 * @param $callback
 */
function loadDocument($url, $id, $callback) {
    $.ajax({
        url: $url,
        type: "GET",
        beforeSend: function () {

编辑

来到view里的defult_read.tpl
右上角的编辑按钮对应的地址http://127.0.0.1:8181/api/oo/edit/如下

                {{if gt .Member.MemberId 0}}
                {{if eq .Model.RoleId 0 1 2}}
                <div class="dropdown pull-left" style="margin-right: 10px;">
                    <a href="{{urlfor "DocumentController.Edit" ":key" .Model.Identify ":id" ""}}" class="btn btn-danger"><i class="fa fa-edit" aria-hidden="true"></i> {{i18n .Lang "blog.edit"}}</a>
                    {{if eq .Model.RoleId 0 1}}
                    <a href="{{urlfor "BookController.Users" ":key" .Model.Identify}}" class="btn btn-success"><i class="fa fa-user" aria-hidden="true"></i> {{i18n .Lang "blog.member"}}</a>
                    <a href="{{urlfor "BookController.Setting" ":key" .Model.Identify}}" class="btn btn-primary"><i class="fa fa-gear" aria-hidden="true"></i> {{i18n .Lang "common.setting"}}</a>
                    {{end}}
                </div>
                {{end}}
                {{end}}

根据urlfor "DocumentController.Edit" ":key" .Model.Identify ":id" ""
其中的key是oo，即项目名称，id是空。
来到DocumentController.Edit

// 编辑文档
func (c *DocumentController) Edit() {

    identify := c.Ctx.Input.Param(":key")

    c.TplName = fmt.Sprintf("document/%s_edit_template.tpl", bookResult.Editor)

identify就是项目名称。根据项目名称打开editor编辑器。
来到编辑器markdown_edit_template.tpl

 window.editURL = "{{urlfor "DocumentController.Content" ":key" .Model.Identify ":id" ""}}";

点击左侧目录，就会通过markdown.js将内容取出来，服务端对应的DocumentController.Content

    /***
     * 加载指定的文档到编辑器中
     * @param $node
     */
    window.loadDocument = function ($node) {
        var index = layer.load(1, {
            shade: [0.1, '#fff'] // 0.1 透明度的白色背景
        });

        $.get(window.editURL + $node.node.id).done(function (res) {
            layer.close(index);

服务端DocumentController.Content

// 获取文档内容
func (c *DocumentController) Content() {
    c.Prepare()

    identify := c.Ctx.Input.Param(":key")
    docId, err := c.GetInt("doc_id")

    if err != nil {
        docId, _ = strconv.Atoi(c.Ctx.Input.Param(":id"))
    }

默认页

问题，当我们正在查看任何一页，点击编辑，立刻进入该页的编辑器，如何传递默认页的id到编辑器里的？
还是在kancloud.js中，保存到了缓存中了。然后在markdown.js加载指定id的内容到编辑器。

var events = function () {
    var articleOpen = function (event, $param) {
        //当打开文档时，将文档ID加入到本地缓存。
        window.sessionStorage && window.sessionStorage.setItem("MinDoc::LastLoadDocument:" + window.book.identify, $param.$id);
        var prevState = window.history.state || {};
        if ('pushState' in history) {
            if ($param.$id) {
                prevState.$id === $param.$id || window.history.pushState($param, $param.$id, $param.$url);
            } else {
                window.history.pushState($param, $param.$id, $param.$url);
                window.history.replaceState($param, $param.$id, $param.$url);
            }
        } else {
            window.location.hash = $param.$url;
        }

        initHighlighting();
        $(window).resize();

        $(".manual-right").scrollTop(0);
        //使用layer相册功能查看图片
        layer.photos({ photos: "#page-content" });
    };

第二天

添加setting.tpl里的froala，见上面第一段代码

添加const.go

package controllers

const (
    Markdown             = "markdown"
    EditorMarkdown       = "markdown"
    EditorCherryMarkdown = "cherry_markdown"
    EditorHtml           = "html"
    EditorNewHtml        = "new_html"
    EditorFroala         = "froala"
)

将html_edit_template.tpl拷贝一份改名为froala_edit_template.tpl
将里面的引用css和js替换为froala的
再拷贝js里的html-editor.js，改名为froala-editor.js

/***
     * 加载指定的文档到编辑器中
     * @param $node
     */
    function loadDocument($node) {
        var index = layer.load(1, {
            shade: [0.1,'#fff'] //0.1透明度的白色背景
        });

        $.get(window.editURL + $node.node.id ).done(function (res) {
            layer.close(index);

            if(res.errcode === 0){
                window.isLoad = true;

                // window.editor.txt.clear();
                // window.editor.txt.html(res.data.content);
                window.editor.html.set('');
                window.editor.events.focus();
                window.editor.html.set(res.data.content);

DocumentController.go里的editor将Model参数传给了froala_edit_template.tpl的window.editURL，即对应的.Model.Identify

type BookResult struct {
    Identify       string    `json:"identify"`
}

// 编辑文档
func (c *DocumentController) Edit() {
    c.Data["Model"] = bookResult

froala_edit_template.tpl里的Model.Identify来自上面的Edit方法


window.editURL = "{{urlfor "DocumentController.Content" ":key" .Model.Identify ":id" ""}}";

bookctroller.go

    // if editor != EditorMarkdown && editor != EditorCherryMarkdown && editor != EditorHtml && editor != EditorNewHtml {
    if editor != EditorMarkdown && editor != EditorCherryMarkdown && editor != EditorHtml && editor != EditorNewHtml && editor != EditorFroala {
        editor = EditorMarkdown
    }

documentcontroller.go

    if name == "file" {
        // froala单图片上传
        c.Ctx.Output.JSON(result, true, false)
    } else {
        c.Ctx.Output.JSON(result2, true, false)
    }
    c.StopRun()

https://froala.com/wysiwyg-editor/examples/
https://froala.com/wysiwyg-editor/examples/getHTML/
https://froala.com/wysiwyg-editor/examples/custom-buttons/

作者：秦晓川创建时间：2024-06-03 20:27
最后编辑：秦晓川更新时间：2024-06-16 14:21

上一篇： 7 批量上传图片
下一篇： 9 为开源做贡献

8 添加froala富文本编辑器

目的和用法

第一天

项目设置

查阅book

编辑

默认页

第二天