I am designing an HTML editor for Windows Forms. I use Geckofx 60.64 and TinyMCE 5.2.0 for this. When everything runs smoothly, this will be a usercontrol.
Here is the screenshot:
And I don’t want anything that pops up as a popup in this usercontrol. However, TinyMCE’s code plugin opens as a popup.
As in the TinyMCE editor in WordPress, I want the contents of the HTML code to be displayed in the editor when you click on the code icon and return it when you click the code icon again. But I have no idea how I can do it.
In order to better explain what I want, I also designed a simple image in Photoshop.
2
Answers
The code view in WordPress is not actually using the TinyMCE code view plugin. Rather it extracts the editor contents, loads it into a textarea, allows you to edit, and then it re-invokes TinyMCE and reloads the updated HTML.
If you want a similar experience to WordPress you will have to create the code view behavior yourself.
If you want to use the code viewer that TinyMCE provides it works as a dialog.
I had a similar request (displaying
html
source in editor) and achieved a pretty simple and (for me) sufficient solution by modifying the initial (open source)code
plugin:Instead of opening a new window, it just changes the
css
of the editor (background, color, font) and sets a data-attribute (enables toggling between the initial view and thecode
view). Thep.DOM.encode(e)
then allows to display the html tags.I’m not very experienced in javascript, but it works good so far. Anyway, feel free to correct / improve things.