wysiwyg - 使用 TypeScript 執行 Quill 編輯器

我如何才能在 TypeScript 中運行 Quill 編輯器？

我有一個來自 Quill 網站的 WYSIWYG 編輯器 Quill 的運作範例。以下程式碼只需要複製到像是 example.html 的 HTML 檔案中，就會有一個簡單的文字編輯器範例：

<!-- Include stylesheet -->
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">

<!-- Create the editor container -->
<div id="editor">
  <p>Hello World!</p>
  <p>Some initial <strong>bold</strong> text</p>
  <p><br></p>
</div>

<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

<!-- Initialize Quill editor -->
<script>
  var quill = new Quill('#editor', {
    theme: 'snow'
  });
</script>

現在我正試著在 TypeScript 中運行這個範例。第一件事是安裝 quill，然後安裝 TypeScript 的型別，應該是 @types/quill。將它們加入 package.json 文件中，然後執行 yarn 或 npm 會載入這些類別：

"dependencies": {
    "@types/jquery": "3.3.31",
    "@types/quill": "^2.0.3",
    "@types/react": "16.9.11",
    "@types/react-dom": "16.9.4",
    "@types/react-router-dom": "5.1.2",
    "bootstrap": "4.3.1",
    "jquery": "3.4.1",
    "popper.js": "1.16.0",
    "quill": "^1.3.7",
    "react": "16.11.0",
    "react-dom": "16.11.0",
    "react-router-dom": "5.1.2",
},

但是當使用 webpack-dev-server 執行範例時，我收到了一個錯誤。命令是：

"scripts": {
    "develop": "webpack-dev-server --mode development --open --port 8081 --host 0.0.0.0 --config webpack.dev.config.js"
}

錯誤是：

ERROR in [at-loader] ./node_modules/@types/quill/node_modules/quill-delta/dist/Delta.d.ts:1:8 
    TS1259: Module '"/home/myuser/Documents/quill-example/node_modules/@types/quill/node_modules/fast-diff/diff"' can only be default-imported using the 'esModuleInterop' flag

我想 @types/quill 套件可能有問題，對吧？但是到底是哪裡出錯了？esModuleInterop 到底在做什麼？有什麼方法可以解決這個錯誤嗎？

我找不到任何 Quill TypeScript 的範例。在 TypeScript 中運行它應該相當容易，對吧？

答案＃1

打開 esModuleInterop。這樣做應該不會有任何問題。

基本上，有兩個介面用於進口/出口。

CommonJS 的方式： （這個先出現）

// a.js
module.exports = { foo: 'foo', bar: 'bar' }
exports.baz = 'baz'

// b.js
const { foo, bar, baz } = require('./a.js')

請注意，匯出總是一個完整的單一物件。module.exports 是可以被 require 的值。

以及 ES6 的方式： （新的且現今推薦的標準）

// a.js
export default { foo, bar }
export const baz = 'baz'

// b.js
import baz, { foo, bar } from './a'

請注意，現在有命名匯出和預設匯出。ES6 模組沒有單一的匯出值，但可以匯出多個值（其中一個是預設值）。這些差異使得在這些語法之間進行轉換有點複雜。

esModuleInterop 編譯器選項允許你在使用 CommonJS 風格的 module.exports 時使用 ES6 風格的 import，反之亦然。

這裡有更深入的解釋。

此外，這個 GitHub 問題似乎表明 quill 需要啟用 esModuleInterop。這沒問題。不應該會對你造成任何困擾。

看起來我們將走依賴人們遵循 Typescript 開啟 esModuleInterop 建議的路線，所以不會保留這個 PR。

所以他們討論了不要求它，決定不這麼做，並結束了這個問題。

答案＃2

這是一個使用 TypeScript 的可運行範例。你不需要安裝任何其他庫。

import React from "react";
import ReactQuill from "react-quill";
import "react-quill/dist/quill.snow.css";
 
const modules = {
  toolbar: [
    [{ header: [1, 2, false] }],
    ["bold", "italic", "underline", "strike", "blockquote"],
    [
      { list: "ordered" },
      { list: "bullet" },
      { indent: "-1" },
      { indent: "+1" },
    ],
    ["link", "code"],
    ["clean"],
  ],
};
 
const formats = [
  "header",
  "bold",
  "italic",
  "underline",
  "strike",
  "blockquote",
  "list",
  "bullet",
  "indent",
  "link",
  "code",
];
 
interface OnChangeHandler {
  (e: any): void;
}
 
type Props = {
  value: string;
  placeholder: string;
  onChange: OnChangeHandler;
};
 
const TextEditor: React.FC<Props> = ({ value, onChange, placeholder }) => {
  return (
    <>
      <ReactQuill
        theme="snow"
        value={value || ""}
        modules={modules}
        formats={formats}
        onChange={onChange}
        placeholder={placeholder}
      />
    </>
  );
};
 
export default TextEditor;

程式碼的版權應歸此文章的原作者所有