[JS : content editable] - Softwareontwikkeling

woensdag 9 juli 2003 13:08

Acties:

digitaal

Topicstarter

Ik ben zoals velen hier bezig met een klein wyiswyg systeempje.
Als je tekst paste vanuit bijvoorbeeld Word komt de volledige opmaak mee, maar die matched niet niet met mijn stylesheet.
Ik weet dat dat je de opmaak met execCommand('RemoveFormat') kan verwijderen.

De volgende stappen moeten dus uitgevoerd worden:

1] CTRL V afvangen
2] met execCommand('Paste') de inhoud van het clipboard erin gooien.
3] nieuwe content selecteren
4] execCommand('RemoveFormat') uitvoeren

stap 1,2 en 4 is geen probleem. Maar is er een handige/slimme manier om stap 3 te doen?

[ Voor 6% gewijzigd door bRight op 09-07-2003 13:09 . Reden: typo ]

woensdag 9 juli 2003 13:13

Acties:

crisp

Devver

Pixelated

Het lijkt mij logischer om voor het pasten de opmaak al te verwijderen...

Intentionally left blank

woensdag 9 juli 2003 13:36

Acties:

cutter

Wannabe i7 fanboy

of een html <--> wysiwyg toggle button iets met innerText en innerHTML eerst plakken in non-wysiwyg en daarna pas gaan opmaken... dat probeer ik de n00bs hier ook bij te brengen.

woensdag 9 juli 2003 13:39

Acties:

Clay

cookie erbij?

Of een bak regExp's maken die "word -> contentEditable" paste's zodanig uitkleedt dat het gewoon zonder RemoveFormat of tussenwegen kan.

Instagram | Flickr | "Let my music become battle cries" - Frédéric Chopin

woensdag 9 juli 2003 13:40

Acties:

RM-rf

1 2 3 4 5 7 6 8 9

is het niet beter om die removeFormat te doen alvorens je de content erin paste, immers, je wilt enkel de overbodige formatering uit word-html eruit filteren:

je lijstje wordt dan
1] CTRL V afvangen
2] met execCommand('Paste') de inhoud van het clipboard in een tempVar gooien.
3] execCommand('RemoveFormat') op tempVar uitvoeren
4] tempVar invoegen in editscherm

Intelligente mensen zoeken in tijden van crisis naar oplossingen, Idioten zoeken dan schuldigen

woensdag 9 juli 2003 14:03

Acties:

bRight

digitaal

Topicstarter

dank voor jullie reacties. Ik ga een mooie regExp bouwen

Het lijkt me bijv wel handig om boldtags etc te laten staan..

Is alleen de vraag hoe je de onbewerkte clipboarddata incl htmltags in een var kan proppen..

2] met execCommand('Paste') de inhoud van het clipboard in een tempVar gooien.

Kan dit?

woensdag 9 juli 2003 14:04

Acties:

Bosmonster

*zucht*

Je kunt het paste event afvangen en vervolgens de content van het clipboard uitlezen als plain tekst. Als je hier de \n's weer even vervangt door br's en < en > vervangt voor de html entities is het aardig 'veilig'

Je moet overigens hetzelfde ook nog doen voor drag/drop operaties.. want ook daarmee kun je content van buitenaf in de editor krijgen.

Is alleen de vraag hoe je de onbewerkte clipboarddata incl htmltags in een var kan proppen..

Dat kan helaas niet.. alleen met een truc door het eerst weer ergens anders te pasten en weer de innerHTML uit te lezen. Zelf vond ik dit niet de moeite waard.

[ Voor 29% gewijzigd door Bosmonster op 09-07-2003 14:05 ]

woensdag 9 juli 2003 14:08

Acties:

Bosmonster

*zucht*

Clay schreef op 09 juli 2003 @ 13:39:
Of een bak regExp's maken die "word -> contentEditable" paste's zodanig uitkleedt dat het gewoon zonder RemoveFormat of tussenwegen kan.

Dat is waanzinnig lastig

Aangezien iedere versie van Word of ieder ander willekeurig pakket (Excel etc) weer andere code genereert.

edit:

Crisp had laatst dus iets van een strip_tags() geschreven. Dat is iets wat wel universeel is te gebruiken als die ook tags kan opschonen wat betreft attributen (alle attributen mogen der van mij uit, om die van img-tags na).

Enniwee.. zit je nog steeds met het probleem dat je de paste dus eerst ergens anders moet laten plaatsvinden op een of andere manier en dan daar weer de volledig html uit moet halen.. hoop werk voor iets wat imho ook gewoon als plain/text kan worden gepaste.

[ Voor 41% gewijzigd door Bosmonster op 09-07-2003 14:32 ]

woensdag 9 juli 2003 15:40

Acties:

Bosmonster

