Форум Flasher.ru - Картинка по центру без обтекания текстом

Форум Flasher.ru (http://www.flasher.ru/forum/index.php)

- ActionScript 3.0 (http://www.flasher.ru/forum/forumdisplay.php?f=83)

- - Картинка по центру без обтекания текстом (http://www.flasher.ru/forum/showthread.php?t=88998)

Картинка по центру без обтекания текстом

Имеем поле ввода (InputText) в него записывается некий html-шаблон и дается возможность пользователю редактировать. Шаблон подразумевает наличие 1-ой и более картинок, расположенных по центру текстового поля и без обтекания текстом.
Объявляется конкурс на лучшее решение :)
Учтите, основная проблема в том, что поле редактируемое, т.е. разместить дцать BR после картинки не катит, пользователь может их удалить.

Начну с себя.
1. Чтобы разместить картинку по центру, надо заюзать hspace, прописать туда половину свободных пикселей (размеры картинки и текстового поля заранее известны)
2. Чтобы избавиться от текста справа (который становится невидимым т.к. справа от картинки уже край текстового поля, но упорно туда залезает), можно расположить картинку в textformat с leading="высота картинки + 4"
Пример:

Код:

// this.txt - редактируемое текстовое поле

var w:Number = 320; // размеры картинки

var h:Number = 180;



this.txt.htmlText = "<b>Заголовок</b><BR>Текст какой-то"+

'<BR><textformat leading="'+(h+4)+'">'+

'<img width="'+w+'" height="'+h+'" src="ring.jpg" hspace="'+

((this.txt.width-w)/2-4)+'" id="m1"></textformat><BR>'+

"Продолжение текста...";

Недостатки: можно поставить курсор справа от картинки (мышкой или стрелками на клавиатуре) и если туда вбивать текст, то он выглядит как набор точек, а если жать Enter, то получаем новые пустые строчки высотой с картинку.
Возможное решение этого бага: следить за положением курсора и принудительно его отодвигать с места за картинкой... но это не красиво :(

Как насчёт CSS?

Плохо с CSS... нельзя одновременно использовать и setTextFormat и CSS. Вот такое непонятное ограничение :(

гм, очень плохо, а то я тебе хотел предложить загонять картинку в <p> и ставить ему стиль, в котором font-size равен высоте картинки.

И ещё: если ставить htmlText, то поле сразу перестает быть редактируемым.

> в котором font-size равен высоте картинки.
есть ограничение на максимальный размер шрифта.

> если ставить htmlText, то поле сразу перестает быть редактируемым.
нет, нормально редактируется...

Цитата:

Сообщение от MerlinTwi

Плохо с CSS... нельзя одновременно использовать и setTextFormat и CSS. Вот такое непонятное ограничение :(

Ну, вообщем-то, понятно почему, внутри оно использует какой-то один формат (смутно догадываюсь какой). А зачем использовать setTextFormat? Вроде для редактирования достаточно setNewTextFormat...

А я бы всё-таки сделал несколько текстовых полей и картинки между ними - легко добавлять/удалять текст просто сдвигая структуру по изменению размера полей.
Надо только организовать кросс-выделение между полями (должно получиться). Опять же легко найти какие картинки при этом выделяются между полями. Можно даже организовать перетаскивание картинок в поле текста (перекидыванием строк из поля в поле и сдвигом картинки).
А как это сериализовать наружу - уже от задачи зависит. Можно хранить и в едином html, а для редактирования разбивать в вышеуказанную структуру.
:)

Цитата:

Сообщение от MerlinTwi

нет, нормально редактируется...

У меня что-то глючит. Выложи рабочий пример.

> У меня что-то глючит. Выложи рабочий пример.
В первом посте рабочий пример. Приаттачиваю fla

Цитата:

Сообщение от Dendroid

А я бы всё-таки сделал несколько текстовых полей и картинки между ними

первая мысль такая и была, но учитывая объем кода, который придется написать для реализации прозрачного редактирования, чтобы юзер не догадался, что текстовых полей несколько... решил отказаться от этого.