1.編輯器修改 (可選)

1.1在 ueditor/config.json 中新增程式碼塊

    /* 上傳word配置 */

    "wordActionName": "wordupload", /* 執行上傳視訊的action名稱 */

    "wordFieldName": "upfile", /* 提交的視訊表單名稱 */

    "wordPathFormat": "/public/uploads/word/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳儲存路徑,可以自定義儲存路徑和檔名格式 */

    "wordMaxSize": 102400000, /* 上傳大小限制，單位B，預設100MB */

"wordAllowFiles": [".docx"] /* 僅支援docx格式的word */

1.2 修改編輯器配置檔案

在ueditor\ueditor.config.js檔案中，新增按鈕名稱"wordupload"，並新增滑鼠懸浮提示

 ,labelMap:{

      'wordupload': '上傳word檔案',

    }

​

1.2.1 對應 /ueditor/lang/**

​

en.js

 'wordupload':{

        'exceedSizeError': 'File Size Exceed',

        'exceedTypeError': 'File Type Not Allow',

        'jsonEncodeError': 'Server Return Format Error',

        'loading':"loading...",

        'loadError':"load error",

        'errorLoadConfig': 'Server config not loaded, upload can not work.',

    },

​

​

zh-cn.js

 'wordupload':{

        'exceedSizeError': '檔案大小超出限制',

        'exceedTypeError': '檔案格式不允許',

        'jsonEncodeError': '伺服器返回格式錯誤',

        'loading':"正在上傳...",

        'loadError':"上傳錯誤",

        'errorLoadConfig': '後端配置項沒有正常載入，上傳外掛不能正常使用！'

    },

​

​

1.3 在ueditor\themes\default\images\目錄下新增按鈕圖示"word_upload.png"：

​

在ueditor\themes\default\css\ueditor.css檔案中新增按鈕樣式：

.edui-default .edui-for-wordupload .edui-icon {

    width: 16px;

    height: 16px;

    background: url(../images/word_upload.png) no-repeat 2px 2px !important;

}

​

最後在ueditor\ueditor.all.js檔案中editorui[“simpleupload”] = function (editor){}後面新增如下程式碼

  UE.commands['wordupload'] = {

    execCommand : function() {

      var me = this;

      try {

        if(typeof wordupload === "function") {

          wordupload(me.key);//回傳富文字所在的元素ID

        } else {

          console.log("wordupload is not full");

        }

      } catch(e) {

        console.log("wordupload:"+e);

      }

    },

    queryCommandState : function() {

      return false;

    }

  };

​

​

版權宣告：本文為CSDN博主「weixin_41949323」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處連結及本宣告。

原文連結：https://blog.csdn.net/weixin_41949323/article/details/124841712

2.程式碼部分

2.1 html 頁面加入下面程式碼

<!-- start -->

<div style="display: none;">

    <form id="wordimportform" enctype="multipart/form-data">

        <input type="file" name="worduploadfile" id="worduploadfile" onchange="javascript:asyncUploadFile()" />

    </form>

</div>

<div class="modal fade" id="loadingModal">

    <div style="width: 200px;height:20px; z-index: 20000; position: absolute; text-align: center; left: 50%; top: 50%;margin-left:-100px;margin-top:-10px">

        <div class="progress progress-striped active" style="margin-bottom: 0;">

            <div class="progress-bar" style="width: 100%;"></div>

        </div>

        <h5 style="color: #5BC0DE;">正在載入...</h5>

    </div>

</div>

<!-- end -->

2.2 對應 js 呼叫

 var    ue =   UE.getEditor('editor');

    function wordupload(key){

        $("#worduploadfile").click();

    }

    function asyncUploadFile() {

        $("#loadingModal").modal({backdrop: 'static', keyboard: false});

        var formData = new FormData($('#wordimportform')[0]);

        $("#worduploadfile").val('');

        $.ajax({

            url:'/wordupload',

            type:'POST',

            data:formData,

            dataType:'text',

            cache: false,

            processData: false,

            contentType: false,

            success:function (result) {

                ue.execCommand('insertHtml', result);

                $("#loadingModal").modal('hide');

            },

            error:function (error) {

                console.log(error);

                $("#loadingModal").modal('hide');

            }

        });

    }

​

更多詳細資料可以參考這篇文章：

詳細思路及原始碼

示例下載：wordpaster-vue3-cli-ueditor1.5，wordpaster-vue-ueditor1.5，wordpaster-asp.net-ueditor1.5x，wordpaster-php-ueditor1x，wordpaster-jsp-ueditor1x​