在TypeScript文件中使用CKEditor 5自定义构建

我正在尝试在TypeScript文件中使用自定义版本的CKEditor 5。我的自定义构建基于InlineEditor。我能够在相关视图中使用脚本成功地创建一个编辑器实例。

<script>
    InlineEditor
        .create(document.querySelector('#Html2Editor'))
        .then(inlineEditor => {
            window.editor = inlineEditor;
        })
        .catch(error => {
            console.error(error);
        });

            document.querySelector("#saveButton").addEventListener("click", () => {
                var editorContent = window.editor.getData();
                alert(editorContent);
                $("#Html2").val(editorContent);
            })
</script>

我想将该脚本移动到现有的TS文件中。该文件当前的开头如下:

/// <reference path="typings/jquery/jquery.d.ts" />
/// <reference path="typings/datetimepicker/jquery.ui.datetimepicker.d.ts" />

//this is set for all pages that reference this file
$(document).ready(function ()
{
    SI.UI.attachGlobalJavaScriptErrorLogging();
});

module SI.UI {

并且其导出的函数被调用如下:

module SI.Dawr.Nimpis.About
{
    export function setupEdit() {
        SI.UI.attachInlineCKEditors(
            ["Html"],
            "Html");

        SI.Dawr.Nimpis.configureSaveButtonEvents();
    }
}

那个 attachInlineCKEditors 用于CKEditor4,并且使用类型定义文件,而CKEditor5没有该文件。我已将以下内容添加到tsconfig.json文件中:

  "compilerOptions": {
    "strict": true,
    "allowJs": true,

然后这样修改TS文件:

/// <reference path="typings/jquery/jquery.d.ts" />
/// <reference path="typings/datetimepicker/jquery.ui.datetimepicker.d.ts" />

import { InlineEditor } from "ckeditor5/build/ckeditor";

//this is set for all pages that reference this file
$(document).ready(function ()
{
    SI.UI.attachGlobalJavaScriptErrorLogging();
});

module SI.UI {

这让我可以参考 InlineEditor 在TS文件中成功。问题现在指向其他地方的TS文件。当 import 行存在 UI 的一部分 SI.UI.attachInlineCKEditors 在下划线中显示为错误,消息如下:

TS2339(TS)类型“typeof SI”上不存在属性“UI”。

我如何包括JS导入,并且仍然像以前一样识别我的模块?我没有写这个TS,也不是使用它的专家,但我的任务是升级CKEditor。

编辑:

我之前没有注意到,因为所有的代码都被折叠在TS文件中,但似乎 SI 命名空间未被识别为 进口 目前模块中的第一个功能如下:

    export function textOnlyAutoComplete(inputTextBoxID: string, actionURL: string, minLength: number = 2) {
        $('#' + inputTextBoxID)
            .autocomplete({
                source: function (request: any, response: any) {
                    $.ajax({
                        url: actionURL,
                        type: 'POST',
                        dataType: 'json',
                        data: { searchText: request.term, maxresults: 10 },
                        success: function (data) {
                            response(data);
                        },
                        error: SI.DataUtilities.ajaxErrorHandler,
                        cache: false
                    });
                },
                minLength: minLength == null ? 2 : minLength,
                select: function (event: any, ui: any)
                {
                    this.value = ui.item.label;

                    return false;
                },
                open: function (event: any, ui: any) {

                    var autoComplete = $(this);

                    var zIndexMax = Math.max.apply(null,
                        $.map($('body > *'),
                            function (e, n) {

                                if ($(e).css('position') != 'static')
                                    return parseInt($(e).css('z-index')) || 1;

                            }));

                    var autoCompleteZIndex = parseInt(autoComplete.css("z-index"));

                    if (isNaN(autoCompleteZIndex) || zIndexMax >= autoCompleteZIndex) {
                        //Sets the input field to the top z-index in the page:
                        autoComplete.css("z-index", zIndexMax + 1);
                        //Sets the autocomplete suggestion list one level higher:
                        $(".ui-autocomplete").css("z-index", zIndexMax + 2);
                    }
                },
                ////this stops chrome address auto fill
                //create: function (event, ui)
                //{
                //    $(this).attr("autocomplete", $(this).attr("id"));
                //}
            }
            );
    }

在该函数中,此行:

error: SI.DataUtilities.ajaxErrorHandler,

是个问题。在没有导入的情况下,VS Intellisense在 SI. ,应该如此。在导入存在的情况下,唯一的选项是 用户界面 所以 DataUtilities 出现错误。此模块似乎无法识别这一点 硅 与此文件外部的命名空间相同。我对TS的了解还不够,不知道为什么会这样,也不知道如何解决。