ignaciojvig · July 27, 2020 18:02 · Jul 27, 2020
diff --git a/AntDesign + Jodit b/AntDesign + Jodit
@@ -0,0 +1,49 @@
+import React, { useState, useRef, useEffect } from 'react';
+import ReactDOMServer from 'react-dom/server'
+import logo from './logo.svg';
+import JoditEditor from "jodit-react";
+import { ShrinkOutlined } from '@ant-design/icons'
+import 'jodit';
+import 'jodit/build/jodit.min.css';
+import './App.css';
+
+function App() {
+  const editor = useRef(null)
+  const [docContent, setDocContent] = useState('Vamboooora')
+  const config = {
+    uploader: {
+      insertImageAsBase64URI: true
+    },
+    extraButtons: [
+      {
+        name: 'inserir Data',
+        exec: (editor) => {
+          editor.s.insertHTML((new Date).toDateString())
+        }
+      },
+      {
+        name: 'inserir componente Ant',
+        exec: (editor) => {
+          editor.s.insertHTML(ReactDOMServer.renderToString(<ShrinkOutlined />))
+        }
+      }
+    ],
+    buttons: ['bold'],
+    readonly: false // all options from https://xdsoft.net/jodit/doc/
+  }
+
+  return (
+    <div className="App">
+      <JoditEditor
+        ref={editor}
+        value={docContent}
+        config={config}
+        tabIndex={1} // tabIndex of textarea
+        onBlur={newContent => setDocContent(newContent)} // preferred to use only this option to update the content for performance reasons
+        onChange={newContent => { console.log(newContent); }}
+      />
+    </div>
+  );
+}
+
+export default App;