*zucht*

Ik was toch bezig met het verminderen van 'vervuiling' van de editor en heb hiermee heb uiteindelijk de volgende code gecreeerd:

PHP:

<html>
<head>
<link rel="stylesheet" type="text/css" href="content.css">
<script type="text/javascript">

var isInternalDrag  = false;
var doFullCopy      = false;
var tmpInternalCopy = "";

function cleanPaste (cb) {
    var tr = document.selection.createRange();
    cb = cb.replace (/</g, "<");
    cb = cb.replace (/>/g, ">");
    cb = cb.replace (/\\n/g, "<br>");
    tr.pasteHTML(cb);
}

function evtPaste () {
    if (window.clipboardData.getData('Text') != tmpInternalCopy) {
        event.returnValue = false;
        var cb = window.clipboardData.getData('Text');
        if (cb) cleanPaste (cb);
    }
    tmpInternalCopy = '';
}

function evtDrop () {
    if (!isInternalDrag) {
        event.returnValue = false;
        var cb = event.dataTransfer.getData('Text');
        if (cb) cleanPaste (cb);
    }
}

function evtDragEnd () {
    isInternalDrag = false;
}

function evtDragStart () {
    isInternalDrag = true;
}

function evtBeforeCutCopy () {
    if (!doFullCopy) {
        event.returnValue = false;
    }
}

function evtCutCopy (act) {
    if (!doFullCopy) {
        doFullCopy = true;
        document.execCommand(act);
        doFullCopy = false;
        tmpInternalCopy = window.clipboardData.getData('Text');
    }
}

</script> 
</head>
<body contenteditable onpaste="evtPaste()" onbeforecut="evtBeforeCutCopy()" 
oncut="evtCutCopy('Cut')" onbeforecopy="evtBeforeCutCopy()" oncopy="evtCutCopy('Copy')" 
ondrop="evtDrop()" ondragend="evtDragEnd()" ondragstart="evtDragStart()">
</body>
</html>

Waar is al die code voor? Die zorgt voor het afvangen en reformatten van paste en drag acties, maar zorgt er voor dat er BINNEN de editor nog gewoon volledig geknipt/geplakt en gedragt kan worden. Normaliter zou je namelijk ook deze functionaliteit uitschakelen wat natuurlijk niet handig is

Voor het knippen/plakken verhaal was nog een slimme workaround nodig

vrijdag 11 juli 2003 20:49

Acties:

bRight

digitaal

Topicstarter

Als je het volgende doet:

1] stuk formatted text kopieren in Word
2] clipboard pasten in je htmleditor
3] het stuk dat je net gepaste hebt in de editor kopieren -> doFullCopy = true
4] opnieuw het stuk formatted text kopieren in Word
5] clipboard pasten in de editor -> window.clipboardData.getData('Text') == tmpInternalCopy?

zaterdag 12 juli 2003 00:48

Acties:

creative8500

freedom.

Om te voorkomen dat ik met een enorme n00b vraag over zulke wysiwyg systeempjes kom: waar halen jullie informatie vandaan over deze functies/events?
Ik kan wel gaan googlen, maar ik heb toch liever een 'reference numero uno'

Of lezen jullie net als ik nu hier en daar een artikeltje hierover

zaterdag 12 juli 2003 00:51

Acties:

Verwijderd

Voor Microsoft Internet Explorer kun je terecht op msdn.microsoft.com. Als je in google je zoekopdracht met het woord msdn begint, kom je altijd op dat adres uit. Google icm site:msdn.microsoft.com is ook stukken beter dan de eigen zoekfunctie.

zaterdag 12 juli 2003 10:07

Acties:

Bosmonster

*zucht*

AArsgier schreef op 11 July 2003 @ 20:49:
Als je het volgende doet:

1] stuk formatted text kopieren in Word
2] clipboard pasten in je htmleditor
3] het stuk dat je net gepaste hebt in de editor kopieren -> doFullCopy = true
4] opnieuw het stuk formatted text kopieren in Word
5] clipboard pasten in de editor -> window.clipboardData.getData('Text') == tmpInternalCopy?

doFullCopy wordt direct weer op false gezet hoor

Die is alleen maar om 1x 'normaal' te kunnen knippen en plakken omdat anders het clipboard niet uit te lezen is oncut en oncopy. Deze wordt pas gevuld NA het even namelijk

tmpInternalCopy mag ik wel ff resetten ja, dat wel.

In de code staat trouwens:

cb = cb.replace (/n/g, "<br>");

Dat moet uiteraard

cb = cb.replace (/\n/g, "<br>");

zijn.. React-bugje blijkbaar in de php-tag

[ Voor 12% gewijzigd door Bosmonster op 12-07-2003 10:09 ]

Pagina: 1

Reageer