強くお勧めします! PowerNice Web Edition + デスクトップソフトウェアを使用すると、ドキュメントの編集が簡単になります。

序文

皆さん、こんにちは。徐暁熙です。以前、PowerNiceというオンラインドキュメントエディタを紹介しました。PowerNiceを使えば、簡単にドキュメントを作成し、HTML、PDF、MD、PNG画像など、様々な形式でワンクリックでエクスポートできます。（下図参照）

最近、エディターがより多くのシナリオのニーズを満たすようにするために、Mac と Windows をサポートするデスクトップソフトウェアバージョンである powernice-electron を開発しました。

次に、PowerNice の技術的な実装と機能を紹介します。

背景

技術系のプロフェッショナルとして、技術文書を作成し、専門知識を共有する必要に直面することは少なくありません。オンラインでは、手軽に利用できるドキュメント管理ツールが数多く存在します。そこで、好奇心から友人と協力して、自分たちで使えるツールを作ってみました。今回は、軽量で柔軟性が高く、便利なドキュメント編集ツール「powerNice」をご紹介します。

「powerNice」では、記事や文書を書く方法として、プログラマーに人気のmarkdownと、技術者以外の人にとって最も使いやすいリッチテキストエディターの 2 つの方法を提供しています。

デモ

技術の選択

「powerNice」オンラインドキュメントエディターを実装するために、次のコアテクノロジスタックを採用しました。

反応する
アントデザイン
ドヴァ
編集者向け
ブラフト編集者
ノード.js
ブラウザ指紋認識技術

機能の概要

1. マルチモード編集

マルチモーダル編集とは、主にリッチテキストエディタやMarkdownエディタを使って記事を編集できる機能を指します。ここでは、最も馴染みのあるReactを使ってこれを実装します。以下に例を示します。

2. 複数のテーマ

現在、ライトテーマとダークテーマの2つのテーマがサポートされています。これらは主に夜間の書き込みを容易にするように設計されています。効果は以下の通りです。

（１）色が濃い。

（２）明るい色。

3. ワンクリックのインポートとエクスポートをサポート

執筆効率を向上させ、記事のさまざまな用途を可能にするために、以下に示すように、ワンクリックでのファイルのインポートとエクスポートなどの機能を提供しています。

Markdown をエクスポートします。
PDF をエクスポートします。
記事に基づいてポスター画像をエクスポートします。
Markdown ファイルをインポートします。
記事の HTML コンテンツをダウンロードします。

スクリーンショットを以下に示します。

ダウンロードした HTML コンテンツのプレビューは次のとおりです。忠実度はかなり高いです。

4. マルチモードプレビュー

マルチモードプレビューは主に右側のプレビューエリアに表示されます。以下の画像に示すように、モバイルとPCの両方でのプレビューをサポートしています。

5. 単語数と行数の統計

単語数と行数の統計は、主に著者のコンテンツ統計に役立ちます。実装は難しくありません。プレビューを見てみましょう。

6. 記事管理

記事管理は、主にユーザーが作成したコンテンツの管理を指します。これはオンラインツールであるため、ユーザー識別には主にブラウザフィンガープリンティング技術が用いられます。ユーザーは、以下に示すように、エディターの記事リストで簡単に記事を切り替えて編集できます。

コア技術の実装

1. 複数のファイル形式をインポートおよびエクスポート

「md/htmlファイルのインポート」 mdファイルをインポートするには、主にAntのアップロードコンポーネントとFileReader APIを使用します。具体的な実装は次のとおりです。

 {
 名前: 'ファイル'
 showUploadList : false 、
 beforeUpload ( ファイル: 任意): 任意{
 const リーダー= 新しいFileReader ()
 リーダー.onload = 関数( e : イベント) {
 const data = ( e as any ). target . result
 if ( エディター=== 'リッチテキスト' ) {
 // ...
 } それ以外{
 // ...
 }
 }
 reader.readAsText ( ファイル)
 },
 }

HTMLのダウンロードの原理は非常にシンプルです。レンダリングされたHTML文字列を取得し、HTMLテンプレートを使用して完全なHTMLファイルにラップし、最終的にFileオブジェクトとして保存します。その後、FileSaverを使用してダウンロードします。具体的な手順は以下のとおりです。

コアコードは次のとおりです。

 const doc = document . querySelector ( '.for-markdown-preview' ) をHTMLElement として
const html = createMDHtml ( doc . innerHTML , article )
 file = 新しいファイル([ html ], `$ { moment (). format ( 'YYYYMMDDHHmmss' )}. html` , { type : 'text/html;charset=utf-8' })
 // ファイルをダウンロード
名前を付けて保存( ファイル)

2. ブラウザ指紋認識技術に基づくユーザー識別

ブラウザフィンガープリンティングには多くの知識が必要なので、ここではキャンバスフィンガープリンティングについて簡単に紹介します。

「Canvasフィンガープリンティング」とは、フォントレンダリングエンジン、アンチエイリアシング、サブピクセルレンダリングなどの処理方法におけるシステム間の差異を利用したフィンガープリント認識技術です。同じテキストをCanvasで画像に変換する場合も、同じ要素をCanvasで描画する場合も、前述の差異により結果が異なります。

したがって、上記の手法を使用して、異なるユーザーブラウザを識別し、それによってユーザーを区別し（これは確率的なイベントですが）、ログインせずに対応するコンテンツを保存するという目標を達成できます。基本的な実装コードは次のとおりです。

 指紋を作成= () => {
 const キャンバス= document . getElementById ( 'anchor-uuid' ) をHTMLCanvasElement として
const context = canvas . getContext ( '2d' ) をCanvasRenderingContext2D として
context.font = ' 18pt Arial'
 コンテキスト. textBaseline = 'top'
 context . fillText ( 'こんにちは、ユーザーさん。' , 2 , 2 )
 const 指紋= キャンバス. toDataURL ( 'image/jpeg' )
 // ハッシュ
const secret = 'nice'
 const hash = crypto . createHmac ( 'sha256' , secret )
 . アップデート（ 指紋）
 . ダイジェスト( 'hex' )

 ハッシュを返す
}

DUICUO