tinyMCE

6709 ワード
テキストリンク
現在、プロジェクトでtinyMCEを使用して追加画像を編集する機能が使用されています.
        <Editor
          apiKey="velrv8dvpig61i0ewv03ljv8jsy1rwysgrwh814cutgpmd6k"
          value={text}
          onEditorChange={setText}
          init={{
            language: 'ko',
            height: 700,
            menubar: false,
            plugins: [
              'advlist autolink lists link image charmap print preview anchor',
              'searchreplace visualblocks code fullscreen',
              'insertdatetime media table paste code help wordcount'
            ],
            toolbar:
              'add_image | bold italic backcolor | alignleft aligncenter ' +
              'alignright alignjustify | bullist numlist outdent indent |',
            content_style:
              'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
            setup: (editor) => {
              editor.ui.registry.addButton('add_image', {
                text: '이미지추가',
                onAction: () => {
                  setIsModal(true);
                }
              });
            }
          }}
        />
onActionでは、該当するカスタマイズツールバーにクリック時に起動する関数を追加すればよい.
すぐにinputfileを操作して、すぐにウィンドウを開きたいのですが.

onActionには関数しか含まれないので、モードを作成し、そのモードウィンドウにInputを入れなければなりません.
        <EditorModal isModal={isModal} setIsModal={setIsModal}>
          <ImageLabel htmlFor="modalImg">상품추가</ImageLabel>
          <ImageInput
            type="file"
            id="modalImg"
            multiple
            accept="image/*"
            onChange={addModalImg}
          />
        </EditorModal>

商品追加ボタンをクリックするとfileウィンドウが表示されます
私はそのモード化プロセスを経なければならないのが好きではないので、onActionにすぐにinputfileウィンドウをポップアップさせたいと思っています.
TinyMCE編集なので、関連要素に近づくのは難しいので、onActionはすぐにinputfile動作をとる必要があります.
調べてみると、https://stackoverflow.com/questions/2048026/open-file-dialog-box-in-javascriptドーム要素にclickメソッドが存在することを確認しました.
だからuserefでinput要素を接続します
	  	const inpEditor = useRef<HTMLInputElement>(null);

        <Editor
          apiKey="velrv8dvpig61i0ewv03ljv8jsy1rwysgrwh814cutgpmd6k"
          value={text}
          onEditorChange={setText}
          init={{
            language: 'ko',
            height: 700,
            menubar: false,
            plugins: [
              'advlist autolink lists link image charmap print preview anchor',
              'searchreplace visualblocks code fullscreen',
              'insertdatetime media table paste code help wordcount'
            ],
            toolbar:
              'add_image | bold italic backcolor | alignleft aligncenter ' +
              'alignright alignjustify | bullist numlist outdent indent |',
            content_style:
              'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
            setup: (editor) => {
              editor.ui.registry.addButton('add_image', {
                text: '이미지추가',
                onAction: () => {
                  if (inpEditor.current) {
                    inpEditor.current.click();
                  }
                }
              });
            }
          }}
        />

        <ImageInput
          type="file"
          multiple
          accept="image/*"
          onChange={addModalImg}
          ref={inpEditor}
        />
これによりinputを直接クリックすることが可能になる.
Safari(Safari)のフォントが変に見える場合は、解析/CSS font-familyプロパティの要約を実行します.
C言語Express 9章#06