圖像(Image) · Froala HTML Editor 參考手冊

### imageAllowedTypes |Type: |Array| |---| |Default: |['jpeg', 'jpg', 'png', 'gif', 'svg+xml']| |Plugin: |image.min.js| 允許上傳的圖像類型的列表。雖然這將限制上傳其他類型的文件，我們強烈建議您檢查服務器上的文件類型. #### CODE EXAMPLE ~~~ $('.selector').froalaEditor({ imageAllowedTypes: ['jpeg', 'jpg', 'png'] }); ~~~ ### imageAltButtons |Type: |Array| |---| |Default: |['imageBack', '\|']| |Plugin:| image.min.js| 在編輯圖像的替換文字，按鈕彈出顯示列表，改變圖像的替換文字時 #### CODE EXAMPLE ~~~ $('.selector').froalaEditor({ imageAltButtons: ['imageBack'] }); ~~~ ### imageDefaultAlign |Type:| String| |---| |Default:| 'center'| |Plugin: |image.min.js| 設置插入到富文本編輯器中的默認圖像對齊方式。可能的值是 `'left'`, `'center'` 和 `'right'`. #### CODE EXAMPLE ~~~ $('.selector').froalaEditor({ imageDefaultAlign: 'left' }); ~~~ ### imageDefaultDisplay |Type:| String| |---| |Default:| 'block'| |Plugin: |image.min.js| 設置插入在富文本中的圖像的默認顯示。可能的選項是: `'inline'` 和 `'block'`. #### CODE EXAMPLE ~~~ $('.selector').froalaEditor({ imageDefaultDisplay: 'inline' }); ~~~ ### imageDefaultWidth |Type:| Number| |---| |Default:| 300| |Plugin: |image.min.js| 設置插入富文本編輯器時圖像的默認寬度。設置為0不會設置任何寬度。 #### CODE EXAMPLE ~~~ $('.selector').froalaEditor({ imageDefaultWidth: 200 }); ~~~ ### imageEditButtons |Type: |Array| |---| |Default: |['imageReplace', 'imageAlign', 'imageRemove', '\|', 'imageLink', 'linkOpen', 'linkEdit', 'linkRemove', '-', 'imageDisplay', 'imageStyle', 'imageAlt', 'imageSize']| |Plugin: |image.min.js| 在編輯圖像彈出按鈕時出現的列表中選擇圖像。 #### CODE EXAMPLE ~~~ $('.selector').froalaEditor({ imageEditButtons: ['imageReplace', 'imageAlign', 'imageRemove'] }); ~~~ ### imageInsertButtons |Type: |Array| |---| |Default:| ['imageBack', '\|', 'imageUpload', 'imageByURL', 'imageManager']| |Plugin: |image.min.js| 在插入圖像按鈕的彈出顯示列表，當插入一個新的圖像到所見即所得的編輯器。 #### CODE EXAMPLE ~~~ $('.selector').froalaEditor({ imageInsertButtons: ['imageBack', '|', 'imageManager'] }); ~~~ ### imageMaxSize |Type:| Number| |---| |Default:| 1024 * 1024 * 10| |Plugin: |image.min.js| 上載字節的最大圖像大小。默認值是10MB。盡管在上傳圖像之前進行了額外的檢查，但是強烈建議檢查服務器上的圖像大小。 #### CODE EXAMPLE ~~~ $('.selector').froalaEditor({ imageMaxSize: 1024 * 1024 * 3 }); ~~~ ### imageMinWidth |Type:| Number| |---| |Default: |16| |Plugin: |image.min.js| 最小寬度在PX的圖像可以調整到。 #### CODE EXAMPLE ~~~ $('.selector').froalaEditor({ imageMinWidth: 32 }); ~~~ ### imageMove |Type:| Boolean| |---| |Default: |true| |Plugin:| image.min.js| 允許拖動圖像改變圖像的位置。此選項將正常工作，只有當包括拖動插件. #### CODE EXAMPLE ~~~ $('.selector').froalaEditor({ imageMove: false }); ~~~ ### imageMultipleStyles |Type:| Boolean| |---| |Default:| true| |Plugin:| image.min.js| 允許一次選擇多個圖像樣式。 #### CODE EXAMPLE ~~~ $('.selector').froalaEditor({ imageMultipleStyles: false }); ~~~ ### imagePaste |Type: |Boolean| |---| |Default: |true| |Plugin:| image.min.js| 允許從剪貼板粘貼圖像。 #### CODE EXAMPLE ~~~ $('.selector').froalaEditor({ imagePaste: false }); ~~~ ### imagePasteProcess |Type:| Boolean| |---| |Default: |false| |Plugin:| image.min.js| 使用默認圖像設置粘貼圖像。 #### CODE EXAMPLE ~~~ $('.selector').froalaEditor({ imagePasteProcess: true }); ~~~ ### imageResize |Type: |Boolean| |---| |Default: |true| |Plugin: |image.min.js| 當設置為`false`時禁用圖像調整大小。 #### CODE EXAMPLE ~~~ $('.selector').froalaEditor({ imageResize: false }); ~~~ ### imageResizeWithPercent |Type: |Boolean| |---| |Default: |false| |Plugin: |image.min.js| 默認情況下，圖像大小調整使用PX。啟用此選項將使用%而當縮放圖像編輯器內。 #### CODE EXAMPLE ~~~ $('.selector').froalaEditor({ imageResizeWithPercent: true }); ~~~ ### imageRoundPercent |Type:| Boolean| |---| |Default:| false| |Plugin: |image.min.js| 力圖像分圓整數而調整。 #### CODE EXAMPLE ~~~ $('.selector').froalaEditor({ imageRoundPercent: true }); ~~~ ### imageOutputSize |Type:| Boolean| |---| |Default:| false| |Plugin:| image.min.js| 啟用此選項時，圖像將獲取輸出中設置為屬性的寬度和高度. #### CODE EXAMPLE ~~~ $('.selector').froalaEditor({ imageOutputSize: true }); ~~~ ### imageSizeButtons |Type: |Array| |---| |Default:| ['imageBack', '\|']| |Plugin: |image.min.js| 在編輯圖像大小，按鈕彈出顯示的列表，當編輯圖像的寬度和高度. #### CODE EXAMPLE ~~~ $('.selector').froalaEditor({ imageSizeButtons: ['imageBack'] }); ~~~ ### imageSplitHTML |Type: |Boolean| |---| |Default: |false| |Plugin:| image.min.js| 能夠將HTML插入一個新的圖像. #### CODE EXAMPLE ~~~ $('.selector').froalaEditor({ imageSplitHTML: true }); ~~~ ### imageStyles |Type:| Object| |---| |Default:| {'fr-rounded': 'Rounded','fr-bordered': 'Bordered'}| |Plugin: |image.min.js| 為選定的圖像設置自定義樣式。類應該定義在CSS，否則不會改變圖像的外觀上可見. #### CODE EXAMPLE ~~~ $('.selector').froalaEditor({ imageStyles: { class1: 'Class 1', class2: 'Class 2', class3: 'Class 3' } }); ~~~ ### imageTextNear |Type:| Boolean| |---| |Default:| true| |Plugin:| image.min.js| 允許圖像靠近左邊或右邊時的文本。禁用此選項將圖像編輯器彈出可用作顯示按鈕. #### CODE EXAMPLE ~~~ $('.selector').froalaEditor({ imageTextNear: false }); ~~~ ### imageUploadMethod |Type:| String| |---| |Default:| 'POST'| |Plugin:| image.min.js| HTTP上傳圖片的請求類型. #### CODE EXAMPLE ~~~ $('.selector').froalaEditor({ imageUploadMethod: 'PUT' }); ~~~ ### imageUploadParam |Type:| String| |---| |Default:| 'file'| |Plugin: |image.min.js| 自定義上載請求中包含圖像文件的參數的名稱. #### CODE EXAMPLE ~~~ $('.selector').froalaEditor({ imageUploadParam: 'file_name' }); ~~~ ### imageUploadParams |Type: |Object| |---| |Default:| {}| |Plugin: |image.min.js| 將附加參數傳遞給上載請求。 #### CODE EXAMPLE ~~~ $('.selector').froalaEditor({ imageUploadParams: { id: 'my_editor' } }); ~~~ ### imageUploadToS3 |Type:| Object| |---| |Default: |false| |Plugin:| image.min.js| 集的圖像上傳到S3的選項。下面示例中的所有字段都是必需的。還要確保您啟用CORS在亞馬遜。 Note: uploadurl屬性可以用來代替水桶和區域屬性指定一個自定義的URL從Amazon那里上傳圖像。 #### CODE EXAMPLE ~~~ $('.selector').froalaEditor({ imageUploadToS3: { bucket: 'editor', // Your bucket region. region: 's3-us-east-1', keyStart: 'uploads/', callback: function (url, key) { // The URL and Key returned from Amazon. console.log (url); console.log (key); }, params: { acl: 'public-read', // ACL according to Amazon Documentation. AWSAccessKeyId: 'ACCESS_KEY', // Access Key from Amazon. policy: 'POLICY_STRING', // Policy string computed in the backend. signature: '', // Signature computed in the backend. } } }); ~~~ ### imageUploadURL |Type: |String| |---| |Default:| 'http://i.froala.com/upload'| |Plugin:| image.min.js| 保存用戶上傳的圖像的URL。當一個圖像上傳、編輯發送文件到服務器通過HTTP請求。服務器應該處理數據請求的文件參數并返回一個包含一個鏈接字段的鏈接到上傳圖像的JSON對象。更多細節可以在圖片上傳中找到概念文章。 E.g. {link: 'path/to/image.jpg'}. Note 1: 默認情況下，圖像存儲在我們的服務器上，但如果您想完全控制它們，您應該考慮在服務器上實現上傳。存儲在服務器上的圖像，可隨時刪除，無需任何通知。注2：如果域圖像保存是不一樣的一個編輯正在運行，您可能需要啟用requestwithcors選項并在服務器上進行具體的自定義。欲了解更多信息，請參閱跨原產地資源共享。 #### CODE EXAMPLE ~~~ $('.selector').froalaEditor({ imageUploadURL: '/upload_image' }); ~~~