[CMS] createRange() op controls

zondag 20 april 2003 19:36

*zucht*

Het gebruik van document.execCommand i.c.m. CreateLink om een link te maken vind ik iets te simplistisch

CreateLink gebruiken lost je probleem op, kun je alles mee wat je wilt. Het optionele argument van execCommand is icm CreateLink overigens de url van de link. De target kun je na het toepassen van createlink aanpassen.

Zonder createlink kun je geen links maken van control-collections zoals afbeeldingen.

Bijvoorbeeld:

code:

var sel = jouwEditableDing.document.selection;
var tr  = sel.createRange();
tr.execCommand ("CreateLink", false, url);

// Open in nieuw venster: 
if (sel.type == "Control")
    tr(0).parentElement.target = "_blank";
else
    tr.parentElement().target = "_blank";

[ Voor 57% gewijzigd door Bosmonster op 20-04-2003 09:20 ]

Acties:

zondag 20 april 2003 22:07

Topicstarter

Ok je hebt inderdaad gelijk, ik heb er niet bij stilgestaan dat ik de interface op false kan zetten van CreateLink.

Ik zit nu met hetvolgende probleem; ik krijg een error bij de volgende code:

code:

if (idContent.document.selection.type.toLowerCase() == "control
       var linkhref = selection(0).parentElement().href;
                   var linktarget = selection(0).parentElement().target;
                   var linktext = selection(0).text;
}else{
       var linkhref = selection.parentElement().href; 
                   var linktarget = selection.parentElement().target; 
                   var linktext = selection.text;
}

Foutmelding: Object doesn't support this action op regels 2, 3 en 4. Enig idee hoe ik dit op kan lossen?

[ Voor 12% gewijzigd door UniCache2 op 20-04-2003 19:37 . Reden: layout vernaggelijng ]

Acties:

bRight

digitaal

misschien ff die if afsluiten?

code:

1	if (idContent.document.selection.type.toLowerCase() == "control")

maandag 21 april 2003 02:12

Acties:

maandag 21 april 2003 03:32

Topicstarter

AArsgier schreef op 20 april 2003 @ 22:07:
misschien ff die if afsluiten?
code:
1
if (idContent.document.selection.type.toLowerCase() == "control")

Helaas hebben we hier te maken met een copy - paste foutje

Het werkt dus nog steeds niet.. Ik kan om de een of andere manier van een geselecteerd control geen parentelement opvragen

Acties:

2

Probeer het eens met setAttribute()

maandag 21 april 2003 12:53

Acties:

woensdag 23 april 2003 10:21

*zucht*

vraag me niet waarom, maar de ene keer is het parentElement (property) en de andere keer weer parentElement() (method).

Bij de controlrange is het dus parentElement als property

Zie ook mijn stukje code.

Acties:

woensdag 23 april 2003 14:14

Topicstarter

Inderdaad, je hebt gelijk. Vreemd dat het dan weer een method moet zijn. Even voor de goede orde, hier de correcte code:

code:

if (idContent.document.selection.type.toLowerCase() == "control"
       var linkhref = selection(0).parentElement.href;
                   var linktarget = selection(0).parentElement.target;
}else{
       var linkhref = selection.parentElement().href; 
                   var linktarget = selection.parentElement().target; 
}

[ Voor 3% gewijzigd door UniCache2 op 23-04-2003 14:16 ]

Acties:

Verwijderd

Ja bosmonster dat heb ik ook nooit begrepen. Wanneer is het nu element.parentelement; en wanneer is het nu element.parentelement();

Hetzelfde met createRange(). De ene keer is het createRange() en ik heb zelfs ook al createRange()(0) gezien.

woensdag 23 april 2003 14:26

Acties:

donderdag 24 april 2003 11:39

*zucht*

het createRange()(0) is geen echte method. Als createRange een controlRange teruggeeft is dit een control-collection. De elementen hierin kun je opvragen met (i). Als je die samenvoegt krijg je een constructie als createRange()(0). De code kun je voor overzichtelijkheid dan beter een beetje uit elkaar trekken.

Waarom dat dan een method aanroep is (0) ipv een simpele Array [0] blijft mij dan wel weer een raadsel

Als je met die ranges aan de gang gaat in IE loop je tegen de meest vage dingen aan in ieder geval

Alle informatie hierover (welke methods en properties etc bijvoorbeeld) kun je gemakkelijk napluizen op MSDN: http://msdn.microsoft.com

[ Voor 12% gewijzigd door Bosmonster op 23-04-2003 14:28 ]

Acties:

Aangezien dit topic over CMS gaat, Heb ik de volgende vraag:

Ik heb een editable iframe, hierin wil ik een link toevoegen,
ik gebruik hiervoor de volgende functie:

code:

function insert_hyperlink(link_url, link_text) {
    var selectionRange;
    var htmltopaste;
    htmltopaste = "<A HREF=" + link_url + ">" + link_text + "</A>";
    selectionRange = document.frames(0).document.selection.createRange().duplicate();
    selectionRange.pasteHTML(htmltopaste);
    }

Tijdens de laatste functie (pasteHTML) plakt ie dus de link in de tekst van de iframe. De innerHTML wordt dan echter een <A HREF> waarin het hele pad staat dus inclusief domeinnaam zeg maar, ik wil dat er bijvoorbeeld <A HREF=”index.php”> komt te staan i.p.v. <A HREF=”http://pc-martien/new/cms/index.php”>

Weet iemand hier een oplossing voor?

donderdag 24 april 2003 11:55

Acties:

donderdag 24 april 2003 12:12

*zucht*

A. Waarom dat gedoe met duplicate() ??
B. Lijkt me dat dat gewoon de url is die je meekrijgt als link_url

C. Lees deze topic en kom erachter dat je beter gewoon execCommand("CreateLink") kunt gebruiken

Acties:

Als ik als link_url bijvoorbeeld 'index.php' meegeef dan word dat in de innerHTML 'http://pc-martien/new/cms/index.php' dit wil ik niet omdat de gegenereerde inhoud opgeroepen word vanuit een andere directory en dan klopt de link niet meer. "CreateLink" heeft hetzelfde resultaat!

Rekeninghoudend met het feit dat de innerHTML de code is die IE ervan heeft gemaakt, (voorbeeld: <b>vet word in innerHTML <b>vet</b>) is er een andere methode om bovenstaande te omzeilen of zal ik de html met php moeten opschonen?
Dus een php-functie moeten maken die het volledige pad uit de links in de html code stript?

De innerHTML wordt dus opgeslagen in een database

[ Voor 10% gewijzigd door Pin0 op 24-04-2003 12:15 ]

donderdag 24 april 2003 13:39

Acties:

donderdag 24 april 2003 15:26

*zucht*

Vreemd, want heb er zelf totaal geen last van.. krijg gewoon de link zoals ik hem zelf opgeef

Acties:

Gebruik je dan ook innerHTML? want volgens mij zit daar het probleem.
Ik bedoel, hoe lees jij dan de html-code uit je editor? Ik geef de waarde van de innerHTML door aan een waarde van mijn formulier op het moment dat men op "opslaan" klikt.

donderdag 24 april 2003 15:30

Acties:

donderdag 24 april 2003 16:24

*zucht*

Dat doe ik ook.. daar zit het probleem niet. IE past je code aan op het moment dat jij iets in je iframe wijzigt, niet als je het uitleest.

Acties:

