1. 程式人生 > >umeditor編輯器外掛圖片尺寸太大問題解決

umeditor編輯器外掛圖片尺寸太大問題解決

這個問題的處理辦法在編輯器的image外掛中其實是有解決方案的,只是被註釋掉了。

首先說下在網上找到的兩種方法:

1、在\ueditor\themes\iframe.css新增樣式 ‘max-width: 100%’,找了下在umeditor中沒有這個檔案;

2、是在umeditor.js中新增‘width=100%’的屬性;

第二種辦法是可行的,只是在頁面中我引用的是umeditor.min.js檔案,要改這裡比較麻煩。

不過也正是從這裡的ci.width得到啟發---編輯器在外掛圖片時,是會根據圖片外掛傳入的引數設定圖片尺寸;

於是,我找到了 image.js檔案中,點選確定按鈕執行的程式碼:

這裡的list就是傳到umeditor.js中的opt引數,也就是待插入圖片的相關資訊;根據這條線索找到了當前檔案中的getAllPic函式:

上圖中有一段被註釋的程式碼,它就是呼叫scale計算圖片尺寸的。至於為什麼會被註釋掉,還不清楚。

開啟註釋,並在arr.push時新增到width和height屬性就可以了,如下:

從上述程式碼中可以看到,它是通過編輯器的寬度來對圖片尺寸進行等比例計算。

相關推薦

umeditor編輯外掛圖片尺寸問題解決

這個問題的處理辦法在編輯器的image外掛中其實是有解決方案的,只是被註釋掉了。首先說下在網上找到的兩種方法:1、在\ueditor\themes\iframe.css新增樣式 ‘max-width: 100%’,找了下在umeditor中沒有這個檔案;2、是在umedito

DEDE fck編輯外掛 圖片排版 自動排版 繁簡轉換

1、自動排版,將編輯器內的內容自動排版,段落自動居左,圖片自動居中,清除多餘空行,可定製段前是否空格。   2、圖片排版,將編輯器中的圖片自動居中,免去每張單獨設定的煩惱。   3、簡繁轉換,可在編輯器中直接進行簡繁轉換,一鍵操作,方便快捷。   4、自動排版後,程式碼裡只

關於ueditor編輯外掛的使用記錄 --- 解決"後端配置項沒有正常載入,上傳外掛不能正常使用"上傳圖片處的問題

Ueditor解壓後的檔案應當直接放在www根目錄下,且檔名更改為ueditor 後開啟遊覽器訪問: http://localhost/ueditor/demo.html (先確保demo.htm

kindedit編輯修改圖片上傳限制方法

圖片 編輯器 河北 修改這個編輯器的圖片上傳大小限制,有時我們修改了很多參數,都不管用,如修改multiimage.js修改了其中的上傳配置參數還是傳不上圖片 後來經過魅力網絡的測試,通過批量查找代碼查詢max_size找到一個文件upload_json.php 看見參數我在最大文件

Ueditor1.4.3.3 富文本編輯圖片不顯示問題

.json .config 顯示 nbsp http img 分享 java 報錯   最近在項目中碰倒一個需求,需要一個富文本來編輯一個一篇報告,於是乎百度了一下找到一個百度的 ueditor 富文本編輯器,由於幫助文檔相比而言比較容易看懂,所以就選用了這個,但是也遇到

用PDF編輯圖片轉換成PDF文件的訣竅

行修改 pdf編輯 http cdn mage 想要 software 輕松 安裝 大家在辦公的時候將一些圖片上傳到網上的時候都不希望自己的圖片破壞掉,於是就出現了將圖片轉換成PDF格式文件的方法。這樣一來別人想要將PDF文件進行修改就比較困難了。 那麽如何使用PDF編輯

summernote富文字編輯實現圖片新增上傳和刪除圖片

summernote的基本使用 HTML程式碼 //div添加個id就可以 <div id="summernote" ></div> 然後JS操作 //例項化呼叫 var $summernote = $('#summernote').summernote(

解決CSDN markdown編輯插入圖片去除水印

