PDA

Просмотр полной версии : Картинка по центру без обтекания текстом


MerlinTwi
05.12.2006, 16:45
Имеем поле ввода (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, то получаем новые пустые строчки высотой с картинку.
Возможное решение этого бага: следить за положением курсора и принудительно его отодвигать с места за картинкой... но это не красиво :(

etc
05.12.2006, 16:57
Как насчёт CSS?

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

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

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

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

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

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

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

etc
05.12.2006, 17:52
нет, нормально редактируется...
У меня что-то глючит. Выложи рабочий пример.

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

MerlinTwi
05.12.2006, 18:19
А я бы всё-таки сделал несколько текстовых полей и картинки между ними
первая мысль такая и была, но учитывая объем кода, который придется написать для реализации прозрачного редактирования, чтобы юзер не догадался, что текстовых полей несколько... решил отказаться от этого.