Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cannot enter input in URL dialog #379

Open
HikaruShiho opened this issue May 11, 2023 · 0 comments
Open

Cannot enter input in URL dialog #379

HikaruShiho opened this issue May 11, 2023 · 0 comments

Comments

@HikaruShiho
Copy link

HikaruShiho commented May 11, 2023

Also posted in Stack Overflow
https://stackoverflow.com/questions/76223386/tinymce-5-cannot-enter-input-in-url-dialog

Current Status

  • Using the link plug-in, click on the link icon in the menu bar to display the URL dialog.
  • However, I am unable to enter the URL or title I want to link to in the input element in the dialog.
  • But when I enter text into the editor -> select the entered text -> paste the URL, the link is set, and when I open the dialog, the text and the URL to be linked are set in the input element.

Current Code

<script setup lang="ts">
import Editor from "@tinymce/tinymce-vue";

const init = {
  selector: "textarea",
  height: 500,
  skin: "oxide-dark",
  placeholder: "コンテンツを入力",
  plugins: "link lists",
  toolbar:
    "link custom-image h1 h2 h3 | bold italic underline forecolor backcolor | numlist bullist indent | alignleft aligncenter alignright | blockquote",
  menubar: "insert | format",
  link_default_target: '_blank', // リンクを別タブで開く
  language: "ja", // 言語を日本語に設定
  branding: false, // 右下のロゴを非表示
  content_style: "img { max-width: 100%; height: auto; }", // imgタグのサイズを調整
  setup: function (editor: any) {
    editor.ui.registry.addButton("custom-image", {
      icon: "image",
      tooltip: "custom-image",
      onAction: function () {
        // <input type="file">のダイアログを開く
        // 画像アップロードでカーソル位置にimgタグを挿入
        const input = document.createElement("input");
        input.setAttribute("type", "file");
        input.setAttribute("accept", "image/*");
        input.click();
        input.onchange = function () {
          if (input.files && input.files[0]) {
            const file = input.files[0];
            const reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function () {
              const img = document.createElement("img");
              img.src = reader.result as string;
              editor.insertContent(img.outerHTML);
            };
          }
        };
      },
    });
  },
};
</script>

<template>
  <Editor api-key="xxxxxx" :init="init" />
</template>

Expected behavior

  • I want to set the title and URL from the input element of the URL tie log.

development environment

  • @tinymce/tinymce-vue ^5.0.1
  • @ionic/vue ^6.0.0
  • vue ^3.2.21
  • typescript ^4.3.5
  • Node v18.10.0
  • MacBook Air (M1, 2020)

Is this a bug?
Or am I describing it wrong?
I need your help.


Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant