[dhtml/js] Opmaak wissen bij plakken

maandag 2 juni 2003 22:43

Admin Devschuur®

^ Romeinse Ⅲ ja!

innerHTML = innerText

Kweet alleen niet of er een "onpaste" event is

maar zo te zien wel

[ Voor 97% gewijzigd door RobIII op 02-06-2003 22:43 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

Acties:

maandag 2 juni 2003 22:49

Mr C

Topicstarter

Dus..... je plakt het in je editable en je zet meteen innerHTML = innerText....

Je krijgt dus een

HTML:

1	onClick="document.execCommand('Paste'); oEdit.innerHTML = oEdit.innerText; "

"Als je het kan bedenken, kan het gemaakt worden" Parcye - 14 januari 2002

Acties:

maandag 2 juni 2003 22:52

Admin Devschuur®

^ Romeinse Ⅲ ja!

is dat een vraag of de oplossing? Ik heb zo snel niks bij de hand om 't te testen, maar volgens MSDN kun je het niet op een iFrame loslaten...

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

Acties:

maandag 2 juni 2003 22:52

Mr C

Topicstarter

Klopt, op een iframe werkt het voor mij niet,

maar ook verlies je dus je enters als je het op die manier doet, wat ook niet de bedoeling dus de nette oplossing is het niet.

"Als je het kan bedenken, kan het gemaakt worden" Parcye - 14 januari 2002

Acties:

André

Analytics dude

Nee, op deze manier kan het niet. Je zou de tekst die op het clipboard staat als innerText toe moeten voegen. Maar jij voegt hem al toe met het paste commando, en dan hou je de opmaak.

dus zoiets als: document.innerText += clipboard; <-- dit werkt niet maar geeft wel aan hoe het zou moeten.

dinsdag 3 juni 2003 00:14

Acties:

dinsdag 3 juni 2003 00:38

Admin Devschuur®

^ Romeinse Ⅲ ja!

insertHTML, innerHTML en innerText zijn toch écht de keywords die je zoekt, evenals onpaste en onbeforepaste...

Parcye schreef op 02 June 2003 @ 22:52:
<knip>maar ook verlies je dus je enters als je het op die manier doet, wat ook niet de bedoeling dus de nette oplossing is het niet.

Je kunt een tijdelijke replace gebruiken voor enters, door ze te replacen met iets als "[enter]" ofzo. Na je innerHTML/Text trucje kun je dan je enters er weer in zetten door "[enter]" te vervangen met "\n" of "<br>"

[ Voor 73% gewijzigd door RobIII op 03-06-2003 00:20 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

Acties:

crisp

Devver

Pixelated

RobIII schreef op 03 June 2003 @ 00:14:
insertHTML, innerHTML en innerText zijn toch écht de keywords die je zoekt, evenals onpaste en onbeforepaste...

[...]

Je kunt een tijdelijke replace gebruiken voor enters, door ze te replacen met iets als "[enter]" ofzo. Na je innerHTML/Text trucje kun je dan je enters er weer in zetten door "[enter]" te vervangen met "\n" of "<br>"

Gebruik dan liever meteen een regexp om de ongewenste tags te verwijderen en de rest te laten staan. Volgens mij heeft IE hier ook wel een method voor.
De laatste paar weken zijn hier al een aantal draadjes over geweest, met ook wel wat oplossingen en mooie regexps erin

Intentionally left blank

dinsdag 3 juni 2003 00:54

Acties:

dinsdag 3 juni 2003 01:02

Admin Devschuur®

^ Romeinse Ⅲ ja!

crisp schreef op 03 June 2003 @ 00:38:
[...]

Gebruik dan liever meteen een regexp om de ongewenste tags te verwijderen en de rest te laten staan. Volgens mij heeft IE hier ook wel een method voor.
De laatste paar weken zijn hier al een aantal draadjes over geweest, met ook wel wat oplossingen en mooie regexps erin

Knappe jonge als jij b.v. Word "bagger" in een regexp kunt vangen... Copy & Paste maar eens een (ingewikkeld) documen met plaatjes, tabellen enz.... Dan vind ik mijn oplossing mooier IMHO...

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

Acties:

crisp

Devver

Pixelated

RobIII schreef op 03 June 2003 @ 00:54:
[...]

Knappe jonge als jij b.v. Word "bagger" in een regexp kunt vangen... Copy & Paste maar eens een (ingewikkeld) documen met plaatjes, tabellen enz.... Dan vind ik mijn oplossing mooier IMHO...

mijn html tidier komt al een aardig eind denk ik. Ben begonnen aan zijn grotere broertje die stack-based moet gaan werken, maar helaas door tijdgebrek ligt dat nu even stil...

Intentionally left blank

dinsdag 3 juni 2003 09:34

Acties:

dinsdag 3 juni 2003 10:08

*zucht*

Ik gebruik zelf de volgende 'standaardtemplate' binnen mijn editor, welke ik vervolgens dynamisch vul met gegevens uit de DB (html).

code:

<html>
<head>
<link rel="stylesheet" type="text/css" href="content.css">
<script type="text/javascript">
function evtPaste() {
    event.returnValue = false;
    var cb = window.clipboardData.getData('text');
    var tr = document.selection.createRange();
    if (cb) tr.pasteHTML(cb);
}
</script> 
</head>
<body contenteditable onpaste="evtPaste()">
</body>
</html>

Nadeel is dat je binnen de editor ook niet meer kan knippen/plakken. Bovendien is drag/drop nog niet afgevangen.

Handiger is inderdaad het te strippen op tags. Eigenlijk zou iemand eens de php-functie strip_tags() na moeten bouwen

[ Voor 0% gewijzigd door crisp op 25-05-2004 23:24 ]

Acties:

Bluestorm

maar je wilt niet alle tags strippen... een tabel overnemen is vaak noodzakelijk.

Ik heb een keer een tidy geschreven die gewoon door de DOM heen wandelde... En daar dan alleen de nuttige informatie in xhtml formaat printte... alleen bij erg door Word mishandelde en later nog met de hand nabewerkte HTML (dus met niet meer kloppende begin/sluit tags) kwamen sommige delen opeens twee keer voor in de DOM. (kan ook een bugje geweest zijn... maar ik zou niet weten waardoor dan

)

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

dinsdag 3 juni 2003 10:41

Acties:

dinsdag 3 juni 2003 10:55

Mr C

Topicstarter

Output met Word Rommel......

HTML:

1
2

<BODY><P class=MsoNormal style="MARGIN: 12pt 0in 0pt"><SPAN lang=EN-US style="COLOR: black; mso-ansi-language: EN-US">This document covers the research regarding the search for a suitable tool for programming an FGPA based on co-design with the qualities of a software engineer. <?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" /><o:p></o:p></SPAN></P>
<P class=MsoNormal style="MARGIN: 12pt 0in 0pt"><SPAN lang=EN-US style="COLOR: black; mso-ansi-language: EN-US">The research has been done by a group of students, following the study &#8216;Hogere Informatica&#8217; (Higher Informatics) at the Fontys Hogescholen in Eindhoven. <o:p></o:p></SPAN></P><SPAN lang=EN-US style="FONT-SIZE: 11pt; COLOR: black; FONT-FAMILY: 'Times New Roman'; mso-ansi-language: EN-US; mso-bidi-font-size: 10.0pt; mso-fareast-font-family: 'Times New Roman'; mso-fareast-language: EN-US; mso-bidi-language: AR-SA">The road followed to finding a suitable tool that could be suitable for Philips TASS is the base for this document. The steps taken in reaching a list of tools and possible suitable tools will be discussed and results relevant will be included in the Appendix</SPAN></BODY>

Moet worden:

HTML:

1
2
3

<BODY><P>This document covers the research regarding the search for a suitable tool for programming an FGPA based on co-design with the qualities of a software engineer. </P>
<P>The research has been done by a group of students, following the study 'Hogere Informatica' (Higher Informatics) at the Fontys Hogescholen in Eindhoven. </P>
<P>The road followed to finding a suitable tool that could be suitable for Philips TASS is the base for this document. The steps taken in reaching a list of tools and possible suitable tools will be discussed and results relevant will be included in the Appendix<BR></P></BODY>

Is toch een wereld van verschil....

"Als je het kan bedenken, kan het gemaakt worden" Parcye - 14 januari 2002

Acties:

dinsdag 3 juni 2003 10:55

*zucht*

Bluestorm schreef op 03 June 2003 @ 10:08:
maar je wilt niet alle tags strippen... een tabel overnemen is vaak noodzakelijk.

...

Mwah.. als je een volledige editor hebt wil je vaak juist dat ze daar ook alles mee opmaken en er dus geen spullen van buitenaf in geplaatst worden.

Persoonlijk vind ik het compleet strippen van tekst van buitenaf een prima oplossing, zo zijn ze verplicht het op te maken in de editor en je er dus de volledige controle over hebt. En weet je zeker dat er niks geks in komt te staan.

Nadeel zoals ik al zei is dat je intern in de editor ook niet meer kunt knippen/plakken (kan wel, maar dan verlies je je eigen opmaak).

Acties:

crisp

Devver

Pixelated

JavaScript:

var allowedTags; // ugly global...
function strip_tags(strString, allowed) {

  allowedTags = allowed.toLowerCase();

  strString = strString.replace(/<\/?([a-z]+)(>|.*?[\w'" \/]>)/gi, function($0, $1, allowedTags) { return check_allowed($0, $1); } );

  return strString;

}

function check_allowed(fullmatch, tag) {

  var reg = new RegExp('<'+tag.toLowerCase()+'>');
  if (allowedTags.match(reg)) return fullmatch;

  return '';

}

var strString = '<span><b><i>test<br />enzo</i></b></span>';

strString = strip_tags(strString, '<br><b><u><i><s>');

alert (strString);

[ Voor 17% gewijzigd door crisp op 03-06-2003 10:56 ]

Intentionally left blank

dinsdag 3 juni 2003 11:01

Acties:

dinsdag 3 juni 2003 13:00

*zucht*

woei crisp, dat heb je weer mooi voor elkaar

Acties:

Verwijderd

Zeker geinig crisp.

Zelf gebruik ik hetvolgende:
(Als gepaste wordt doormiddel van ctrl-v oid, dan wordt schoonMaken() aangeroepen. Verder heb ik een paste knop gemaakt en deze filterd de tags. De paste knop roept functie doPaste aan.)

code:

//Functie uit laten voeren als er iets gepaste wordt in de iFrame
Iframe.document.body.onpaste = schoonMaken;

//Controle of er geplakt mag worden.
//In bijv. MS Word worden er tags meegekopieërd die de opmaak in de war schoppen.
//Deze tags worden er uitgefilteerd bij function doPaste.

//Alle paste mogelijkheden worden afgevangen en komen bij deze functie terecht.
//Hier kan je alleen code uitvoeren voor het plakken terwijl juist de tekst gefilteerd moet worden na het plakken.
//Daarom werkt alleen function doPaste en die wordt hier wel door gelaten.
function schoonMaken()
{
    if(PasteValue==1)
    {
        PasteValue = 0;
        return true;
    }
    else
    {
        alert('U kunt alleen uw gekopieerde tekst plakken als u gebruik maakt van de plakknkop boven het opmaakvenster.')
        return false;
    }
}

//Plakt de de gecopieerde tekst, selecteerd daarna alle tekst en verwijderd alle overbodige tags.
function doPaste()
{
    //Alleen via deze weg mag er gepaste worden.
    //De variabele PasteValue geeft aan dat het plakken via deze weg komt (zie function schoonMaken).
    PasteValue = 1;

    OpmaakTekst.document.execCommand('Paste', false, null);

    code = OpmaakTekst.document.body.innerHTML;
    
    //Verwijder alle class atributen.
    code = code.replace(/<([\w]+) class=([^ |>]*)([^>]*)/gi, "<$1$3");
    //Verwijder alle style atributen.
    code = code.replace(/<([\w]+) style="([^"]*)"([^>]*)/gi, "<$1$3");
    //Verwijderd alle XML code.
    code = code.replace(/<\\?\??xml[^>]>/gi, "");
    //Verwijderd alle overige MS Word code. 
    code = code.replace(/<\/?\w+:[^>]*>/gi, "");

    OpmaakTekst.document.body.innerHTML = code;
}

dinsdag 3 juni 2003 16:47

Acties:

Bluestorm

Waarom voer je die doPaste() ook niet gewoon uit bij gewoon plakken? in plaats van een onvriendelijke foutmelding te geven... Alleen even zorgen dat het daadwerkelijke plakken op het moment van uitvoeren al wel gebeurd is

Hmm een functie gebruiken in de replace zoals crisp dat doet ziet er wel erg handig uit... bied ook nog leuke mogelijkheden om op toegestane attributen etc te checken. (en dan zelfs weer op de waarden van die attributen zodat je eigen class wel wordt toegestaan en MsoNormal er uit wordt gegooit.

[ Voor 41% gewijzigd door Bluestorm op 03-06-2003 16:49 ]

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

dinsdag 3 juni 2003 16:52

Acties:

dinsdag 3 juni 2003 16:58

Mr C

Topicstarter

Alleen werkt onPaste volgens mij niet met in een IFrame...

"Als je het kan bedenken, kan het gemaakt worden" Parcye - 14 januari 2002

Acties: