Rich Text Editor Demo之Webpack5+TypeScript篇

2023-09-30 14:53:29

使用 Webpack5 + TypeScript 构建富文本编辑器

在当今数字化的世界中，富文本编辑器已成为必不可少的工具，它使我们能够轻松创建和编辑包含格式化文本、图像、链接等内容的丰富内容。为了满足这一需求，本文将指导您使用 Webpack5 和 TypeScript 从头开始构建自己的富文本编辑器。

项目构建

安装依赖项

npm install webpack webpack-cli typescript ts-loader --save-dev

创建 webpack.config.js 文件

const path = require('path');

module.exports = {
  entry: './src/index.ts',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.ts', '.js'],
  },
};

在 src 目录下创建 index.ts 文件，并编写如下代码：

import { Editor } from '@toast-ui/editor';

const editor = new Editor({
  el: document.querySelector('#editor'),
  height: '500px',
});

启动项目

npx webpack

访问项目

在浏览器中访问 http://localhost:8080/dist/bundle.js 即可看到富文本编辑器 Demo。

实现富文本功能逻辑

为了增强编辑器的功能，我们在 index.ts 文件中添加了以下代码：

import { Editor } from '@toast-ui/editor';

const editor = new Editor({
  el: document.querySelector('#editor'),
  height: '500px',
  initialValue: 'Hello, world!',
  previewStyle: 'vertical',
});

editor.addCommand('bold', {
  name: 'bold',
  exec() {
    editor.exec('bold');
  },
});

editor.addCommand('italic', {
  name: 'italic',
  exec() {
    editor.exec('italic');
  },
});

editor.addCommand('underline', {
  name: 'underline',
  exec() {
    editor.exec('underline');
  },
});

editor.addCommand('strikethrough', {
  name: 'strikethrough',
  exec() {
    editor.exec('strikethrough');
  },
});