[PLUGIN]Insert Image EX - No more uploading images into database 【插件】插入图片EX - 不需要将图片上传到数据库

[XiaofengdiZhu]

Have a look first:
先看图：

I don't like uploading images into this software's database which makes the database bigger and bigger but I can't clear deleted files conveniently. So I write this plugin.
我讨厌这个软件默认把图片上传到数据库，因为这会让数据库文件越来越大，而这软件没有提供方便清理已删除文件的方式，所以我写了这个插件治治。
I'm not a professional coder and this's is my first time to code Electron, If you find any bug, please report me. By the way, it costs me about 20 hours to write this simple plugin…
我不是专业的程序员，这也是我第一次接触Electron编程，如果你发现任何bug请告诉我。顺便这小玩意花了我大概20小时……

How to use 如何使用

Create a new JS frontend note with attr #run=frontendStartup and these code:
创建一个JS frontend的笔记，attr写上#run=frontendStartup，内容写：

//Test whether path scheme is registed.
$.ajax({
    url: "path://test",
    success: function() {
        function insertImages(src, textEditor) {
            textEditor.model.change(writer => {
                for (let i = src.length-1; i >=0; i--) {
                    const imageElement = writer.createElement('image', { 'src': src[i] });
                    textEditor.model.insertContent(imageElement, textEditor.model.document.selection.getFirstPosition());
                };
            });
        }
        //Add a button into toolbar.
        $(".ck-body-wrapper").on("mouseover", ".ck.ck-button.ck-off.ck-block-toolbar-button", function() {
            if (api.getActiveTabNote().type == "text") {
                $(".ck-body-wrapper").off("mouseover", ".ck.ck-button.ck-off.ck-block-toolbar-button");
                $(".ck-file-dialog-button:first").before(`<span class="ck-file-dialog-button insertImageEx"><button class="ck ck-button ck-off" type="button" tabindex="-1"><span class="bx bxs-image" style="font-size:21px"></span><span class="ck ck-tooltip ck-tooltip_s"><span class="ck ck-tooltip__text">Insert Image EX</span></span><span class="ck ck-button__label">Insert Image EX</span></button></span>`);
                $(".insertImageEx").on("mousedown", () => {
                    //Insert image by mousedown on the button(I don't know why click event doesn't work).
                    api.getActiveTabTextEditor(function(textEditor) {
                        let data = "";
                        try {
                            data = textEditor.model.document.roots._items[1]._children._nodes[textEditor.model.document.selection.getFirstPosition().path[0]]._children._nodes[0]._data;
                        } catch {}
                        //http:// or https://
                        if (data.search(/(https?|path):\/\//i) == 0) {
                            insertImages([data], textEditor);
                        }
                        //file://
                        else if (data.startsWith("file://")) {
                            insertImages([data.replace("file://", "path://")], textEditor);
                        }
                        //C:\, D:\,E:\……Z:\
                        else if (data.search(/[C-Z]:\\/i) == 0) {
                            insertImages(["path://" + data], textEditor);
                        }
                        //Select images by window.
                        else {
                            $('<input type="file" multiple="true" accept="image/jpeg,image/png,image/gif,image/bmp,image/webp,image/tiff"/>')
                                .click()
                                .on('change', event => {
                                    let src = [];
                                    for (let i = 0; i < event.target.files.length; i++) {
                                        const file = event.target.files[i];
                                        src[i] = "path://" + decodeURI(file.path);
                                    };
                                    insertImages(src, textEditor);
                                });
                        }
                    })
                });
                //Double click the inserted image with path scheme will open it by your default image viewer.
                $(".note-detail-editable-text-editor").on("dblclick", "img[src^=path]", function(e) {
                    e.stopPropagation();
                    e.preventDefault();
                    const imgSrc = e.target.src.replace("path://", "file://");
                    window.open(imgSrc, '_blank');
                });
            }
        });
    },
    error: function() {
        //Toast this plugin is loading.
        $("#toast-container").append(`<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" style="opacity: 1;"><div class="toast-header"><strong class="mr-auto"><span class="bx bx-info-circle"></span> Warn</strong></div><div class="toast-body">Insert Image EX is loading, please wait frontend reloaded.</div></div>`);
    }
});

Create a new JS backend note with attr #run=backendStartup and these code:
创建一个JS backend的笔记，attr写上#run=backendStartup，内容写：

const {protocol} = require('electron')
const {BrowserWindow} = require('electron')
const path = require('path')

//File scheme is not permited in Electron with default options, register another name to use.
if (!protocol.isProtocolRegistered('path')) {
    protocol.registerFileProtocol('path', (request, callback) => {
        const url = request.url.substr(7)
        if(url=="test"){
            callback({path:__filename})
        }else{
        callback({ path: path.normalize(decodeURI(url)) })
        }
    });
    //After registration, reload frontend.
    if (protocol.isProtocolRegistered('path')) {
        BrowserWindow.getAllWindows().forEach(function(w){
            w.reload();
        });
    }
}

Close Trilium and launch it, wait 10 seconds, now you can use it like the gif on the top.
关闭Trilium再打开，等10秒即可像镇楼图一样使用了。

Other Feature其他特性

Double clicking on the image can open this image by your default image viewer or web browser.
双击图片会使用默认图片查看器或网页浏览器打开它

Attention注意

1. I don't write code to test weather your link or path is correct, please check by yourself or write this function by yourself. 我没有写检测链接或路径是否正确的代码，请自己检查好，或自己写此功能（逃
2. Make lines of links or pathes into image widgets is not writen. 多行链接或路径转图片小部件还没写
3. This plugin use something looks unsafe (like require('electron') which is not in API), I don't know the author of Trilium will ban those functions and this plugin won't work. 我好像用了些不太安全的方法（例如不在API里的require('electron')），不知道Trilium作者以后会不会禁用那些函数，然后我的插件就炸了。

[xuxanwan]

in trilium 0.48.5 textEditor.model.insertContent(imageElement, textEditor.model.document.selection.getFirstPosition()); dot't take effect.

[xuxanwan]

I've solved it. Just refer to here ckeditor/ckeditor5#10622