問題タブ [clipboard.js]

コントローラーでこのようなクリップボードを使用する

問題は、コントローラーがロードされるたびに、クリップボードの新しいオブジェクトが作成されることです。新しいオブジェクトを作成する前に、すべてのオブジェクトを破棄する方法はありますか? ライブラリへのリンクは次のとおりです: https://zenorocha.github.io/clipboard.js/

簡単な例を次に示します。

Clipboard.jsを使用して、ボタンが押されたときにテキストをクリップボードにコピーします。コピーが成功したら、それを反映するようにコピー ボタンのタイトルを変更したいと思います。私が参照しているボタン コンポーネントは既にレンダリングされており、this.copyButton.props.titleコンポーネントが不変であるため、明らかに機能しません。

titleでは、ボタンの値を変更するにはどうすればよいでしょうか。親コンポーネントに状態プロパティを含めることができることはわかっていますが、親コンポーネントを完全にステートレスに保つためにそれを避けたいと思います。this.copyButton成功のコールバック内で単純に再割り当てできますか (試してみましたが、うまくいきませんでした)。

より一般的に言えば、親コンポーネントは子のプロップを更新する場合、どのように更新する必要がありますか? 状態を使用することが本当に唯一の方法ですか?

注: それが重要な場合は、ES6 を使用しています。

私はClipboard.jsウェブサイトのプラグインを使用していますが、クリック時に.copyボタンの親クラスのみを選択するという問題に悩まされています。

問題は、タグ内のコードをリッチテキスト形式でコピーしたいのですが、pre使用している方法でうまくいきます ( return document.querySelector("myClass")) が、前のコードを同様の質問で見つけたコードに変更すると( return $(trigger).closest(".fw-code-copy").next("code").text();) 、各ブロックのコードをコピーしますが、フォーマットが失われます。コードがプレーンテキストとしてコピーされていることを意味します。

私が持っているコードを確認して、ボタンの親のクラスを見つける方法を教えてください。

HTML

CSS

JS

Context

The real free software (GPLv3) application (motivating this question) that I am coding is the MELT monitor on github (FWIW, I am at commit 56a83d358d3966eddb55... on February 11^th, 2016). It is on Linux/x86_64/Debian, Firefox/44, JQuery-2.2.0, JqueryUI 1.11.4, clipboard.js 1.5.8....

A more open (but without code) related question was downvoted on Programmers. So I made a JsFiddle example for this very question, but that JsFiddle example is probably very wrong.

I have a (dynamically generated) HTML document with some <span>-s of class='momitemref_cl' like <span class='momitemref_cl'>this</span> etc... (the inside content of such spans is always a single word like this, actually some variable name or identifier in some DSL of mine). My goal is to have a dynamically generated menu for each such spans to enable some operations on them, in particular: hilight every occurrence of that word, and copy & select the word to the browser's and desktop's clipboard.

There are many questions here about copying to the clipboard in Javascript, such as this one. Several of them mention Zeno Rocha's clipboard.js which I am trying to use.

Code with explanation

To explain some of the JsFiddle: I am creating the JQueryUI menu with

In the above code, I don't know what to put in //// what should go here?; perhaps it might be something similar to:

but AFAIU this don't work as expected, and I feel that clipboard operations need the user event (e.g. a mouse click or down) trigerring them.

The clipboard is initialized with

I guess (but I am not sure) that the /// some code is missing here probably should return the text value of the relevant span.

Questions

So I don't know how to copy the span's content to the clipboard (//// what should go here? ....) and how to put into the clipboard its text (/// some code is missing here probably....)

The full MVCE code is this JsFiddle

In other words, how to use clipboard.js from a JQueryUI menu item to copy a span's content to the browser's clipboard ??

Perhaps the entire approach is wrong, and perhaps I should use contextmenu (but then, how to customize it only for span-s of class='momitemref_cl' ?)

To make things even more complex, I actually have in MELT monitor (but not in this JsFiddle...) two CSS classes mom_itemref_cl & mom_itemval_cl that I want to behave likewise.

PS. I messed the JsFiddle when copying code here. I updated it, https://jsfiddle.net/bstarynk/g2notLd7/132/

NB. I could be satisfied with an answer working only on recent Firefox & Chrome.

サーバーへの Ajax 呼び出しを (javascript を使用して) 行う Web ページがあります。これは、ローカル クリップボードに挿入する HTML 形式のテキストを返し、ユーザーがメールまたはカレンダーに貼り付け (ctrl-v) できるようにします。応用。クリップボードにコピーしているテキストがユーザー インターフェイスに表示されません。clipboard.js を使用して、HTML をクリップボードに入れることができましたが、それを Outlook または Gmail に貼り付けると、フォーマットされたコードではなく HTML ソース コードが表示されます。これをできるだけ多くのブラウザー (モバイルを含む) で動作させたいと考えています。

以下は、私が現在使用している JavaScript の簡易版です。