My goal here is to insert an image in Quill editor in react-native-webview component as shown below. For which I need access to the quill variable in the script tag:
<WebView originWhitelist={['*']} ref={(r) => setWebref(r)} javaScriptEnabled={true} source={{ html: `<head><link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet"><script src="https://cdn.quilljs.com/1.3.6/quill.js"></script></head><body><div id="editor" >${content}</div></body><script> var toolbarOptions = [[ 'bold', 'italic',],]; var quill = new Quill('#editor', { modules: { toolbar: toolbarOptions })</script>`, }} />When I try to run following snippet outside webview in react-native, nothing is happening
const url = `https://...`; const code = `const range = window.quill.getSelection(); window.quill.insertEmbed(range.index, 'image', ${url}); `; webref.injectJavaScript(code);But, when I try to run following snippet outside webview in react-native, I am getting the expected result.
const snippet = `document.body.style.backgroundColor = 'blue'; true; `; webref.injectJavaScript(snippet);