修改图片大小会变形

并且，图片设置居中的时候。会变得很大，预览的时候又显示正常

下面是我的代码 import 'braft-editor/dist/index.css' import React, { Component } from 'react'; import {message, Button, Input, Icon, Tooltip, Row, Col } from 'antd'; // 引入编辑器组件 import BraftEditor from 'braft-editor'

class MyEditor extends Component { constructor() { super() this.state = { // 创建一个空的editorState作为初始值 editorState: BraftEditor.createEditorState(null) } }

// async componentDidMount () { // // 假设此处从服务端获取html格式的编辑器内容 // const htmlContent = await fetchEditorContent() // // 使用BraftEditor.createEditorState将html字符串转换为编辑器需要的editorStat // this.setState({ // editorState: BraftEditor.createEditorState(htmlContent) // }) // }

submitContent = async () => { message.success('保存成功')

// 在编辑器获得焦点时按下ctrl+s会执行此方法
// 编辑器内容提交到服务端之前，可直接调用editorState.toHTML()来获取HTML格式的内容
const htmlContent = this.state.editorState.toHTML()
// const result = await saveEditorContent(htmlContent)

}

handleEditorChange = (editorState) => {

this.setState({ editorState })

}

preview = () => {

if (window.previewWindow) {
  window.previewWindow.close()
}

window.previewWindow = window.open()
window.previewWindow.document.write(this.buildPreviewHtml())
window.previewWindow.document.close()

}

buildPreviewHtml() {

return `
  <!Doctype html>
  <html>
    <head>
      <title>Preview Content</title>
      <style>
        html,body{
          height: 100%;
          margin: 0;
          padding: 0;
          overflow: auto;
          background-color: #f1f2f3;
        }
        .container{
          box-sizing: border-box;
          width: 1000px;
          max-width: 100%;
          min-height: 100%;
          margin: 0 auto;
          padding: 30px 20px;
          overflow: hidden;
          background-color: #fff;
          border-right: solid 1px #eee;
          border-left: solid 1px #eee;
        }
        .container img,
        .container audio,
        .container video{
          max-width: 100%;
          height: auto;
        }
        .container p{
          white-space: pre-wrap;
          min-height: 1em;
        }
        .container pre{
          padding: 15px;
          background-color: #f1f1f1;
          border-radius: 5px;
        }
        .container blockquote{
          margin: 0;
          padding: 15px;
          background-color: #f1f1f1;
          border-left: 3px solid #d1d1d1;
        }
      </style>
    </head>
    <body>
      <div class="container">${this.state.editorState.toHTML()}</div>
    </body>
  </html>
`

} render() { const { editorState } = this.state const controls = [ 'undo', 'redo', 'separator', 'font-size', 'line-height', 'letter-spacing', 'separator', 'text-color', 'bold', 'italic', 'underline', 'strike-through', 'separator', 'superscript', 'subscript', 'remove-styles', 'emoji', 'separator', 'text-indent', 'text-align', 'separator', 'headings', 'list-ul', 'list-ol', 'blockquote', 'separator', 'link', 'separator', 'hr', 'separator', 'media', 'separator', 'clear' ]

const extendControls = [
  {
    key: 'custom-button',
    type: 'button',
    text: '点击预览',
    onClick: this.preview
  }
]

return (
  <div className="editor-wrapper">
    <BraftEditor
      placeholder='在编辑器获得焦点时按下ctrl+s保存, 可点击预览查看, 如果没有想要的颜色，可复制到编辑器使用'
      value={editorState}
      onChange={this.handleEditorChange}
      onSave={this.submitContent}
      controls={this.props.controls || controls}
      extendControls={extendControls}
      // contentStyle={{height: 400}}
      media={{
        pasteImage: true,
        // onInsert: (value) => { console.log('value', value) },
        // onChange: (value) => { console.log('onChange', value) },
      }}
      imageControls={[
        'float-left', // 设置图片左浮动
        'float-right', // 设置图片右浮动
        'align-left', // 设置图片居左
        'align-center', // 设置图片居中
        'align-right', // 设置图片居右
        'link', // 设置图片超链接
        'size', // 设置图片尺寸
        'remove' // 删除图片
      ]}
    />
  </div>
);

} }

export default MyEditor;

margox / braft-editor

修改图片大小会变形 #459