Angular 原生集成 UEditor

引言

原項目集成TinyMCE，但公式錄入須要購買昂貴的MathType或自研插件，遂啓用UEditor，集成開源的公式插件。

UEditor對三大框架的支持不是很好，也嘗試了ngx-ueditor，用完以後的結論，我不用這個東西。

總結出一句話：TS寫ANY，整死程序員。

若是想經過ngx-ueditor集成，請參考angular 使用 ueditor - 鯨冬香。

原生集成

下載Demo

進入官網，在下載頁下載示例代碼。

UEditor是基於MIT協議開源的，被受權人能夠使用、複製、修改、合併、出版發行、散佈、再受權及販售軟件及軟件的副本，且能夠自由地修改源代碼。

集成

將前端代碼拷貝至src/assets/ueditor目錄下。

編輯angular.json文件，定位到projects->web->architect->build->options->scripts數組下：

添加以下配置，將ueditor加入到項目構建中。

"src/assets/ueditor/ueditor.config.js",
"src/assets/ueditor/ueditor.all.min.js",
"src/assets/ueditor/lang/zh-cn/zh-cn.js"

注：ueditor.config.js必定要在ueditor.all.min.js以前引入，不然window.UE對象會被覆蓋。

組件替換

原項目將TinyMCE封裝成Editor組件，如今須要將Editor組件的內部實現替換爲UEditor。

官方文檔上來一個script給我整懵圈了，容器怎麼能用script呢？

經測試，官方文檔的寫法是錯誤的，不能使用script當容器。

每一個編輯器都應該配置惟一id，用於查找DOM，構建編輯器實例。

在ngOnInit方法中，請求生成惟一id。

/** 請求惟一 id */
this.editorId = 'editor-' + this.commonService.getUniqueId();

<div [id]="editorId"></div>

在ngAfterViewInit方法中構造編輯器，須要頁面渲染以後，UEditor才能根據id構造編輯器，並設置事件監聽。

/** 實例化 UEditor */
this.editor = UE.getEditor(this.editorId);
/** ready 時觸發方法 */
this.editor.ready(() => {
  /** 設置內容 */
  this.editor.setContent(this.content);
  /** 添加輸出監聽器 */
  this.editor.addListener('contentChange', () => {
    this.contentEmit();
  });
});

圖片上傳

按照官方的描述，後臺配置一個接口，根據不一樣的action返回不一樣的數據。

後臺配置handler，根據不一樣的action轉發給不一樣的方法。

@RequestMapping
public Object handler(@RequestParam(value = "action", required = false) String action,
                      @RequestParam(value = "attachment", required = false) MultipartFile multipartFile) {
    if (KEY_CONFIG.equals(action)) {
        return this.getConfig();
    }
    if (KEY_UPLOAD.equals(action)) {
        return this.uploadImage(multipartFile);
    }

    throw new RuntimeException("未傳入正確的 action");
}

/**
 * 獲取配置信息
 */
private Config getConfig() {
    logger.debug("返回配置信息");
    Config config = new Config();
    config.setImageActionName(KEY_UPLOAD);
    config.setImageFieldName("attachment");
    config.setImageUrlPrefix("");
    config.setImageAllowFiles(Arrays.asList(".png", ".jpg", ".jpeg", ".gif", ".bmp"));
    return config;
}

private UEditorImage uploadImage(MultipartFile multipartFile) {
    if (multipartFile == null || multipartFile.isEmpty()) {
        return null;
    }
    logger.debug("上傳附件");
    Attachment attachment = this.attachmentService.upload(multipartFile);

    logger.debug("圖片存儲");
    UEditorImage image = new UEditorImage();
    image.setState("SUCCESS");
    image.setTitle(attachment.getName());
    image.setOriginal(attachment.getOriginName());
    image.setUrl(String.format("/%s/%s/%s/%s/%s/%s",
            properties.getPrefix(),
            properties.getAttachment(),
            attachment.getMd5(),
            attachment.getSha1(),
            attachment.getId(),
            attachment.getOriginName()));
    return image;
}

在ueditor.config.js文件中配置圖片服務器接口地址。

// 服務器統一請求接口路徑
serverUrl: "/api/ueditor"

集成插件

將整個插件放入ueditor目錄下。

將插件集成到angular.json文件中。

"src/assets/ueditor/kityformula-plugin/addKityFormulaDialog.js",
"src/assets/ueditor/kityformula-plugin/getKfContent.js",
"src/assets/ueditor/kityformula-plugin/defaultFilterFix.js"

總結

UEditor集成較複雜，可能再也不適合當前環境，期待下一代富文本編輯器的發展。