kindeditor配置及功能實現詳解

?

?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 -->

<p style="display: none;">

????<form enctype="multipart/form-data">

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

????</form>

</p>

<p >

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

????????<p style="margin-bottom: 0;">

????????????<p style="width: 100%;"></p>

????????</p>

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

????</p>

</p>

<!-- 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');

????????????}

????????});

????}

?

編輯

示例下載地址,下載前選擇合適的語言版本:

asp:https://gitee.com/xproer/wordpaster-asp-kindeditor4x

asp.net:https://gitee.com/xproer/wordpaster-asp.net-kindeditor4x

jsp:https://gitee.com/xproer/wordpaster-jsp-kindeditor4x

php:https://gitee.com/xproer/wordpaster-php-kindeditor4x

?