JavaScript で以下を実装する方法について、技術的なアドバイスをお願いします。
次のシナリオでは、ハイチャートを tinyMCE に統合する必要があります。
- ユーザーはtinyMCEメニューから「グラフを追加」を選択し、
- チャートを選択します (chartId は変数に格納されます)。
- チャートは tinyMCE の iframe にレンダリングされます (chartId を使用してチャート情報を取得し、既に実装されている ID を使用してチャートをレンダリングできるバックボーン ビューを使用します)。
また、これはすべて extJS アプリケーション内で行われていることにも注意してください。
このグラフは次のようになります。
- 画像のようにサイズ変更可能で編集可能
- ただし、ユーザーはハイチャート内にキャレットを配置してその中のテキストを更新することはできません。たとえば、画像のように完全に選択されています。
- 右クリックすると、イメージのように tinyMCE のポップアップ メニューが表示され、幅と高さのスタイルなどを設定できます。
また、tinyMCE から実際のマークアップを受け取ったときに、チャート全体ではなく、タグ "chart dataId="chartId"" などの形式のプレースホルダーを取得する必要もあります。
すでに行われていること:
- tinyMCE を extJS にアタッチし、form.field としてレンダリングしました。
- tinyMCE のツールバーにカスタム ボタンを追加しました
- チャートのレンダリングを virtual に実装し、この div を tinyMCE の iframe dom に追加しましたが、チャートは部分的にしかレンダリングされず、チャート内のテキストは選択可能であり、受け入れられません。
最終的に、主な質問は次のとおりです。
- チャートをtinyMCEのiframeに正しくレンダリングするにはどうすればよいですか?
- tinyMCE のチャートを画像のようなモードで選択および編集可能にする方法は?
- tinyMCEからマークアップを取得するときに、チャートをプレースホルダーに置き換える方法は?
アドバイスありがとう！