Visual editor html cu mâinile proprii, exemple despre delphi, articole, programare -

Avem nevoie de puțin. Mai intai - delphi 5-7 (am versiunea a 7-a si tot codul a fost testat in aceasta versiune). Această versiune limitată, deoarece prima componentă twebbrowser „înregistrată“ pe internet este în versiunea 5 (în al 4-lea a trebuit să fie instalat ca și componentă activex). Totuși, este necesar ca sistemul a fost instalat Internet Explorer 4 și mai sus, pentru motivele pentru care aceasta este o parte din ea formează bază webbrowser'a.







Să verificăm! Creați un nou formular, plasați componenta twebbrowser și câteva componente tspeedbutton pe el. Apoi scrieți următorul cod: unitatea principală;

var
forma 1: forma 1;
disp: idispatch;
editor: ihtmldocument2;

procedura tform 1.webbrowser1documentcomplete (expeditor: tobject;
const pdisp: idispatch; var url: olevariant);
var
curentwb: iwebbrowser;
editor: ihtmldocument2;
începe
disp: = pdisp;
se încheie;

procedură tform 1.speedbutton1click (expeditor: tobject);
var
curentwb: iwebbrowser;
începe
curentwb: = disp un iwebbrowser;
editor: = (curentwb.document ca ihtmldocument2);
editor.designmode: = 'on';