簡介 最近有小夥伴們使用新版markdown編輯器插入圖片後還有部落格字樣的水印。今天就是要去除水印,誰來都不好使,就是要去除水印。如果該文章能夠解決小夥伴的問題記得收藏關注一波 ^。^ 1. 問題描述 上傳的圖片中裡面有部落格水印字樣。如圖 1-1 。 --> ![圖片

解決CSDN markdown編輯插入圖片時為什麼只顯示連結?

簡介 最近有小夥伴們使用新版markdown編輯器插入圖片只顯示連結,而沒有顯示圖片的的困擾。好吧,其實是我自己的困擾啦。如果該文章能夠解決小夥伴的問題記得收藏關注一波 ^。^ 一 、問題描述 插入圖片只顯示連結,沒有顯示圖片。如圖1-1。 二、問

KindEditor富文字編輯圖片、視訊等功能的富文字編輯

官方下載地址:http://kindeditor.net/demo.php 下載外掛: 簡單模式、預設模式富文字編輯器: 預設模式html頁面: <!DOCTYPE html> <html lang="en"> <head>

怎樣在百度UMeditor編輯中插入騰訊和愛奇藝網站視訊?

百度UMeditor線上編輯器有插入視訊的功能,但是預設只支援優酷網的視訊智慧分析提取,其它視訊站是不支援的,但是同樣也可以插入。 原理很簡單,就是複製騰訊、愛奇藝等視訊的FLASH地址即可。 在百度UMeditor線上編輯器插入騰訊、愛奇藝等視訊的FLASH地址時,會提

laravel使用umeditor編輯輸出資料到頁面

今天在laravel框架中使用了umeditor編輯器來進行編輯資料 本來以為輸出資料的時候還要麻煩一下 使用php函式來進行轉碼什麼的 結果laravel在頁面輸出已經有設定好的了 就是下面這個 {{!! 這裡輸入umeditor資料 !!}} larave

百度編輯限制圖片檔案大小

1、報錯“請求後臺配置項http錯誤,上傳功能將不能正常使用!”,如圖所示: 解析:UEditor 提供了四種後臺語言 php,asp,asp.net,jsp ,你可以檢視下頁面引用的ueditor.config.js檔案內的serverUrl 引數,如果

wordpress編輯外掛

自用Wordpress起,一直對後臺發表文章的編輯器也就是WordPress自帶的TinyMCE編輯器很不爽! 有N大不爽: 1、上傳圖片或傳檔案介面操作很卡不流暢,速度又慢 2、編輯器自身文章內容編排功能總感覺太單調,不好控制,不夠傻

安裝Maven,執行mvn -v後出現 Error: JAVA_HOME is set to an invalid directory.(圖片可能,無法顯示,有時間再上傳)

問題: 1.看到這個有點懵逼,剛開始以為是JDK是不是出問題了。所以: 恩,沒問題。繼續想,既然報錯了就去找這個maven的bin目錄下都有啥,cmd開啟的,自然看這個: 既然是JAVA_HOM

summernote編輯外掛使用筆記

這次專案中需要用到編輯器外掛,於是上網查了一下。由於需要的編輯器功能比較簡單,不需要太多複雜功能,所以選擇了一款特別輕量的summernote外掛,而且後臺操作也很簡單。 官網:http://summernote.org/ github地址:https://github.

在專案中使用富文字編輯UEditor(開源文字編輯外掛)

第一步:下載UEditor所需要的所有檔案 此處用的是JSP-UTF-8版本 下載連結:http://ueditor.baidu.com/website/download.html 第二步:將下載檔案解壓至專案web目錄下 第三步:將資料夾下/jsp/lib目錄下的五個jar包拷貝至專案中的WEB-INF/

eclipse 環境下 FreeMarker 編輯外掛

支援語法高亮,語法校驗,程式碼提示的工具 freemark IDE(JBoss): 或者 安裝方法:eclipse --> Help --> Install New Software --> Add --> Location 如果只是需要freemarker編輯器,安裝時

VS Code編輯外掛整理及配置設定

  語言包: Chinese -- VS Code的漢化包   格式化+程式碼補全: ESLint -- Integrates ESLint Vetur -- A vue tooling Prettier -- Format your JavaScr

基於jquery的bootstrap線上文字編輯外掛Summernote

Summernote是一個基於的bootstrap超級簡單WYSIWYG線上編輯器。Summernote非常的輕量級,大小隻有30KB,支援Safari,Chrome,Firefox、Opera、Internet Explorer 9 +(IE8支援即將到