preface

It has been a few months since the release of wangEditor V4, during which time some students proposed the function of source editing, but wang’s author recently replied that due to various considerations, this function is not supported for the time being (#2299). So I tried to write this functionality as an extension library, and let’s see what it looks like:

Source editing is implemented relying on the Monaco Editor

1. Program selection

1. Package the extension menu code with Monaco via WebPack

Deprecated. The idea is good, but the package fails.

2. Iframe + postMessage + Monaco

Deprecated. PostMessage communication takes a long time and has poor experience.

3. Iframe + Moanco

Mount the Monaco instance directly to the Window object of the Iframe and then take it directly from the parent window

Two: the realization of ideas

Write a simple Monaco Editor example using require + CDN

This code will be written to an iframe document through the Document.write API

For Monaco Editor examples, see Monaco-editor-samples

2. Expand the wangEditor menu

We need to do the following when we initialize the extension menu

  1. Add the iframe to the editor’s edit area container
  2. Initializes the saved/exited controller
  3. Bind dropList (this menu is based on BtnMenu + dropList implementation)

Extension menu code

2.1. Add iframe to the edit area container of the editor

2.2. Initialize the saved/exited controller

This static HTML is modified from the original Monaco Editor example

It is worth noting that Monaco loads when the source editing function is opened for the first time. This has the advantage of avoiding unnecessary resource loading, but has the disadvantage of being somewhat dull when using the source function for the first time.

The open method of the controller was rewritten after the loading was successful to remove unnecessary judgments (whether Monaco has been initialized).

Controller: Open the Monaco editor

Controller: Saves data

Controller: Exits the source editing state

Controller: Complete code

2.3. Bind custom dropList

Due to the particularity of this extended menu, it cannot be realized by BtnMenu or DropListMenu alone, so I use the form of BtnMenu + DropList to achieve it.

This also meant that I needed to make some special changes to BtnMenu to make it look like dropList is suspended when the source editor is open.

BtnMenu and DropListMenu low-level source comparison diagram. See the project source code for more details

The ultimate implementation of custom dropList

Three: complete code address

Github.com/clinfc/wang…