Ja als ik iets wijzig in mijn iframe dan past IE de code aan, waarna ik de innerHTML uitlees en opsla.
IE geeft geldige html code terug als men innerHTML gebruikt. zo wordt <a href="index.php">home</a> <a href="http://localhost/directory/cms/index.php">home</a>
(dit kan je testen door in een html pagina een link te maken naar bijv. index2.html in de statusbalk staat dan http://www.domein.nl/index2.html terwijl er in de broncode niet naar het domein verwezen wordt)

De laatst genoemde link krijg ik dus in de variabele als ik innerHTML aan die variabele toeken.

Ik ben erg benieuwd hoe jij dan wel de goede code opslaat

donderdag 24 april 2003 16:48

Acties:

vrijdag 25 april 2003 08:53

Topicstarter

Pin0 schreef op 24 April 2003 @ 16:24:
Ja als ik iets wijzig in mijn iframe dan past IE de code aan, waarna ik de innerHTML uitlees en opsla.
IE geeft geldige html code terug als men innerHTML gebruikt. zo wordt <a href="index.php">home</a> <a href="http://localhost/directory/cms/index.php">home</a>
(dit kan je testen door in een html pagina een link te maken naar bijv. index2.html in de statusbalk staat dan http://www.domein.nl/index2.html terwijl er in de broncode niet naar het domein verwezen wordt)

De laatst genoemde link krijg ik dus in de variabele als ik innerHTML aan die variabele toeken.

Ik ben erg benieuwd hoe jij dan wel de goede code opslaat

Klopt, ik heb hier ook last van. Tot nu toe heb ik dit maar gewoon genegeerd, maar het is natuurlijk niet zo'n nette oplossing. Het ligt overigens aan de contenteditable frame, niet een de pastHTML functie. Ik heb het bij alle plaatjes en URL's in mijn editable frame, als ik naar de html code ga en weer terug switch heeft hij alle URL's 'netjes gemaakt', met physieke paden. Het lijkt erop dat hij de HTML dus aanpast. Soms haalt ie quotes weg bij bijvoorbeeld een Href van een anchor tag e.d....

Acties:

Dat is dus precies wat mijn probleem ook is, hoe heb je dit opgelost?
Ik kan me voorstellen dat je handmatig met javascript de html code opschoond voordat je één en ander opslaat, of je zou met php één en ander in je string kunnen vervangen.

vrijdag 25 april 2003 09:21

Acties:

vrijdag 25 april 2003 09:56

*zucht*

Pin0 schreef op 24 April 2003 @ 16:24:
Ja als ik iets wijzig in mijn iframe dan past IE de code aan, waarna ik de innerHTML uitlees en opsla.
IE geeft geldige html code terug als men innerHTML gebruikt. zo wordt home home
(dit kan je testen door in een html pagina een link te maken naar bijv. index2.html in de statusbalk staat dan http://www.domein.nl/index2.html terwijl er in de broncode niet naar het domein verwezen wordt)

De laatst genoemde link krijg ik dus in de variabele als ik innerHTML aan die variabele toeken.

Ik ben erg benieuwd hoe jij dan wel de goede code opslaat

Je noemt nu iets heel anders. In de broncode staat het gewoon goed.. in de statusbalk converteert IE altijd de paden naar een volledig pad. Dit is standaard IE gedrag hoor

Heeft niks met CMS/execCommand/iframes/content-editable/etc te maken

Acties:

Wat ik ook doe ik krijg altijd het volledige pad in mijn innerHTML, voor correcte werking zal ik op één of andere manier deze paden moeten aanpassen/vervangen in de innerHTML-string om het zo maar even te noemen.

Ik heb hier en daar gekeken in de broncode van andere CMS-en en bij enkele kwam ik er achter dat ze de volledige paden vervangen. Ik denk dat er niets anders op zit dan met een stuk javascript of php de HTML tags in de string aan te passen.

vrijdag 25 april 2003 19:10

Acties:

zaterdag 26 april 2003 11:33

Topicstarter

Bosmonster schreef op 25 April 2003 @ 09:21:
[...]

Je noemt nu iets heel anders. In de broncode staat het gewoon goed.. in de statusbalk converteert IE altijd de paden naar een volledig pad. Dit is standaard IE gedrag hoor Heeft niks met CMS/execCommand/iframes/content-editable/etc te maken

Volgens mij bedoel ik nu precies hetzelfde als pino, als ik de html code van die pagina opsla in een database heeft ie er allemaal fysieke paden van gemaakt...

Acties:

zaterdag 26 april 2003 14:24

*zucht*

Net even onze CMS code getest, maar ik heb dus echt nergens last van. Ik gebruik voor het maken van de links execCommand("CreateLink", false, url), zoals in het eerdere code-voorbeeld te zien. De gegenereerde code gebruikt gewoon de url exact zoals ik hem opgeef. Vervolgens lees ik uiteraard ook de innerHTML uit om deze op te slaan. Deze kopieer ik simpelweg naar een textarea.

Mogelijk maakt het door de clientside techniek nog uit welke browser je gebruikt? Ik gebruik persoonlijk IE6?

Ik ben in ieder geval erg geinteresseerd naar de oorzaak van het probleem!

[ Voor 8% gewijzigd door Bosmonster op 26-04-2003 11:34 ]

Acties:

maandag 28 april 2003 00:24

Topicstarter

Het probleem wat ik bedoel is het volgende:

ga naar http://www.aspalliance.com/Yusuf/Article10a.asp en klik op de 'link' knop. Vul in b.v.
"index.htm". Als je nu op edit HTML klikt dan zie je in de source netjes een anchor tag met als Href index.htm. Switch nu terug naar de design view en meteen weer naar de edit HTML view. Nu zie je dat de URL angepast is...

Acties:

maandag 28 april 2003 09:33

Topicstarter

Bosmonster, jij hebt geen last van dit probleem? Of dacht je dat ik iets anders bedoelde? Pin0, had je het over dit verschijnsel of over iets anders? ben benieuwd

Acties:

maandag 28 april 2003 09:51

*zucht*

Geen last van, maar ik heb dan ook geen view source optie. Die vind ik leuk voor een ontwikkelaar, maar nergens voor nodig als je werkelijk een rich text edit wilt voor je domme gebruikers

Als ik het ga forceren (dus het wegschrijven en weer lezen van content in de editor, zoals in een view/edit source optie), dan worden mijn URL's ook aangepast.

[ Voor 38% gewijzigd door Bosmonster op 28-04-2003 09:44 ]

Acties:

Ja dat is precief wat ik bedoel!, het gebeurt dus als je er geen http:// voor zet.
Heb zojuist even gemaild met iemand die ook iets dergelijks heeft gemaakt, en hij onderkent dit probleem, echter hij laat de paden staan en pas als de domeinnaam veranderd dan past ie met een script alles (in de database) aan.

Die view source gaat bij mij ook weg, echter wanneer ik een functie als pasteHTML gebruik maakt ie ook de paden "mooi"

[ Voor 17% gewijzigd door Pin0 op 28-04-2003 09:53 ]

maandag 28 april 2003 10:29

Acties:

maandag 28 april 2003 11:18

*zucht*

Hmm.. ik gerbuik pasteHTML met paden alleen bij images en daar zie ik het nu ook. Tis bij ons echter geen probleem, aangezien het domein nooit verandert (of zelden.. en zo ja dan gooien we er wel een script overheen).

Met links gebruik ik CreateLink en doet ie het niet direct.

Acties:

Klopt met createLink heb ik het nu ook geprobeert en dat gaat in eerste instantie wel goed.
Totdat je door één of andere functie de innerHTML weel laat aanpassen

maandag 28 april 2003 11:49

Acties:

maandag 28 april 2003 12:46

*zucht*

Dan moet je dat niet doen

Acties:

Verwijderd

Gewoon bij het saven die url er uit laten filteren..

maandag 28 april 2003 16:45

Acties:

Precies, Ik ga een php functie scrijven die de html helemaal opschoont.

maandag 28 april 2003 17:43

Acties:

Yo-han

nope.

Ja ken het probleem! Heb er ook nog steeds geen oploosing voor, maar laat php alle pagina's uitlezen die op het domein aanwezig zijn en echo die in een pull down menu.

Dan link ik gewoon de url naar die pagina

dinsdag 29 april 2003 09:46

Acties:

dinsdag 29 april 2003 12:26

*zucht*

Een groter probleem wat ik heb met de editor is dat mensen vanuit Word kunnen plakken. Wat extreem bagger html code is, maar belangrijker: alle beperkingen wat betreft stijl omzeilt...

Gebruikers kunnen geen lettertypes e.d. veranderen, omdat het anders qua vormgeving natuurlijk een puinhoop zou worden... maar vanuit Word plakken overroelt alles

Maar hier post ik nog wel een keer een topicje over

Tis me namelijk nog niet gelukt om het paste-event goed af te vangen...

Acties:

Php heeft functies om overbodige tags eruit te halen:

Hieronder een voorbeeld, eerste parameter is de string met html de tweede parameter zijn de tags die wel zijn toegestaan.

code:

1	$var_htmlcontent = strip_tags($var_htmlcontent, '<table><LI><UL><tr><td><strong><a><b><i><u><br><hr><p>');

dinsdag 29 april 2003 14:07

Acties:

Bluestorm

ja... maar vaak wil je niet de hele tag weghebben... alleen door word toegevoegde stijlen, rare attributen, etc.

Tenminste... dat [ denk / zie / weet ] ik... | Javascript obfuscator | foto's en video's uploaden

dinsdag 29 april 2003 14:43

Acties:

dinsdag 29 april 2003 17:38

*zucht*

Sterker nog: Ik wil helemaal niet dat mensen html kunnen plakken vanuit Word

Ik wil dat ie dit dan automatisch plakt als platte tekst. Zodat mensen dit dan weer zelf op kunnen maken met de editor en haar beperkende maatregelen

Nu lukt me dit wel via de paste-knop.. maar het lukt me niet om ctrl-v enzo af te vangen. HEt echte paste-event dus.

Acties:

2

Bosmonster schreef op 29 april 2003 @ 14:43:Nu lukt me dit wel via de paste-knop.. maar het lukt me niet om ctrl-v enzo af te vangen. HEt echte paste-event dus.

Het 'filteren' van word opmaak kun je met reguliere expressies doen, ik heb daar wel eens wat voor gepost, zal straks even kijken of ik het nog kan vinden. Verder kun je (iig in IE) het pasten zo afvangen:

HTML:

<html>
  <head>
    <style type="text/css">
    #textField {
      height: 300px;
      width: 400px;
      border: solid 1px #000;
    }
    </style>
    <script>
      pasta=0;
      function catchPaste()
      {
      if(pasta==1)
      {
        alert('Zeg doe dat even lekker thuis.');
        pasta=0;
      }
    }
    </script>   
  </head>
  <body>
    <div id="textField"
         contenteditable
         onpaste="pasta=1;"
         onkeyup="catchPaste();" onmousemove="catchPaste();"></div>
  </body>  
</html>

[ Voor 26% gewijzigd door 2 op 29-04-2003 17:43 ]

dinsdag 29 april 2003 19:53

Acties:

donderdag 1 mei 2003 18:55

*zucht*

Hmm.. thanks 2

Daar ga ik eens ff mee experimenteren.

Het lukte mij al niet gewoon via onpaste en onbeforepaste etc.. maar jouw aanpak is weer iets anders..

Acties:

donderdag 1 mei 2003 20:01

Topicstarter

Ja inderdaad, dit is ook een bekend probleem. Een wat minder mooie oplossing is om het filtern al op de client te laten plaatsvinden. Ikzelf doe dit nu zo, omdat ik nog niet een mooie functie heb gevonden om dit via het clipboard te filteren (via de bovenstaande manier). Voor meer informatie over de Word - HTML filter zie hier:
http://office.microsoft.c...2000/wmultiplepeeler.aspx

Nu zag ik op deze pagina ook de volgende link staan:
http://office.microsoft.com/Assistance/2000/wDosPeeler.aspx
Dit filter kan dus vanaf de commandprompt aangeroepen worden.

Misschien is het mogelijk om via een VB component dit programma aan te roepen om het zo werkend te krijgen in asp.net?

Acties: