Closed andrewbudikusuma closed 1 week ago
https://github.com/RIP21/react-simplemde-editor I tried that, it's working.
https://github.com/RIP21/react-simplemde-editor I tried that, it's working.
basically use other npm library. I tried react simplemde editor too and it works, I am just want to know if using raw simplemde is support or not
/*global SimpleMDE */
import React from 'react'
require('script!../../node_modules/simplemde/dist/simplemde.min.js')
// Styles
import '../../node_modules/simplemde/dist/simplemde.min.css'
// import '../scss/components/_markdownEditor'
export default class MarkdownEditor extends React.Component {
constructor (props) {
super(props)
this._onSave = this._onSave.bind(this)
}
_onSave (editor) {
let fragment = Object.assign(this.props.fragment, {
source: editor.value(),
presentation: editor.options.previewRender(editor.value())
})
this.props.actions.updateFragment(fragment)
}
_onFileUpload (file, callback) {
return callback(null, null)
}
componentDidMount () {
if (this.props.fragment) {
var editor = new SimpleMDE({
element: document.getElementById('editor')
})
editor.value(this.props.fragment.source)
editor.codemirror.on('change', function () {
this._onSave(editor)
}.bind(this))
}
}
componentWillUnmount () {
var classes = ['editor-toolbar', 'CodeMirror',
'editor-preview-side', 'editor-statusbar']
var parent = document.getElementById('editor').parentNode
for (var i in classes) {
var elementToRemove = parent.querySelector('.' + classes[i])
elementToRemove && elementToRemove.remove()
}
}
render () {
return (
<textarea id='editor'/>
)
}
}
MarkdownEditor.propTypes = {
fragment: React.PropTypes.object,
actions: React.PropTypes.object
}
function mapStateToProps (state) {
console.log(state)
return {
fragment: _.find(state.fragments, function (f) {
return f._id === state.router.params.id
})
}
}
function mapDispatchToProps (dispatch) {
return {
actions: bindActionCreators(Actions, dispatch)
}
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(MarkdownEditor)
i got same problem just now,
Finally I solved the problem
componentDidMount(){ var simplemde = new SimpleMDE({ element: document.getElementById("myId") }) }
the element i was use 'div'
<div id="myId" />
change it to 'textarea',it's ok
<textarea id="myId" />
i got same problem just now, Finally I solved the problem
componentDidMount(){ var simplemde = new SimpleMDE({ element: document.getElementById("myId") }) }
the element i was use 'div'<div id="myId" />
change it to 'textarea',it's ok<textarea id="myId" />
this worked
and import js and css like this
import SimpleMDE from 'simplemde/dist/simplemde.min.js'
import 'simplemde/dist/simplemde.min.css'
updated
seems my state not updated when used that step. When i remove id for textarea, just default text area with value and onChange. my state always change based on typing
I found solution for my problem
import React, { Component } from 'react'
import SimpleMDE from 'simplemde/dist/simplemde.min.js'
import 'simplemde/dist/simplemde.min.css'
class App extends Component {
constructor(props) {
super(props)
this.state = {
value: ''
}
}
componentDidMount() {
var simplemde = new SimpleMDE({})
simplemde.codemirror.on('change', () => {
this.setState({
value: simplemde.value()
})
})
}
render() {
return (
<div className="App">
<textarea />
</div>
)
}
}
export default App
I don't know this is best practice or not
`import { useEffect, useRef, useState } from "react"; import "./styles.css"; import SimpleMDE from "simplemde"; import "simplemde/dist/simplemde.min.css";
export default function App() { const textareaRef = useRef(); const [instance, setInstance] = useState(); function onChange() { console.log(instance?.value()); }
useEffect(() => { if (textareaRef?.current && !instance) { var simplemde = new SimpleMDE({ element: textareaRef.current, toolbar: [ "bold", "code", "italic", "heading", "|", "quote", "horizontal-rule", "clean-block", "side-by-side", "preview", "table", "link", "ordered-list", "fullscreen", "guide" ] }); simplemde.value("Initial text"); setInstance(simplemde); simplemde.codemirror.on("change", onChange); } }, [textareaRef?.current]);
return (
); } `
how to start simplemde in react?
I try to do this https://gist.github.com/andrewkusuma/378355f54d2dee7267c3fcc94121fd9b but not working. Any idea to get started in react?