Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webprogrammeren & scripting

[JS] Tekst invoegen op de huidige cursorpositie...

MarkVR
15 antwoorden
  • Op dit moment gebruik ik deze code om tags in te kunnen voegen in een tekstveld:

    [code:1:f7642f867e]
    <img src="bla.gif" onclick="insertTag(document.formname.textarea, '<b>', '</b>')">


    —- JavaScript code —-

    function insertTag(field, start, end)
    {
    field.value += starttag;
    field.value += endtag;
    field.focus();
    return true;
    }
    [/code:1:f7642f867e]


    Werkt, maar daar houdt het ook mee op. Zoals je ziet plakt ie alles er gewoon achteraan, en dan heeft zo'n functie niet echt veel nut.

    Hoe kan ik de tekst plaatsen om de huidige selectie? Dus als ik bv 'bla' selecteer in het tekstveld en op de image klik dat er dan '<b>bla</b>' van wordt gemaakt?


    Alvast bedankt,

    Mark

    [edit]
    Even de tags gewijzigd, forum wou ze omzetten :smile:
    [/edit]

    _________________
    Te audire no possum. Musa sapientum fixa est in aure.

    [ Dit Bericht is bewerkt door: MarkVR op 2002-01-23 12:14 ]
  • Je zou van de replace-functie gebruik kunnen maken:

    valueobject.replace("<b>" & waarde & "</b>", waarde)



    [ Dit Bericht is bewerkt door: dominicbout op 2002-01-23 17:17 ]
  • Hmm ja, ik heb het wel gemaakt, maar weet niet meer hoe en heb nu geen tijd om het uit te zoeken. Vanavond zal ik het proberen te vinden..

    Tot die tijd zit het ergens op deze pagina in de broncode verstopt in de functie getSelection. Het gaat om createRange(), dat is de js-functie die je ervoor moet gebruiken.

    http://www.jurriaan.org/htmledit/test_editor.html

    [ Dit Bericht is bewerkt door: Jurriaan R op 2002-01-23 17:44 ]
  • Dominic: dat is geen oplossing in dit geval, aangezien ik niet weet wat die waarde is of hoe vaak die voorkomt…

    Jurriaan: dat voorbeeld bekeek ik net toevallig, zal de code eens bestuderen, bedankt!
  • Ok, alle onnodige code eruit.., dan hou je zoiets over:

    [code:1:1dddc0f4fa]
    <html>
    <body>
    <form name="myform">
    <textarea name="txt" style="width:200px;height:150px;font-family:sans-serif;">Nos amice et nebevol, olestias acce augendas cum conscient to factor tum civiuda.</TEXTAREA>
    <input type=button value="klik" onclick="quote()">
    </form>
    <script type="text/javascript" language="Javascript">
    <!–

    function enterHTML(str)
    {
    var sel = document.selection;
    if (sel!=null)
    {
    var rng = sel.createRange();
    //showProperties(rng);
    if (rng!=null)
    rng.text=str;
    }
    }

    function quote()
    {
    var str = document.selection.createRange().text;
    enterHTML("[[["+str+"]]]";);
    }

    // –>
    </script>
    </body>
    </html>
    [/code:1:1dddc0f4fa]

    In IE6 werkt het zo. Het is sowieso IE-only en oorspronkelijk werkte het daadwerkelijke 'plakken' van de text niet zo:

    rng.text=str

    maar zo:

    rng.pasteHTML(str)

    Ik denk dat ze dat in IE 5.5 of 6 er weer uitgehaald hebben, of dat het een speciale functie van die edit-box is op die pagina. Je moet het dus wel even goed testen.


    [ Dit Bericht is bewerkt door: Jurriaan R op 2002-01-24 00:02 ]
  • Gisteren wat gerotzooid, kreeg het nog niet aan de praat, maar hier moet ik mee aan de slag kunnen, bedankt!


    Dat het IE-only is maakt niet zo gek veel uit, dit is puur een extraatje, echt afhankelijk is de site er niet van :smile:

    (mocht iemand daarentegen een crossbrowser methode weten (als die al bestaat) zou dat natuurlijk wel mooi zijn :smile:)
  • http://www.pbwizard.com/Articles/Moz_Range_Object_Article.htm, misschien heb je hier iets aan.

    /E
  • Interessant artikel! Alleen staat er ook in dat het juist in textarea's en inputs door een bug (nog) niet goed werkt in Mozilla :sad:

    [ Dit Bericht is bewerkt door: Jurriaan R op 2002-01-25 22:27 ]
  • Haha, Jurriaan, ik heb jouw code even geprobeerd, en werkt op zich goed, maar: moet je eens voor de grap ergens ernaast klikken zodat de focus van de textarea af gaat, en dan op de knop klikken… [[[]]]klik? :grin:

    Is er een manier om te bepalen of het textarea de focus heeft? Beetje lullig als je zomaar de halve pagina kan gaan quoten… :grin:
  • Heh.. oh, was dat niet de bedoeling?? :smile:

    Je kunt het hier voorkomen door te kijken of je wel daadwerkelijk text hebt geselecteerd..

    Maak van :
    if (rng!=null)

    dit:
    if (rng!=null && rng.htmlText!='')

    dan voorkom je dat als het goed is :smile:
  • Maar werkt dat ook als ik tekst in de pagina selecteer? Als je dat voorbeeld van jou bv neemt, heb ik onder </script> even 'test' gezet, als ik dat selecteer en op de knop druk wordt die tekst geedit, dan is rng lijkt mij niet null :smile:
  • Dan breiden we het geheel nog iets uit..

    Bovenaan de functie quote() moet nog het volgende zinnetje..

    document.myform.txt.focus();

    Zo wordt eerst het tekstvak gefocussed als die niet al gefocussed is, waardoor document.selection weer leeg raakt. Dus je hebt ook nog dat rng.htmlText!='' nodig..
  • Perfect, dankjewel!
  • Ok, beetje laat, maar ik heb de code nu pas ingebouwd. De oorspronkelijke code wou niet helemaal, heb na wat gerotzooi een eigen variant weten te maken die tot nu toe goed werkt, en misschien heeft iemand anders er ook nog wat aan:


    [code:1:574ad37a50]
    function addtag(field, starttag, endtag)
    {
    field.focus();

    var sel = document.selection.createRange();

    if (sel != null && sel.text != '')
    {
    sel.text = starttag + sel.text + endtag;
    }
    else
    {
    field.value += starttag + endtag;
    }

    field.focus();
    return true;
    }
    [/code:1:574ad37a50]
  • Heb je een link, ik zou graag het resultaat willen zien.

    D.

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.