[JS] PLaatjes in iFrame

[Verwijderd]

ik ben bezig met een online wysiwyg editor schrijven en gebruik daarvoor een iframe. Ook wil ik plaatjes hierin kunnen gooien. Wanneer ik hiervoor:

execCommand('InsertImage'); gebruik krijg ik een mooi pop-up schermpje en kan ik het plaatje kiezen. Nu is het probleem dat hij het plaatje in de volle grootte in het iframe gooit en dat is me net iets te groot.

Mooier zou dus zijn om via een tussenstap het desgewenste plaatje met imageMagick (wat werkt, en waar ik ook redelijk bekend mee ben) te compressen naar de gewenste size (die altijd vast is).

Wie helpt me aan een mooie oplossing? Kan ik bijvoorbeeld eerst de plaatjes uppen/compressen naar een tempdir op de webserver en dan met InsertImage die gebruiken?

[Verwijderd]

Is er niet iets mogelijk van execCommand('InsertImage', "img src="bestandsnaam" width="50" height="50"') Of kan ik met pasteHTML iets doen in de code?

Ik heb zo'n beetje alle uithoeken van internet afgezocht om dit op te lossen, maar ik kan de gouden tip helaas niet vinden. Alvast bedankt voor een tip.

[Zakkenwasser]

je kunt de plaatjes beter resizen naar kleiner. dit scheelt namelijk laad tijd, voor mensen met een ISDN/K56 verbinding.

Ik zelf doe het ook zo.

[TwoR]

Kan je de plaatjes niet al gewoon beter kleiner maken ??? dat is toch veel makkelijker en je hebt meteen geen probleem meer

[Verwijderd]

Ik wil dat de gebruikers locaal bijvoorbeeld een plaatje van bijv. 1024x768 in het iframe kunnen gooien en dat dit dan gescaled wordt naar bijv: 50x50 ofzo. Ik noem maar wat. Maar zo dat het in het iframe past op het scherm. Als ze nu alles geedit hebben naar wens en op submit klikken onderaan, dan wordt imagemagick er overheen gehaald en wordt alles gecomprimeerd enzo.

het gaat puur om dat zij grote plaatjes op een normale manier in een iframe kunnen zien tijdelijk, en niet dat bijvoorbeeld een hele tabel uit zijn verband wordt gerukt als ze een plaatje inserten.

[Verwijderd]

wat ik heb is een imagebrowser, die laad in een modaldialog op het moment dat een image is geselecteerd kan er ook een border en align ingesteld worden... hier is dus heel erg makkelijk de width en height aan toe te voegen.

enige probleem is dan dat je zelf even een soort van imagebrowser moet maken waar men ook bestanden kan uploaden en verwijderen.

code:

function insertImage()
{
  if (isHTMLMode){alert("Please uncheck 'Edit HTML'");return;}
  var sImgSrc = showModalDialog("imgbrowser/default.html","","font-family:Verdana; font-size:12; dialogWidth:56em; dialogHeight:30em; status:no; scroll:no;" );
  if(sImgSrc!=null) {
    var tr = idContent.document.selection.createRange();
    tr.pasteHTML(sImgSrc);
  }
}

en dan vervolgens in de modaldialog

code:

function closewin() {
  var imgname  = imagename.value;
  var iborder  = imgborder.value;
  var ialign   = imgalign.value;

  if (ialign == null) {
    ialign="";
  }
  else {
    ialign = "align=\""+ialign+"\"";
  }
  window.returnValue = "[img]\""+imgname+"\"[/img]";

  window.close();
}

[Verwijderd]

Hey dat is wel een goeie denk ik. Ik ga daar maar eens mee stoeien. Ondertussen zijn alle tips natuurlijk welkom.

Zo zat ik te denken om in een functie met execCommand(insertImage) een plaatje in te voeren in een iFrame, vervolgens de code in het iFrame te checken op [img]"blabla"[/img], en dat te veranderen in [img]"blabla"[/img] Helaas weet ik niet hoe ik terplekke met javascript een iframe op inhoud kan checken. Moet ik dan eerst weer kopieren naar een textarea?

[Verwijderd]

Tjabber, kun je mij wat meer vertellen over hoe je die imagebrowser precies gemaakt hebt?
Ik begijp uit je verhaal dat je met een pop-up werkt waarin je een afbeelding kan kiezen. Hoe wordt deze dan weer doorgegeven aan de originele pagina?
Bedankt voor tips.

[pasz]

geen oplossing voor je probleem, maar wel een mooi voorbeeld van een online editor :
http://sourceforge.net/projects/richtext/

[Verwijderd]

Bedankt voor het url, ik had hem al gezien. Probleem bij die is dat je niet kan browsen naar een plaatje.

Het enige wat ik in principe nodig heb is een functie waarin execCommand(insertImage) wordt aangeroepen en waarin het geselecteerde plaatje met width="100" en height="100" in het iframe wordt gezet.