[JS]execCommand InsertImage align = .....

[BierPul]

Ik heb via execCommand een editortje gemaakt.

Als ik nu een plaatje erin wil zetten kan ik hem keurig in mn div verplaatsen ed.

Maar ik wil eigenlijk dat ik kan kiezen of ik hem links rechts uitgelijnd wil hebben (dus daadwerkelijk naast de text)

Ik heb ff op msdn gezocht maar kongene oplissing te vinden

Kan dit uberhaupt wel

[André]

Op maandag 08 juli 2002 16:02 schreef LOST_GUNT het volgende:
Ik heb via execCommand een editortje gemaakt.

Wat voor editortje?

Als ik nu een plaatje erin wil zetten kan ik hem keurig in mn div verplaatsen ed.

Als je hem waarin wil zetten?

Maar ik wil eigenlijk dat ik kan kiezen of ik hem links rechts uitgelijnd wil hebben (dus daadwerkelijk naast de text)

Code of url beschikbaar?

Beetje onduidelijke vraag zo. Kun je het even toelichten.

[BierPul]

Ik heb een div

code:

<div contenteditable id="divveld" class="divfield" style="width:400px; height:250px; border:1px solid #000000;"></div></td>

dan roep ik via een formpje met een text veld waar de waarde van het pad naar het plaatje in staat de volgende functie aan

code:

document.execCommand("InsertImage", false, plaatjePAD);

Nu vraag ik me af of ik doormiddel van een aantal vars in mn form dit meer kan manipuleren door bijv een alt text en een align opdracht mee te geven

[Verwijderd]

Maar ik wil eigenlijk dat ik kan kiezen of ik hem links rechts uitgelijnd wil hebben (dus daadwerkelijk naast de text)

Ik heb ff op msdn gezocht maar kongene oplissing te vinden

Kan dit uberhaupt wel

Yep, dit kan wel. Nadat je met de eerste execCommand een plaatje heb ingevoegd selecteer je het plaatje zodat die van die witte vlakjes krijgt aan de hoekjes. Dan laat je nog een keer het execCommand er op los maar dan met UI aan, dus:

code:

document.execCommand("InsertImage", true);

Dus zonder een URL van een afbeelding, dan krijg je een popup waar je allerlei instellingen kunt veranderen aan de afbeelding, ook alignment.

[BierPul]

Yep dat werkt top

Maar ik wil het liever samen in een functie maar daar zal vast wel iets op te verzinnen zijn

[Verwijderd]

Maar ik wil het liever samen in een functie maar daar zal vast wel iets op te verzinnen zijn

Voor een CMS editor dat ik ooit eens gemaakt heb, heb ik dat ook nooit helemaal kunnen oplossen. Ik heb er iets anders tegenaan gegegooid.

Nadat de gebruikers van het systeem hebben aangegeven welke afbeelding ze willen gebruiken, en welke eigenschappen deze afbeelding moet hebben, zet een stuk javascript de HTML code inelkaar. Daarna wordt er met de functie insertAdjacentHTML de afbeelding er in gezet. Je kan echter alleen kiezen voor het begin van het object, en het einde. Maar goed, later is ie te verslepen.

Dus bijvoorbeeld:

code:

object.insertAdjacentHTML("afterBegin", "<img src='afbeelding.gif' 
alt='ik wil alt tekst'>");

Je kan op deze wijze allerlei eigenschappen meegeven aan de afbeelding, bijvoorbeeld alignment, vspace, hspace, id, style, etc. Gebruik alleen "afterBegin" en "beforeEnd", anders plettert IE je afbeelding net voor of net na je editable object.

Het is een brakke oplossing, maar het werkt

Check ook deze url voor de insertAdjacentHTML functie.

[BierPul]

Hmm ik heb volgens mij wel eens gezien dat het plaatje op de plaats van de cursor terrcht komt

Het moet volgens mij kunnen , beetje eigenwijs

Maar es ff scrippies spitten

[Morrar]

Ok, je kunt het image objectje na de execcommand weer opvragen, zo heb ik het althans in mijn eigen editortje gedaan. Daarna kun je ofwel een beetje spoken met de js-attribuutjes (in het style child-object), of van mijn part keihard de outerHTML editten etc...

Dit is in ieder geval de manier om met JS een referentie naar het net ingevoegde plaatje te krijgen:

//Referentie naar de editable layer
var EditLayer = document.all.MyEditorBaseLayer;

//Eventueel even actief maken
EditLayer.setActive();

//ControlRange object maken van huidige selectie (=plaatje)
var TempCR = EditLayer.document.selection.createRange();

//Eerste item in de CR is het ingevoegde plaatje
var ImElem = TempCR.item(0);

//Bordertje doen?
ImElem.style.border = "1px solid black";

Mijn eigenlijke editor is object georienteerd, maar zo werkt het ook neem ik aan...

Suc6

[BierPul]

Ok top ik ga er even mee rommelen, ik zat misschien wel heel simpel te denken.

Ik hoopte gewoon een HTML tag te kunnen maken, door hem samen te stellen in een form ofzow

iets als

code:

[img]"pad"[/img]

En die waarde terug terugschrijven naar mn DIV

[Morrar]

Kan ook wel:

//Referentie naar de editable layer
var EditLayer = document.all.MyEditorBaseLayer;

//Eventueel even actief maken
EditLayer.setActive();

//TextRange object maken van huidige selectie (=cursorpos)
//Ga er voor gemak vanuit dat nix geselecteerd is,
//en zeker geen plaatje oid...
var TempTR = EditLayer.document.selection.createRange();

//En dan op de plaats van de cursor de HTML-code plakken
TempTR.pasteHTML("[img]'blaat.gif'[/img]");

Zo dan? :-)
Als er wel wat geselecteerd is moet je dat eerst ff opvragen via TempTR.htmlText en dat dus weer mee terugplakken bijvoorbeeld. Ook moet je eigenlijk ff checken of er wel een TextRange object aangemaakt is... Mag je die zelf uitvogelen (msdn.microsoft.com).

Suc6

[BierPul]

Thnx ik ga ff snuffelen

[k0ewl]

Sorry voor het omhoog kicken van dit topic, maar ik had een vraag over het seecteren van het IMG object met javascript.

Ik ben dus ook bezig met een editor en ik wilde dus gebruik maken van de front end van javascript voor het IMG object door zodra het plaatje is toegevoegd, het automatisch te selecteren en dan nogmaals de execCommand aan te roepen. Maar ik weet niet hoe ik het object moet selecteren.

Kan iemand me daarmee helpen?