使用 JavaScript 初始化 bootstrap-markdown 并自定义选项

Initializing bootstrap-markdown with JavaScript and customizing the options

本文关键字:自定义 选项 bootstrap-markdown JavaScript 初始化 使用      更新时间:2023-09-26

我正在尝试使用bootstrap-markdown,除了我无法通过JavaScript调用插件之外,一切正常。例如:

$("#content").markdownEditor({
                autofocus: false,
                savable: false,
                iconlibrary: 'fa',
                resize: 'vertical',
                additionalButtons: custom_buttons,  // an array defining custom commands
                onPreview: function (e) {
                    var content = e.getContent();
                    console.log('content', content);
                }
            });

有没有人知道可能是什么情况?在网络或存储库的 github 页面上找不到任何有用的内容。是的,我已经包含了文档中根本没有提到的markdown.jsto-markdown.js,但无论如何都可以快速找到。

我现在需要的只是调用编辑器,添加几个自定义工具栏按钮(图像上传、代码块插入等(并完成它。

代码片段,链接和现场小提琴非常受欢迎:)

出于某种原因,更改脚本引用的顺序可以解决此问题。
这是现在的顺序:

  • lib/markdown.js
  • lib/bootstrap-markdown.js
  • lib/to-markdown.js

这是我的初始化:

$(function () {
    var custom_buttons = [[
        {
            name: "insertCode",
            data: [{
                name: "cmdInsertCode",
                toggle: "toggle",
                title: "Insert Code",
                icon: "fa fa-fire",
                callback: function (e) {
                    var selected = e.getSelection(),
                        content = e.getContent();
                    // e.replaceSelection(chunk);
                    // var cursor = selected.start;
                    //e.setSelection(cursor, cursor + chunk.length);
                    console.log('cmdInsertCode clicked');
                }
            }]
        }
    ]];
    $("#content").markdown({
        autofocus: false,
        savable: false,
        iconlibrary: 'glyph',
        resize: 'vertical',
        additionalButtons: custom_buttons,
        onShow: function (e) {
            console.warn('e:editor shown');
        }
    });
});

赞美:godmode: