Html-Editor: WATTWEESICK

[Kiffi]

Hallo,

hier mal ein kleines 'Spaß-Projekt'. Ist ein WYSIWYG-HTML-Editor



Zur Erklärung: Bei der Applikation handelt es sich um ein einfaches Fenster
nebst Webgadget, in dem der tinyMCE aufgerufen wird.

Hinweis: Das Laden und Speichern des Code funktioniert noch nicht!

Download: Hier (knapp 1.6 MB)

Have fun ... Kiffi

// Edit: Screenshot- und Download-Link korrigiert

[DarkDragon]

Hab auch mal sowas gemacht mit nem EditorGadget, war aber echt nicht das Gelbe vom Ei. Eher das schimmlige. Aber deins scheint ziemlich gut geworden zu sein. Es gibt auch eine Bearbeitungsmethode im WebGadget(ohne TinyMCE):

Code: Alles auswählen

#IDM_BOLD = 52
; #MSOCMDEXECOPT_DODEFAULT = ??

If OpenWindow(0, 0, 0, 640, 480, #PB_Window_ScreenCentered|#PB_Window_SystemMenu, "WebGadget Edit")
  If CreateGadgetList(WindowID()) 
   
    WebGadget(0, 5, 5, 630, 340, "www.google.com")
    ButtonGadget(1, 5, 350, 100, 25, "Bold")
    ButtonGadget(2, 110, 350, 100, 25, "Test")
   
    ; get webgadgets IWebBrowser2 interface:
    Browser.IWebBrowser2 = GetWindowLong_(GadgetID(0), #GWL_USERDATA)   
   
    ; wait for page to be loaded..
    Repeat
      While WindowEvent(): Wend
      Delay(1)
      Browser\get_Busy(@IsBusy.l)
    Until IsBusy = 0
   
    ; get the document interface
    If Browser\get_Document(@DocumentDispatch.IDispatch) = #S_OK
     
      ; query for IHTMLDocument3:
      If DocumentDispatch\QueryInterface(?IID_IHTMLDocument2, @Document.IHTMLDocument2) = #S_OK
       
        ; here you have a IHTMLDocument2 pointer, and can work with it...
        Document\put_designMode(Ansi2Uni("On")) ;Turns on Edit Mode
       
        If DocumentDispatch\QueryInterface(?IID_IOleCommandTarget, @CmdTarget.IOleCommandTarget) = #S_OK
         
          CmdTarget\Exec(@CGID_MSHTML, IDM_2D_POSITION, MSOCMDEXECOPT_DODEFAULT, @var, NULL) ;Lets you drag and drop items
         
          CmdTarget\Release()
        EndIf
       
       
        Document\Release()
      EndIf
     
      DocumentDispatch\Release()   
    EndIf
   
    vb.l
   
    Repeat
      EventID = WaitWindowEvent()
     
      If EventID = #PB_Event_Gadget ;checks for the events
        Select EventGadgetID() ;Checks for Gadget Events
          Case 1
            ;Document\execCommand(Ansi2Uni("Delete"), #False, #Null, @vOut)
            ;CmdTarget\Exec(@CGID_MSHTML, #IDM_BOLD, #MSOCMDEXECOPT_DODEFAULT, 0, 0) ;Does not work, dont know why
           
          ; Case 2
            ; Document\queryCommandState(Ansi2Uni("Bold"), @vb)
            ; MessageRequester("", Str(vb))
           
        EndSelect
      EndIf
    Until EventID = #PB_EventCloseWindow
   
  EndIf
EndIf

End


DataSection

IID_IHTMLDocument2:  ; {332c4425-26cb-11d0-b483-00c04fd90119}
Data.l $332C4425
Data.w $26CB, $11D0
Data.b $B4, $83, $00, $C0, $4F, $D9, $01, $19

IID_IOleCommandTarget:  ; {b722bccb-4e68-101b-a2bc-00aa00404770}
Data.l $B722BCCB
Data.w $4E68, $101B
Data.b $A2, $BC, $00, $AA, $00, $40, $47, $70

EndDataSection 

[Kiffi]

> Aber deins scheint ziemlich gut geworden zu sein.

ja, das ist aber nicht mein Verdienst, sondern der des tinyMCE-Autors.

> Es gibt auch eine Bearbeitungsmethode im WebGadget(ohne TinyMCE):

yep, bin gerade dabei, damit ein wenig zu experimentieren.

Vielleicht schreibt Thomas ja eine OOP-Lib für das Webgadget

Grüße ... Kiffi

[ts-soft]

Sieht nett aus

Vielleicht schreibt Thomas ja eine OOP-Lib für das Webgadget

Niemals

[Kekskiller]

Seltsamerweise wird nach jeder Zeile ein schön fetter Absatz eingefügt (wenn ich versuche, was einzutippen) -> Absicht oder einfach systemabhängig ... o_O ?

[Kiffi]

> Seltsamerweise wird nach jeder Zeile ein schön fetter Absatz eingefügt

ist so 'by Design'. Ein Return erzeugt ein [c]<p />[/c], während ein [c]<Shift> + <Return>[/c] ein normales [c]<br />[/c] erzeugt.

Also:

Beim Absatz -> [c]<Return>[/c]
Beim manuellen Zeilenumbruch -> [c]<Shift> + <Return>[/c]


Grüße ... Kiffi

[NicTheQuick]

@Kiffi:

Geil!

Sowas wäre doch gut für den zukünftigen PBOR zum Darstellen der
Threads und Beiträge. Kann man da auch Klicks auf Links über einen
Callback abfangen und funktioniert das ganze auch unter Linux?

Wenn dir das hier zu OffTopic ist, dann schreib mir dazu eine PN.

[AND51]

> Seltsamerweise wird nach jeder Zeile ein schön fetter Absatz eingefügt

ist so 'by Design'. Ein Return erzeugt ein [c]<p />[/c], während ein [c]<Shift> + <Return>[/c] ein normales [c]<br />[/c] erzeugt.

Also:

Beim Absatz -> [c]<Return>[/c]
Beim manuellen Zeilenumbruch -> [c]<Shift> + <Return>[/c]


Grüße ... Kiffi

An sich ist die Idee ja richtig, so funktionieren auch andere Webeditoren, aber dass ein <p /> eingefügt wird, ist syntaktisch nicht ganz richtig. Diese Schreibweise zielt auf XHTML statt HTML.

Code: Alles auswählen

<p>Dies ist ein 'schön fetter Absatz'.</p>

So sehen Absätze in HTML und XHTML aus.
Der Unterscheid zw. HTML und XHTML ist, dass bei XHTML in Anführungszeichen "mehr Wert auf die Ordentlichkeit des Codes" gelegt wird.
Bilder müssen in XHTML entweder mit einem </img> oder so abgeschlossen werden: <img src="mein_tolles_bild.png" border=0 />
*igiit* ich hasse diese schreibweise... Aber so will es nun mal XHTML
Da müssen alle Tags, die keinen Endtag haben mit einem /> abgeschlossen werden. Außerdem wird nur KLEINSCHREIBUNG gedulded.
Also hier my recommendation: Statt <p /> einzufügen lieber den Absatz mit <p> ... </p> "einklammern".

[Kiffi]

@Nic

> Sowas wäre doch gut für den zukünftigen PBOR zum Darstellen der
> Threads und Beiträge. Kann man da auch Klicks auf Links über einen
> Callback abfangen und funktioniert das ganze auch unter Linux?

ich weiss nicht, ob Du mein Eingangsposting komplett gelesen hast. Wie
bereits geschrieben, ist das eher ein Spaßprojekt. Der PB-Part besteht aus
einem Fenster mit einem WebGadget. Hierin wird eine HTML-Seite
aufgerufen. Der eigentliche Editor ist der tinyMCE, welcher aus einem Set
von HTML und JavaScript besteht.

Wenn man so will, ist das Projekt eine 30 kB PB-Exe mit einer 2 mB Runtime

Klicks auf Links kann man im WebGadget abfangen. Hierzu hat Freak ja
mal einen entsprechenden Code veröffentlicht. Allerdings wird das
wahrscheinlich nur unter Windows funktionieren, weil hier das
Objektmodell des IE 'gesubclassed' wird.

@AND51:

> Statt <p /> einzufügen lieber den Absatz mit <p> ... </p> "einklammern".

joh, mir ist das schon klar. Trotzdem danke, dass Du das noch mal für die
anderen erwähnt hast.

Grüße ... Kiffi

[Wespe23]

Bei mir funktioniert der Editor nich