Simpele wysiwyg editor

[gebruiker35]

ik wil een SIMPELE, ja een SIMPELE, en niet zo een met 2.999 bestanden wysiwyg editor. Heb al een poos lopen zoeken met google, met als resultaat dat ik verschrikkelijk kwaad werd dat er zoveel zooi omheen wordt gemaakt. Ik wil dus echt een hele simpele, die in te bouwen valt in je eigen site. Wie heeft daar een oplossing voor?

 

[Johantrax]

Het feit dat veel wysiwyg's zo uitgebreid zijn, heeft te maken met compatibiliteit. In beperkte mate ten opzichte van de browser, maar meestal ten opzichte van de server.

Als je bij bvb FCKEditor alle files weghaalt die jouw systeem niet nodig heeft, blijft er ongeveer 1/7de over...

Maar goed: een simpele editor (3files max) vind je hier op sitemasters.

 

[gebruiker35]

en, compatible met IE en FF?

 

[gebruiker35]

ja dus, bedankt

 

[gebruiker35]

hij werkt netjes, alleen waar moet je nu op klikken om hem op te slaan? (heeeele domme vraag denk ik)

 

[Johantrax]

Heb je punt 5 (Opslaan) al eens gelezen ?

 

[gebruiker35]

jazeker, daar maak je een nieuwe functie aan, en dan istie ook gelijk gepost naar php.., dat klopt naar mijn idee niet echt!

 

[gebruiker35]

Heeft iemand nou nog antwoord want ik mag niet in een ander onderwerp posten dus ik wil hier antwoord wat ik (nog niet) krijg.

Mod: Die hoofdletters slaan nergens op! Daarnaast staat dit in de voorwaarden:

Plaats een bericht altijd maar 1 keer op de site.

Aangezien jouw vraag binnen de sectie Javascript over exact hetzelfde onderwerp ging heb ik die gesloten.

In plaats van zo'n onzin bericht te plaatsen had je ook gewoon je vraag kunnen herhalen.
Mocht je het niet met deze gang van zaken eens zijn nodig ik je van harte uit via thadevil@helpmij.nl

 

[Johantrax]

Het helpt niet om ongeduldig te zijn: ik ben ook maar iemand die hier in mijn vrije tijd helpt, net als iedereen. Het is niet ondenkbaar dat ik eens 1 of 2 dagen niet op helpmij ben, gewoonweg omdat ik iets anders te doen heb..

Van je topic in JavaScript heb ik begrepen dat je niet snapte dat in die laatste code, het formulier verzonden werd.

Ik zal de functie lijn per lijn even met jou overlopen:

function opslaan() {

De functie wordt gedefinieerd met de naam opslaan, zodat je deze later nog kan gebruiken wanneer nodig.

 var htmlCode = document.getElementById('iframe').contentWindow.document.body.innerHTML;

De inhoud van het iframe (= het vak waarin de gebruiker alles heeft aangepast) wordt in de variabele met naam htmlCode bewaard. Je kan dit zien alsof alle inhoud van dat iframe als 1 lange zin wordt bijgehouden.

 document.getElementById("areaCode").value = htmlCode;

De waarde van htmlCode wordt in het element areaCode geplaatst. Dus hier wordt die lange zin (die nog steeds gelijk is aan de inhoud van je iframe) in het verborgen tekstvak met naam areaCode gekopiëerd (zie het als de computer die de zin overtypt).

 document.getElementById("formCode").submit();

Hier wordt het formulier met id formCode verzonden. De functie submit is een onderdeel van elk formulier, en heeft als resultaat dat deze verstuurd wordt. Dit is hetzelfde als wanneer een gebruiker op de verzendknop van een zichtbaar formulier zou duwen. Op het moment dat de gebruiker op de verzendknop van een formulier heeft geduwen, wordt diezelfde submit()-functie opgeroepen en uitgevoerd.
Je zou je hier opnieuw kunnen voorstellen dat de computer voor jou op de knop duwt. Merk op dat het formulier geen verzendknop nodig heeft om deze functie te kunnen uitvoeren.

}

