contenteditable="true"要素内に右クリックで所定のテキストを挿入したい

以下の様にcontenteditable="true"の要素があり、その中にテキストが入っています。
このテキストの任意の場所に入力カーソルをあわせ、右クリックを行うと☆マークが入るようにしようと思い試行錯誤してみたのですが
うまくいきません。

html
1<div contenteditable="true" id="aaa">ここにテキスト</div>

html
1<body>
2<div contenteditable="true" id="aaa">ここにテキスト</div>
3</body>

js
1  const target = document.getElementById('aaa');
2  target.oncontextmenu = function(){
3    //ここに処理
4　　return false;
5  }

『ここに処理』の所に色々と書いてみたのですが、まともに動きません(泣)
js初心者なので根本的な記述が間違っているのかもしれません。
どなたかご教授いただけますと幸いです。
よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

javascript
1target.oncontextmenu = function(){
2  target.ownerDocument.execCommand('inserttext', false, '☆');
3  return false;
4}

『ここに処理』の所に色々と書いてみた

その「色々」も質問に含めるとよいですね。どこを間違えたか回答者が指摘できるので。

投稿2021/01/06 16:11

総合スコア20929

2021/01/07 01:19

int32_t様早速の回答ありがとうございます。試してみた所希望する状態になりました！本当にありがとうございました。＞その「色々」も質問に含めるとよいですね。大変失礼致しました。今後はそのように致します。ご指摘ありがとうございました。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.47%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

関連した質問