In order to complete a CMS system for ETSOO, we need a WYSIWYG HTML editor for content publish. There are a lot of components or libraries to do that but no one full covers the basic requirements we want. So we decided to continue a previous project we did serveral years ago called "EOEditor" and apply the new technologies we have to refactor it and make it a free option for the market. Leave all steps here to demostrate the pathways from zero to a workable library for your reference.
Github: https://github.com/ETSOO/EOEditor
Step 1: Init the package
'npm init' to initialize an NPM package. 'npm init -y' will not ask any question and produce the package.json file with default values. 'npm init --scope=' to create an Org scoped package.
npm init --scope=etsoo
Changed package name to "@etsoo/editor"
Step 2: Setup TypeScript
npm install --save-dev typescript ts-loader
npx tsc --init
Changed target to "es2019".
Step 3: Setup Prettier
https://prettier.io/docs/en/install.html
npm install --save-dev --save-exact prettier
Created .prettierignore and .prettierrc two files.
Step 4: Setup testing server
https://webpack.js.org/api/webpack-dev-server/#installation
npm install --save-dev webpack webpack-cli webpack-dev-server
Configue webpack to work with TypeScript with webpack.config.js https://webpack.js.org/guides/typescript/, make sure insert the eoeditor.js(configured in output/filename) to index.html to enable "Live Reloading".
Step 5: Editor as a resuable component
Create it as a custom HTML element. https://developers.google.com/web/fundamentals/web-components/customelements, https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements
Step 6: Commands
Even thougth the 'executeCommand' is depreciated, no alternative is available. Just follow the traditional way. https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand
Step 7: Dynamic styles with var
Setup variables with same template to support dynamic update for different instances. https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
Step 8: Editor with a Div or IFrame
At the very begining, I took the Div but gave it up later. Because a Div in same document with the buttons could not hold the selection when move the focus to dialog inputs.
Step 9: Image edit
It's a good idea to have some client image edit functions to support basic rotate/resize features. It's done with the library http://fabricjs.com/.
After took over 2 months of my free time, here is the first screen shot of the release.
Other points
- Highlight programming codes with https://highlightjs.org/usage/
Top comments (0)