Skip to content

Instantly share code, notes, and snippets.

@bobdenotter
Last active December 21, 2015 14:38
Show Gist options
  • Save bobdenotter/6320492 to your computer and use it in GitHub Desktop.
Save bobdenotter/6320492 to your computer and use it in GitHub Desktop.
Waarom een Wysiwyg editor soms niet doet, wat je (als eindgebruiker zijnde) verwacht.

Plakken en knippen sucks

Stel, je hebt een mooi stukje tekst in een word-achtig programma. Als je dit wilt plakken/knippen, dan komt er ongezien een hele berg aan meta-meuk mee zoals opmaak, lettertypes, en waarvandaan het geknipt is.

Als je het als 'platte tekst' invoegt in de meeste editors, dan ofwel slopen ze niet alle opmaak er uit, ofwel te veel. Meestal ziet het er dan zo uit:

Nimium boni est, cui nihil est mali. 

Qui autem esse poteris, nisi te amor ipse autem esse poteris, nisi te amor ipse
ceperit? Duo Reges: constructio interrete. Claudii libidini, qui tum erat summo ne 
imperio, dederetur. Confecta res esset.

Ut optime, secundum naturam affectum esse possit. Si longus, levis dictata sunt. Atque 
haec coniunctio confusioque virtutum tamen a philosophis ratione quadam distinguitur.

Cyrenaici quidem non recusant; Aeque enim contingit omnibus fidibus, ut incontentae 
sint. Itaque his sapiens semper vacabit.

Maar, stiekem zit daar dan onderwater nog steeds HTML in. En dat wil je ook, want anders zou je dit krijgen:

Nimium boni est, cui nihil est mali. Qui autem esse poteris, nisi te amor ipse autem esse poteris, nisi te amor ipse ceperit? Duo Reges: constructio interrete. Claudii libidini, qui tum erat summo ne imperio, dederetur. Confecta res esset. Ut optime, secundum naturam affectum esse possit. Si longus, levis dictata sunt. Atque haec coniunctio confusioque virtutum tamen a philosophis ratione quadam distinguitur. Cyrenaici quidem non recusant; Aeque enim contingit omnibus fidibus, ut incontentae  sint. Itaque his sapiens semper vacabit.

Onderwater zitten er altijd nog (HTML) regel- en paragraaf-eindes in. Soms zijn de web-based wysiwyg editors slim genoeg dat ze paragrafen kunnen herkennen. Dan heb je feitelijk dit:

<p>Nimium boni est, cui nihil est mali.</p>
<p>Qui autem esse poteris, nisi te amor ipse autem esse poteris, nisi te amor ipse
ceperit? Duo Reges: constructio interrete. Claudii libidini, qui tum erat summo ne 
imperio, dederetur. Confecta res esset.</p>
<p>Ut optime, secundum naturam affectum esse possit. Si longus, levis dictata sunt. Atque 
haec coniunctio confusioque virtutum tamen a philosophis ratione quadam distinguitur.</p>
<p>Cyrenaici quidem non recusant; Aeque enim contingit omnibus fidibus, ut incontentae 
sint. Itaque his sapiens semper vacabit.</p>

Als je pech hebt krijg je echter dit:

<p>Nimium boni est, cui nihil est mali.<br>
Qui autem esse poteris, nisi te amor ipse autem esse poteris, nisi te amor ipse
ceperit? Duo Reges: constructio interrete. Claudii libidini, qui tum erat summo ne 
imperio, dederetur. Confecta res esset.<br>
<br>
Ut optime, secundum naturam affectum esse possit. Si longus, levis dictata sunt. Atque 
haec coniunctio confusioque virtutum tamen a philosophis ratione quadam distinguitur.<br>
<br>
Cyrenaici quidem non recusant; Aeque enim contingit omnibus fidibus, ut incontentae 
sint. Itaque his sapiens semper vacabit.<br>

In je wysiwyg venstertje ziet dat er bijna hetzelfde uit, maar de code verschilt op een significante manier: In het ene geval zijn de paragrafen afzonderlijk in een <p> tag gezet. In het tweede geval is er één <p> met daarin losse regeleinden: de <br> tag.

Als je dan in je wysiwyg editortje een woord selecteert en daar een kop van wilt maken, dan vergroot 'ie de selectie tot het omliggende block-element (de <p>, feitelijk), en maakt daar een nieuwe block-level kop van als <h1> of <h2> ofzo. Als jij in je editor ineens alles als kop hebt, dan is er onderwater dus waarschijnlijk 1 <p> van gemaakt met regeleindes, in plaats van afzonderlijke <p>-tags. Meestal kun je dit 'oplossen' door er zelf harde enters tussen te zetten.

Overigens doen sommige actuele versies van die wysiwyg componentjes het redelijk goed. Zoals deze. Andere maken er nog steeds een potje van, zoals deze.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment