Невозможно вставить изображение в редактор Quill в response-native-webview

Моя цель - вставить изображение в редакторе Quill в компонент react-native-webview, как показано ниже. Для чего мне нужен доступ к переменной 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, ничего не происходит

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

Но когда я пытаюсь запустить следующий фрагмент вне веб-просмотра в react-native, я получаю ожидаемый результат.

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

react-native android react-native-webview quill
person Mangalprada Malaya    schedule 02.01.2021    source источник
comment
Просто наблюдение. Разве вам не нужны кавычки вокруг ${url}, например, '${url}'?   -  person Romeo Sierra    schedule 10.01.2021
comment
Нет, это уже в кавычках. начиная с диапазона const.   -  person Mangalprada Malaya    schedule 10.01.2021
comment
Вы пытались изменить его на то, что я предложил? Потому что из того, что я вижу, когда у вас есть const url = `https://blah.com`; и const code = `....insertEmbed(range.index, 'image', ${url});`;, чистый результат введенного кода будет .insertEmbed(range.index, 'image', https://blah.com);. И это уже в кавычках нет. Он заключен в обратные кавычки, что делает его строковым литералом шаблона.   -  person Romeo Sierra    schedule 10.01.2021
comment
Спасибо, @RomeoSierra! Это сработало. Не могли бы вы написать это в качестве ответа?   -  person Mangalprada Malaya    schedule 11.01.2021

Ответы (1)


arrow_upward
1
arrow_downward

Проблема заключается в

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 является синтаксической ошибкой. Эти разграниченные строки с обратными апострофами известны как строковые литералы шаблона , которые используются для форматирования строк. Итак, чтобы ваш блок кода работал, его следует исправить следующим образом.

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