консольный журнал dangerouslySetInnerHTML={{ __html: article.description }}

#reactjs

Вопрос:

Я создал wyziwig, следуя приведенным здесь инструкциям: https://blog .learningdollars.com/2020/04/01/how-to-add-a-rich-text-editor-in-your-react-app-using-draft-js-and-react-draft-wysiwyg/

Теперь я хочу добавить контейнер отображения / скрытия на основе 3 строк текста в выходных данных.

Я просто пытаюсь console.log(dangerouslySetInnerHTML={{ __html: output }}) , чтобы я мог протестировать отображение / скрытие, а также добавить многоточие. У кого-нибудь есть идеи, как это сделать?

Редактировать: если вы не хотите переходить по ссылке, я настроил изолированную среду здесь: https://codesandbox.io/s/react-draft-wysiwyg-fjfh9

Подробнее:

<div class="modal-body" dangerouslySetInnerHTML={{ __html: output }} /> происходит из библиотеки draftjs-to-html . Он принимает строку, такую как следующая This text is BOLD AND ITALIC with this wyziwyg. , и выводит строковое отображение на HTML-страницу, такую как следующая…

«Этот текст выделен ЖИРНЫМ ШРИФТОМ И КУРСИВОМ из wyziwyg».

Что я хочу иметь возможность, так это определить .length() отображаемую выходную строку html (выше). Для этого мне нужно посмотреть, есть ли способ console.log(dangerouslySetInnerHTML={{ __html: output }}) ;

1. Если вы собираетесь проголосовать, можете ли вы хотя бы оставить комментарий о том, почему?

2. Я думаю dangerouslySetInnerHTML , что это не функция, которую вы можете console.log обернуть ?! Хотя я не совсем понимаю ваш вопрос, я не голосовал против… Не могли бы вы объяснить более подробно?

3. @JosefWittmann добавил больше деталей в вопрос.

Ответ №1:

Если вы хотите получить длину текста из строки html, вы можете сделать следующее, поскольку вы предполагаете, что содержимое безопасно (поступает из пользовательского редактора):

 const getTextLength = (html) => {
  // This will never get added to the DOM.
  const element = document.createElement("div")
  element.innerHTML = html
  return element.textContent.length
}

// Some test cases.
const outputs = [
  "Some text",
  "<p>Some text</p>",
  "<p><strong>Some</strong> text</p>"
]

// Should ouput `9` for all test inputs.
console.log(outputs.map(getTextLength))

Развернуть фрагмент

1. как бы я передал входящие output данные, поступающие из реквизитов, в эту последнюю строку?

2. Это просто обычная вызываемая функция getTextLength . Если вы хотите записать длину вашего вывода, просто сделайте console.log(getTextLength(output)) где-нибудь в своем компоненте.