se încheie;
procedura de formular 1.form crea (expeditor: tobject);
începe
webbrowser1.navigate ('despre:„);
se încheie;

Comenzile rapide de la tastatură

"Cu siguranță sunt bune că există taste rapide, dar nu mi-aș dori să le amintesc pe toate" - puteți spune. Bine. Apoi, să examinăm cum să forțați webbrowser-ul de la delphi să efectueze toate aceste acțiuni. Pentru a face acest lucru, există o metodă ihtmltxtrange interfață ExecCommand (descris în modulul mshtml_tlb). Să luăm în considerare un exemplu simplu. procedură tform 1.speedbutton2click (expeditor: tobject);
var
gamă: ihtmltxtrange;
începe
domeniu: = (editor.select ion.createrange ca ihtmltxtrange);
range.execcommand ('bold', false, emptyparam)
se încheie;

Câteva cuvinte despre domeniu. În plus față de execordanța deja cunoscută de noi, acest obiect are o serie de proprietăți și metode, dintre care unele luăm în considerare acum.

Conține text de selectare (fără etichete html)

Text de selecție complet

movestart (const unitate_: cea mai largă;
număr: întreg)

Mută ​​poziția inițială de selecție pentru a număra caracterele spre dreapta (dacă este numărată<0, то влево), unit_-единицы измерения смещения (чаще всего используется 'character': 1 символ). При этом конечная позиция не смещается.

Același lucru, numai pentru poziția finală de selecție.

pastehtml (const html: widestring);

Afișează ajutor pentru comanda specificată în cmdid

Aplicație.
Comenzi disponibile

Setează sau primește culoarea de fundal a selecției curente. valoarea trebuie să conțină un nume de culoare sau un echivalent shesnadzitirichny rgb (de exemplu, # ffcc00).







Comută textul selecției curente între caractere aldine și normale.

Luați în considerare principiul general de lucru cu aceste elemente. Ca și în cazul textului, primul lucru de făcut este să creați un obiect de selecție (numiți interval):

Interfața ihtmlcontrolrange este special conceput pentru a efectua diverse operații cu obiectele selectate în pagină, cu toate acestea, este absolut imposibil să se aplice pentru lucrul cu o alocare de text - veți obține o excepție eintfcasterror cu un mesaj că interfața selectată nu este acceptată (același lucru se întâmplă dacă ihtmltxtrange utilizați pentru cu comenzi). Pentru a evita astfel de situații, câmpul type_: widestring este introdus în interfața ihtmlselect a interfeței. În funcție de tipul de selecție, acesta va conține "control" sau "text" (dacă nu este selectat nimic, acest câmp va conține "none"). Iată un exemplu simplu despre cum puteți introduce o imagine într-un anumit loc într-un document (cum sa descris în primul articol modul de deschidere a unui document în modul de editare):

procedură tform 1.speedbutton13click (expeditor: tobject);
var
ctrlrange: ihtmlcontrolrange;
textrange: ihtmltxtrange;
începe
dacă editor.select ion.type _ = 'control' atunci
începe
ctrlrange: = (editor.select ion.createrange ca ihtmlcontrolrange);
dacă nu ctrlrange.querycommandenabled ("insertimage") atunci
application.messagebox ('nu este suportat!', '');
altfel
ctrlrange.execcomand ('insertimage', false, 'c: my filesporshe1.jpg') sfârșitul
altfel
începe
textrange: = (editor.select ion.createrange ca ihtmltxtrange);
textrange.execcomand ('insertimage', false, 'c: my filesporshe1.jpg')
se încheie;
se încheie;

Rețineți că atunci când obiectul este alocat, vom folosi metoda querycommandenabled pentru a vă asigura că această comandă poate fi efectuată pe controlul selectat. Acest lucru se datorează faptului că, de exemplu, cadrul încorporat nu poate fi înlocuit cu o imagine. De fapt, această verificare este opțională, însă recomand că aceasta să fie efectuată pentru a evita consecințele neplăcute. O altă metodă - querycommandsupported (cmdid: widestring): boolean permite vyyanit sprijinit de comando dacă selectarea tipului de date. Aceleași metode există pentru interfața ihtmltxtrange, dar în acest caz ele nu sunt necesare.

Cu mese, situația este mult mai complicată. Controalele de tip htmltable, htmlrow și htmlcell, potrivit documentelor de la Microsoft, concepute pentru a crea tabelele în formarea de pagini de pe partea de server. În consecință, în cazul nostru, există unele dificultăți: în special, cum să adăugați tabelul rezultat în document (în orice caz, nu am reușit). Ca o alternativă, propun următoarele: a crea tip de tabel htmltable, lucra cu ea ca și în cazul în care vom crea un document pe server, și apoi utilizați outerhtml de proprietate. Acest câmp conține o reprezentare textuală a tabelului în format html. Să luăm în considerare această metodă mai detaliat pentru un exemplu: procedură tform 1.speedbutton14click (sender: tobject);
var
tabel: htmltable;
textrange: ihtmltxtrange;
rând: htmltablerow;
col: htmltablecol;
i: întreg;
începe
dacă editor.select ion.type_<>"control" atunci
începe
tabel: = (editor.createelement ('table') ca htmltable);
pentru i: = 0 la 3 nu
începe
rând: = (table.insertrow (i) ca distabletablerow);
col: = (rândul.insertcell (0) ca disphtmltablecol);
col.width: = '200';
col.style.bordercolor: = '# ff0000';
col.innertext: = "Celula #" + inttostr (i);
se încheie;
table.style.bordercolor: = '# 00ff00';
textrange: = (editor.select ion.createrange ca ihtmltxtrange);
textrange.pastehtml (table.outerhtml);
se încheie;
se încheie;

var
i, j: întreg;
ovtable: olevariant;
t: htmltable;
începe
// Documentul ar trebui să aibă un tabel, descris aproximativ în felul următor:
//

valid: = webbrowser1.oleobject.document. getelementsbyname ('mytable'). element (0);
//webbrowser1.oleobject.document. getelementsbyname ('mytable') -
// aceasta este o colecție de elemente (la urma urmei, pot avea mai multe elemente
// id egal cu "mytable"
pentru i: = 0 până la (ovtable.rows.length - 1)
pentru j: = 0 la (ovtable.rows.item (i) .cells.length - 1) face
ovtable.rows.item (i) .cells.item (j) .innertext: = 'text nou!';
se încheie;







Trimiteți-le prietenilor: