使用 Webpack + TypeScript 实现简易的富文本编辑器

  |-- 富文本编辑器,
      |-- README.md,
      |-- index.html,
      |-- package-lock.json,
      |-- package.json,
      |-- tsconfig.json,
      |-- webpack.build.config.js,
      |-- webpack.config.js,
      |-- dist,// 打包生成的文件
      |   |-- yangEditor.js,
      |-- lib,
      |   |-- index.css,
      |   |-- index.js,
      |   |-- yangEditor.ts,
      |-- src,
          |-- index.js,
  

"clean-webpack-plugin": "^3.0.0",
"css-loader": "^5.2.0",
"html-webpack-plugin": "^5.3.1",
"style-loader": "^2.0.0",
"ts-loader": "^8.1.0",
"typescript": "^4.2.3",
"webpack": "^5.30.0",
"webpack-cli": "^4.6.0",
"webpack-dev-server": "^3.11.2"

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")

module.exports = {
    mode: "development",
    entry: "./src/index.js",
    devServer: {
        port: 8089, // 设置端口号
    },

    module: {
        rules: [
            {
                test: /\.ts$/,
                use: "ts-loader",
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"]
            }
        ]
    },

    plugins: [
        new HtmlWebpackPlugin({
            template: "./index.html"
        })
    ]
}

const path = require("path")

module.exports = {
    mode: "production",
    entry: "./lib/index.js",
    output: {
        filename: "yangEditor.js",
        path: path.resolve(__dirname, "./dist"),
        libraryTarget: 'umd'
    },
    
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: "ts-loader",
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"]
            }
        ]
    }
}

"scripts": {
		"dev": "webpack serve --open Chrome.exe",
		"build": "webpack --config webpack.build.config.js"
	},

export default class YangEditor {
	constructor(dom: string) {
		if (!dom) {
			throw new Error('请传入DOM节点！！！');
		}
		let editWrapper: HTMLElement = document.getElementById(dom);
	}
}

// 指令数组
const actions = [
	{
		command: 'formatblock',
		values: [
			{ text: '- 设置标题大小 -', value: 'selected' },
			{ text: 'H1标题', value: 'h1' },
			{ text: 'H2标题', value: 'h2' },
			{ text: 'H3标题', value: 'h3' },
			{ text: 'H4标题', value: 'h4' },
			{ text: 'H5标题', value: 'h5' },
		],
	},
	{
		command: 'forecolor',
		values: [
			{ text: '- 设置字体颜色 -', value: 'selected' },
			{ text: '红色', value: 'red' },
			{ text: '蓝色', value: 'blue' },
			{ text: '绿色', value: 'green' },
			{ text: '黑色', value: 'black' },
		],
	},
	{
		command: 'bold',
		values: [
			{ text: '- 设置字体粗体 -', value: 'selected' },
			{ text: '粗体', value: '' },
		],
	},
];

// 创建DOM节点
	private createDOM(type: string, className?: string): HTMLElement {
		let dom = document.createElement(type);
		dom.className = className || '';
		return dom;
	}

// 创建select节点
	private createSelectDOM(commandItem: ActionsItem): HTMLSelectElement {
		let select = document.createElement('select');
		commandItem.values.forEach((item) => {
			select.add(new Option(item.text, item.value));
			select.id = `${commandItem.command}`;
		});
		
		select.onchange = () => {
                       // select标签onchange事件，调用execCommand方法
			this.execCommand(commandItem.command, select.options[select.selectedIndex].value);
		};
		return select;
	}

private execCommand(cmd: string, value: string): void {
		//execCommand bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)
		// aCommandName 一个 DOMString ，命令的名称。
		//aShowDefaultUI 一个 Boolean， 是否展示用户界面，一般为 false
		//aValueArgument 一些命令（例如insertImage）需要额外的参数（insertImage需要提供插入image的url），默认为null。
		document.execCommand(cmd, false, value);
	}

import { YangEditor } from "../lib/index"
new YangEditor("yangEdit")