fontpicker text

Door Paul Weiss op 06-03-2022 11:29

2.696 views

Hallo iedereen. Ik heb onderstaande javascript met een colorpicker button. Het werkt allemaal. Er wordt netjes een styling toegevoegd voor de geselcteerde stuk tekst. echter als ik de kleur voor de 2e keer wijzig wordt er een styling toegevoegd. de eerdere zou eigenlijk verwijderd moeten worden. iemand enig idee hoe i dit voor elkaar moet krijgen. Onderstaande de gehele code.




<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<h1 contenteditable="plaintext-only" id="titel1-rijzoek">Test1</h1>
<h2 contenteditable="plaintext-only" id="titel2-rijzoek">Test2</h2>

<label for="fontkleur1">Kies fontkleur</label><br>
<input name="MyColorPicker" type="color" id="ColorPicker1" />
 
<script>
var box = document.getElementById('titel1-rijzoek');
let colorpicker = document.getElementById('ColorPicker1');
colorpicker.addEventListener('input', function(e) {
  selObj = window.getSelection()
  var selection = window.getSelection().getRangeAt(0);
  var selectedText = selection.extractContents();
  var span = document.createElement('span');
  span.style.color = e.target.value;
  span.className = 'selected-text';
  span.appendChild(selectedText);
  selection.insertNode(span);
})
</script>

[size=xsmall]Toevoeging op 06/03/2022 13:54:05:[/size]

Ik was niet helemaal duidelijk zie ik. bij elke kleurwijziging wordt er een nieuwe styling toegevoegd. op een gegeven moment heb je dus vele diverse stylings achter elkaar staan.

P Paul Weiss

07-03-2022 19:15 gewijzigd op 07-03-2022 19:30

Ik heb nu het onderstaande script. hierbij wordt de styling gewoon aangemaakt en na het kiezen van een andere kleur gewoon weer vervangen. Wat bij de bovenstaande niet het geval is. Echter probleem wat ik ondervind ik dat de kleur wordt aangepast zodra ik op 1 van beide teksten klik. Ik zou eigenlijk graag willen dat dit gebeurd wanneer ik de tekst heb geselecteerd. Ik heb al geprobeerd dit met window.getSelection() te bereiken, maar helaas zonder resultaat. Heeft iemand wellicht een oplossing die ervoor dat de kleur pas wordt aangepast wanneer ik de tekst heb geselecteerd?

[code]
<html>
<head>
</head>
<body>

<h1 contenteditable="plaintext-only" id="Myelement"
onclick="changeColor()" style="color: rgb(10, 10, 10);">
Voorbeeld 1
</h1>

<h1 contenteditable="plaintext-only" id="Myelement2" onclick="changeColor2()" style="color: rgb(10, 10, 10);">
Voorbeeld 2
</h1>

<input name="MyColorPicker"
type="color"
id="ColorPicker1" />

<script>
function changeColor() {
document.getElementById("Myelement").style.color =
document.getElementById("ColorPicker1").value;
}

function changeColor2() {
document.getElementById("Myelement2").style.color =
document.getElementById("ColorPicker1").value;
}

</script>
</body>
</html>[code]

- Ariën -

07-03-2022 19:27

Codetags werken met blokhaken. ;-)

P Paul Weiss

07-03-2022 19:31 gewijzigd op 07-03-2022 19:31

klopt inderdaad. was te snel met typen. inmiddels aangepast

P Paul Weiss

09-03-2022 10:42

Ik ben er nog even mee bezig geweest, maar krijg het niet voor elkaar. het 1e script uit dit topic wil ik graag gebruiken, omdat hierbij een span wordt aangemaakt met de stying voor het geselecteerde stuk tekst. Ik krijg het echter niet voor elkaar om deze steeds te vervangen. is er echt iemand die mij hierbij kan helpen?

? Onbekende gebruiker

09-03-2022 15:30 gewijzigd op 09-03-2022 15:36

Ik was iets te snel met reageren.
Tja, opmaak editen met kleur is ingewikkeld, vanwege de hiërarchische stapel HTML-tags, de vele CSS en de complexe asynchrone manier waarop JavaScript werkt. De meest simpele manier is om een voorgebakken HTML-gebaseerde tekstverwerker van iemand anders te gebruiken.
Of je moet bereid zijn er een (onevenredig) lange tijd er in te willen steken om precies te krijgen wat je hebben wilt.

P Paul Weiss

09-03-2022 15:42 gewijzigd op 09-03-2022 19:56

het is inderdaad allemaal ingewikkeld. het 1e script is prima voor mij. alleen wordt er zoals ik al aangaf steeds weer een nieuwe span toegevoegd en dat wil ik niet. deze moet vervangen worden zeg maar. wat betreft het verwijderen van de span heb ik inmiddels een ander topic over aangemaakt zie:

[size=xsmall]Toevoeging op 09/03/2022 19:55:28:[/size]

Ik heb nu wel een oplossing gevonden trouwens voor het 1e script. echter dan wordt de span ook verwijderd voor andere strings. dus dat is niet echt een oplossing. Dan zal ik toch voor script nr.2 moeten gaan. maar de vraag is hoe deze de kleur aanpast wanneer ik de tekst heb geselecteerd en dus niet klik.

Reageren

Inloggen om te reageren