@meteoDan wrote:
I want to build up Markdown Editor in plotly dash. So I build up a small script to render a html template and provide it to the layout:
# Import required libraries import dash from jinja2 import FileSystemLoader, Environment import dash_html_components as html app = dash.Dash( __name__, meta_tags=[{"name": "viewport", "content": "width=device-width"}] ) server = app.server file_loader = FileSystemLoader('/home/daniel/projects/forecast-system/meteoIntelligence-dashboard/apps/assets') env = Environment(loader=file_loader) markdown_editor = env.get_template('markdown_editor_base.html') markdown_editor = markdown_editor.render() app.layout = html.Div( [ html.Div(id="input-clientside"), html.Div([ html.Div( [ html.Iframe(srcDoc=markdown_editor, id='markdown_editor', style={'border': 0, 'margin-bottom': -10, 'margin-top': -5}, width="100%", height=400) ], className="pretty_container eight columns", id='left-top-column', ), html.Div( [ html.P(id='test-output') ], className="pretty_container four columns", id='right-top-column', ) , ], className="row flex-display"), ], id="mainContainer", style={"display": "flex", "flex-direction": "column"}) @app.callback( dash.dependencies.Output('test-output', 'children'), [dash.dependencies.Input('markdown_editor', 'srcDoc')]) def update_forecast_data(markdown_data): return html.P(markdown_data) if __name__ == "__main__": app.run_server(debug=True, host='0.0.0.0')And here is the required html template:
<!DOCTYPE html> <html lang="en"> <body> <link rel="stylesheet" href="https://unpkg.com/easymde/dist/easymde.min.css"> <script src="https://unpkg.com/easymde/dist/easymde.min.js"></script> <textarea></textarea> <p id="p1"></p> <script> var easyMDE = new EasyMDE(); easyMDE.codemirror.on("change", function(){ document.getElementById("p1").innerHTML = easyMDE.value(); }); </script> </body> </html>My issue is now to receive the data/value of
easyMDE.value()whichis the markdown output. As you can see I tried to receive the data via a div or p box but the srcDoc does not change and the iframe javascript does not write any data to the p1 element.
Posts: 1
Participants: 1