payload: {"action":"opened","issue":{"url":"https://api.github.com/repos/margox/braft-editor/issues/459","repository_url":"https://api.github.com/repos/margox/braft-editor","labels_url":"https://api.github.com/repos/margox/braft-editor/issues/459/labels{/name}","comments_url":"https://api.github.com/repos/margox/braft-editor/issues/459/comments","events_url":"https://api.github.com/repos/margox/braft-editor/issues/459/events","html_url":"https://github.com/margox/braft-editor/issues/459","id":437471627,"node_id":"MDU6SXNzdWU0Mzc0NzE2Mjc=","number":459,"title":"修改图片大小会变形","user":{"login":"zhaijiamei","id":28887249,"node_id":"MDQ6VXNlcjI4ODg3MjQ5","avatar_url":"https://avatars1.githubusercontent.com/u/28887249?v=4","gravatar_id":"","url":"https://api.github.com/users/zhaijiamei","html_url":"https://github.com/zhaijiamei","followers_url":"https://api.github.com/users/zhaijiamei/followers","following_url":"https://api.github.com/users/zhaijiamei/following{/other_user}","gists_url":"https://api.github.com/users/zhaijiamei/gists{/gist_id}","starred_url":"https://api.github.com/users/zhaijiamei/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/zhaijiamei/subscriptions","organizations_url":"https://api.github.com/users/zhaijiamei/orgs","repos_url":"https://api.github.com/users/zhaijiamei/repos","events_url":"https://api.github.com/users/zhaijiamei/events{/privacy}","received_events_url":"https://api.github.com/users/zhaijiamei/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2019-04-26T02:27:31Z","updated_at":"2019-04-26T02:27:31Z","closed_at":null,"author_association":"NONE","body":"\r\n![image](https://user-images.githubusercontent.com/28887249/56779397-6df2c100-680d-11e9-9c6a-b5bc5b107146.png)\r\n并且，图片设置居中的时候。会变得很大，预览的时候又显示正常\r\n![image](https://user-images.githubusercontent.com/28887249/56779458-adb9a880-680d-11e9-8d4a-2253b9b7fd5b.png)\r\n![image](https://user-images.githubusercontent.com/28887249/56779476-c32ed280-680d-11e9-9345-4a565eec40ad.png)\r\n\r\n下面是我的代码\r\nimport 'braft-editor/dist/index.css'\r\nimport React, { Component } from 'react';\r\nimport {message, Button, Input, Icon, Tooltip, Row, Col } from 'antd';\r\n// 引入编辑器组件\r\nimport BraftEditor from 'braft-editor'\r\n\r\nclass MyEditor extends Component {\r\n  constructor() {\r\n    super()\r\n    this.state = {\r\n      // 创建一个空的editorState作为初始值\r\n      editorState: BraftEditor.createEditorState(null)\r\n    }\r\n  }\r\n\r\n  //   async componentDidMount () {\r\n  //     // 假设此处从服务端获取html格式的编辑器内容\r\n  //     const htmlContent = await fetchEditorContent()\r\n  //     // 使用BraftEditor.createEditorState将html字符串转换为编辑器需要的editorStat\r\n  //     this.setState({\r\n  //         editorState: BraftEditor.createEditorState(htmlContent)\r\n  //     })\r\n  // }\r\n\r\n  submitContent = async () => {\r\n    message.success('保存成功')\r\n\r\n    // 在编辑器获得焦点时按下ctrl+s会执行此方法\r\n    // 编辑器内容提交到服务端之前，可直接调用editorState.toHTML()来获取HTML格式的内容\r\n    const htmlContent = this.state.editorState.toHTML()\r\n    // const result = await saveEditorContent(htmlContent)\r\n  }\r\n\r\n  handleEditorChange = (editorState) => {\r\n\r\n\r\n    this.setState({ editorState })\r\n  }\r\n\r\n  preview = () => {\r\n\r\n    if (window.previewWindow) {\r\n      window.previewWindow.close()\r\n    }\r\n\r\n    window.previewWindow = window.open()\r\n    window.previewWindow.document.write(this.buildPreviewHtml())\r\n    window.previewWindow.document.close()\r\n\r\n  }\r\n\r\n  buildPreviewHtml() {\r\n\r\n    return `\r\n      <!Doctype html>\r\n      <html>\r\n        <head>\r\n          <title>Preview Content</title>\r\n          <style>\r\n            html,body{\r\n              height: 100%;\r\n              margin: 0;\r\n              padding: 0;\r\n              overflow: auto;\r\n              background-color: #f1f2f3;\r\n            }\r\n            .container{\r\n              box-sizing: border-box;\r\n              width: 1000px;\r\n              max-width: 100%;\r\n              min-height: 100%;\r\n              margin: 0 auto;\r\n              padding: 30px 20px;\r\n              overflow: hidden;\r\n              background-color: #fff;\r\n              border-right: solid 1px #eee;\r\n              border-left: solid 1px #eee;\r\n            }\r\n            .container img,\r\n            .container audio,\r\n            .container video{\r\n              max-width: 100%;\r\n              height: auto;\r\n            }\r\n            .container p{\r\n              white-space: pre-wrap;\r\n              min-height: 1em;\r\n            }\r\n            .container pre{\r\n              padding: 15px;\r\n              background-color: #f1f1f1;\r\n              border-radius: 5px;\r\n            }\r\n            .container blockquote{\r\n              margin: 0;\r\n              padding: 15px;\r\n              background-color: #f1f1f1;\r\n              border-left: 3px solid #d1d1d1;\r\n            }\r\n          </style>\r\n        </head>\r\n        <body>\r\n          <div class=\"container\">${this.state.editorState.toHTML()}</div>\r\n        </body>\r\n      </html>\r\n    `\r\n\r\n  }\r\n  render() {\r\n    const { editorState } = this.state\r\n    const controls = [\r\n      'undo', 'redo', 'separator',\r\n      'font-size', 'line-height', 'letter-spacing', 'separator',\r\n      'text-color', 'bold', 'italic', 'underline', 'strike-through', 'separator',\r\n      'superscript', 'subscript', 'remove-styles', 'emoji', 'separator', 'text-indent', 'text-align', 'separator',\r\n      'headings', 'list-ul', 'list-ol', 'blockquote', 'separator',\r\n      'link', 'separator', 'hr', 'separator',\r\n      'media', 'separator',\r\n      'clear'\r\n    ]\r\n\r\n    const extendControls = [\r\n      {\r\n        key: 'custom-button',\r\n        type: 'button',\r\n        text: '点击预览',\r\n        onClick: this.preview\r\n      }\r\n    ]\r\n\r\n    return (\r\n      <div className=\"editor-wrapper\">\r\n        <BraftEditor\r\n          placeholder='在编辑器获得焦点时按下ctrl+s保存, 可点击预览查看, 如果没有想要的颜色，可复制到编辑器使用'\r\n          value={editorState}\r\n          onChange={this.handleEditorChange}\r\n          onSave={this.submitContent}\r\n          controls={this.props.controls || controls}\r\n          extendControls={extendControls}\r\n          // contentStyle={{height: 400}}\r\n          media={{\r\n            pasteImage: true,\r\n            // onInsert: (value) => { console.log('value', value) },\r\n            // onChange: (value) => { console.log('onChange', value) },\r\n          }}\r\n          imageControls={[\r\n            'float-left', // 设置图片左浮动\r\n            'float-right', // 设置图片右浮动\r\n            'align-left', // 设置图片居左\r\n            'align-center', // 设置图片居中\r\n            'align-right', // 设置图片居右\r\n            'link', // 设置图片超链接\r\n            'size', // 设置图片尺寸\r\n            'remove' // 删除图片\r\n          ]}\r\n        />\r\n      </div>\r\n    );\r\n  }\r\n}\r\n\r\nexport default MyEditor;"}}
other: {"actor":{"display_login":"zhaijiamei"}}