HTML, Javascript - разделить слово, которое шире, чем iFrame, вместо создания полосы прокрутки

Я использую ExecCommand для создания очень простого редактора WYSIWYG, поскольку в будущем проекте мне потребуется его создать (поэтому, пожалуйста, не говорите мне что-то вроде CKEditor или tinyMCE). Все работает нормально при обычном использовании. Но если вы введете слово, которое шире, чем iFrame, оно не будет разделено. Вместо этого в iFrame просто добавляется полоса прокрутки. Вот видео, показывающее мою проблему: https://vimeo.com/42699618 Итак, мне интересно, как проще всего это предотвратить?

И вот код:

    <script language="JavaScript">
$(document).ready(function(e) { 
    textArea.document.designMode = 'On'; 

    $("#bold").click(makeBold);
    $("#italic").click(makeItalic);

    function makeBold() {
        textArea.document.execCommand('bold', true, null);
        $("#textArea").focus();
    }
    function makeItalic() {
        textArea.document.execCommand('italic', false, null);
        $("#textArea").focus();
    }
});
</script>
<body>

    <iframe id="textArea" style="width: 700px; height:400px;"></iframe>
Источник

1 ответ

Решение

По сути, ваша существующая система заботится о первой части, переводя слово на новую строку. Вы выбрали более легкую версию:)

Когда вы отрисовываете свое слово, вам нужно разбить строку на несколько строк в зависимости от длины слова и ширины вашего поля.

Убедитесь, что вы разделяете только слово в представлении, а не слово в данных! Если пользователь изменит размер представления, вы не захотите попытаться снова собрать данные вместе:p

Шаги: Каждый раз, когда вы визуализируете, каждое слово проверяется, чтобы увидеть, превышает ли оно ширину представления, если это так, разделить его, отобразить части по порядку и продолжить.

Источник
Другие вопросы по тегам