beëindigen van de functie

Als je nog problemen met dit systeem tegenkomt, mag je ze hier gerust stellen. Hou er alleen rekening mee dat het soms wel een volledige dag kan duren voor iemand je kan antwoorden..

Veel succes nog verder :thumb:

 

[gebruiker35]

sorry, sorry sorry.

er had al heel wat tegen gezeten in real life, dus was behoorlijk saggo geworden.

Ja, de functie begrijp ik. Dat heb je duidelijk uitgelegd. Hoe moet ik de functie nu aanroepen in mijn script? Ik heb het al geprobeerd met een knop, maar dat werkt niet...

 

[Johantrax]

Je kan zowel een knop als een gewone link gebruiken denkik.

Probeer eens door in je editor-pagina onder je iframe een link als volgt te zetten:

<a href="javascript:opslaan();">Klik hier om op te slaan</a>

 

[gebruiker35]

Super! Bedankt! It works!

 

[gebruiker35]

Het werkt super, heb het helemaal ingebouwd in mn php nu geweldig.
maar nog een vraagje, hoe kan ik een afbeelding invoegen?
want ik kan de afbeelding uitrekken e.d. alstie al in de bron staat.., maar niet toevoegen. hoe moet dit?

ik begrijp dit niet:

function hyperlink() {
 // per browser appart wegens de var url (kijk maar gewoon)
 if(window.navigator.appName == "Microsoft Internet Explorer"){
  document.getElementById("iframe").contentWindow.document.execCommand("createLink");
 }else{
  url = prompt("Voor de URL in:", "http://");

  document.getElementById("iframe").contentWindow.document.execCommand("createLink", false, url);
 }

als ik dit nu begrijp, dan kan ik er zelf misschien een afbeeldingen ding van bouwen...?

wil namelijk ook dat als je op de afbeelding klikt dat ie vergroot wordt enzo, wil het zelf graag inbouwen, als iemand van jullie nu kan uitleggenhoe?

 

[Johantrax]

Op de MSDN-site kan je een overzicht vinden van alle commando's die je via execCommand kan laten uitvoeren.

Van wat ik op het eerste zicht uit de code opmaak, is dat het commando createLink, zich anders gedraagt in Internet Explorer, waardoor er eerst gekeken wordt welke versie van het commando moet uitgevoerd worden.

Om een afbeelding in te voegen zou je naar het InsertImage commando kunnen kijken. Ikzelf heb nog nooit een editor als deze geschreven, dus wordt het een beetje testen hoe het commando juist werkt.

 

[gebruiker35]

ik heb het geprobeerd te begrijpen, maar ik kom er echt niet uit! (mijn engels is zeer slecht)

Heb er nog via google naar gezocht op die functie, maar ik kom er niet uit, wie kan mij stukje op weg helpen?

 

[gebruiker35]

Ben ik zo op de goede weg:

function afbeelding() {
 // per browser appart wegens de var url (kijk maar gewoon)
 if(window.navigator.appName == "Microsoft Internet Explorer"){
  document.getElementById("iframe").contentWindow.document.execCommand("InsertImage", true);
 }else{
  
  document.getElementById("iframe").contentWindow.document.execCommand("InsertImage", true);
 }
}

Het werkt alleen niet...

 

[gebruiker35]

Het werkt dus wel, maar nieti n firefox. Nu is dat niet zo erg, maar hij doet dus het volgende: hij plaatst de afbeelding in het textvak, maar het adres is gewoon je harde schijf. dat werkt natuurlijk niet! Hij moet 'm uploaden.. wie kan helpen?

 

[Johantrax]

Dan zal je je image-functie dus eerst van een uploadform moeten voorzien.. (en nu kom je meteen aan de reden waarom veel editors dus meerdere bestanden hebben....)