无法在 react-native-webview 的 Quill 编辑器中插入图像

Question

我的目标是在 react-native-webview 组件的 Quill editor 中插入一张图片，如下所示。为此，我需要访问脚本标签中的 quill 变量：

 <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>`,
    }}
  />

当我尝试运行在 react-native 的 webview 之外跟踪片段时，没有任何反应

  const url = `https://...`;
  const code = `const range = window.quill.getSelection();
               window.quill.insertEmbed(range.index, 'image', ${url});
              `;
  webref.injectJavaScript(code);

但是，当我尝试运行在 react-native 中的 webview 之外跟踪片段时，我得到了预期的结果。

 const snippet = `document.body.style.backgroundColor = 'blue';
                  true; 
                 `;
 webref.injectJavaScript(snippet);

Answer 1

问题出在

const url = `https://...`;
const code = `const range = window.quill.getSelection();
               window.quill.insertEmbed(range.index, 'image', ${url});
              `;

当你有 const url = `https://blah.com`; 和 const code = `....insertEmbed(range.index, 'image', ${url});`; 时，注入代码的最终结果将是 ...insertEmbed(range.index, 'image', https://blah.com);，这在 JavaScript 引擎的眼中是一种语法错误。这些反引号分隔的字符串称为 template string literals，用于格式化字符串。因此，为了使您的代码块正常工作，应按如下方式更正。

const url = `https://...`;
const code = `const range = window.quill.getSelection();
               window.quill.insertEmbed(range.index, 'image', '${url}');
              `; //NOTICE THE SINGLE QUOTES AROUND ${url}

无法在 react-native-webview 的 Quill 编辑器中插入图像

Unable to insert an image in Quill editor in react-native-webview

android

react-native

quill

react-native-webview