dak ブログ

python、rubyなどのプログラミング、MySQL、サーバーの設定などの備忘録。レゴの写真も。

semaphore による同時実行制御

2024-05-10 00:02:32 | SVG
semaphore による同時実行制御の例。 以下は new Semaphore(1) で同時実行数を1にした実行例です。 ■プログラム
import { setTimeout } from 'timers/promises';
import { Semaphore } from 'await-semaphore';

(() => {
  const s = new Semaphore(1);

  s.use(async () => {
    console.log('before wait 1');
    await setTimeout(5000);
    console.log('after wait 1');
  });

  s.use(async () => {
    console.log('before wait 2');
    await setTimeout(1000);
    console.log('after wait 2');
  });
})();
■実行結果
before wait 1
after wait 1
before wait 2
after wait 2

Quill でリッチテキストの編集

2024-05-06 23:25:09 | javascript
Quill でリッチテキストを編集する方法のメモ。

toolbar で表示するメニューを指定することができます。

■HTML
<!DOCTYPE html><html><head><link href="https://cdn.jsdelivr.net/npm/quill@2.0.1/dist/quill.snow.css" rel="stylesheet" /><script src="https://cdn.jsdelivr.net/npm/quill@2.0.1/dist/quill.js"></script><title>Quill</title></head><body><form></form>
<button onclick="show_contents()">submit</button>
<script type="text/javascript">function show_contents() {document.getElementById('editor-contents').innerHTML = quill.getSemanticHTML();console.log(JSON.stringify(quill.getContents()));}const options = {theme: 'snow',placeholder: '本文を入力してください',modules: {toolbar: [['bold', 'italic', 'link']],},};const quill = new Quill('#editor', options);</script></body></html>

■リッチテキストのデータ形式

getContents() でリッチテキストのデータを取得すできます。
{"ops": [{"insert":"aaa\n"},{"attributes":{"bold":true},"insert":"bbb"},{"insert":"\n"},{"attributes":{"italic":true,"bold":true}, "insert":"ccc"},{"insert":"\n"},{"attributes":{"link":"https://www.goo.ne.jp/"},"insert":"ddd"},{"insert":"\neee\n"}]}

■HTML での表示

getSemanticHTML() で入力内容をHTML化できます。

aaa

bbb

ccc

ddd

eee