Git Product home page Git Product logo

Comments (4)

zhangY94 avatar zhangY94 commented on June 28, 2024 1

Thank you again for your help

from element-tiptap-vue3.

zhangY94 avatar zhangY94 commented on June 28, 2024

image
我想要实现的Link弹窗

from element-tiptap-vue3.

okijhhyu avatar okijhhyu commented on June 28, 2024

Снимок экрана от 2023-09-12 16-56-47

you should write your own button Link (AddlinkCommand component)

<template>
  <div>
    <command-button
      :is-active="editor.isActive('link')"
      :readonly="isCodeViewMode"
      :command="openAddLinkDialog"
      :enable-tooltip="enableTooltip"
      :tooltip="t('editor.extensions.Link.add.tooltip')"
      icon="link"
      :button-icon="buttonIcon"
    />

    <el-dialog
      v-model="addLinkDialogVisible"
      :title="t('editor.extensions.Link.add.control.title')"
      :append-to-body="true"
      width="400px"
      class="el-tiptap-edit-link-dialog"
    >
      <el-form :model="linkAttrs" label-position="right" size="small">
        <el-form-item
          :label="t('editor.extensions.Link.add.control.href')"
          prop="href"
        >
          <el-input
            v-model="linkAttrs.href"
            autocomplete="off"
            :placeholder = placeholder />
        </el-form-item>

        <el-form-item prop="openInNewTab">
          <el-checkbox v-model="linkAttrs.openInNewTab">
            {{ t('editor.extensions.Link.add.control.open_in_new_tab') }}
          </el-checkbox>
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button size="small" round @click="closeAddLinkDialog">
          {{ t('editor.extensions.Link.add.control.cancel') }}
        </el-button>

        <el-button
          type="primary"
          size="small"
          round
          @mousedown.prevent
          @click="addLink"
        >
          {{ t('editor.extensions.Link.add.control.confirm') }}
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, inject } from 'vue';
import {
  ElDialog,
  ElForm,
  ElFormItem,
  ElInput,
  ElCheckbox,
  ElButton,
} from 'element-plus';
import { Editor } from '@tiptap/core';
import CommandButton from '../CommandButton.vue';

export default defineComponent({
  name: 'AddLinkCommandButton',

  components: {
    ElDialog,
    ElForm,
    ElFormItem,
    ElInput,
    ElCheckbox,
    ElButton,
    CommandButton,
  },

  props: {
    editor: {
      type: Editor,
      required: true,
    },
    buttonIcon: {
      default: '',
      type: String
    },
    placeholder: {
      default: '',
      type: String
    }
  },

  setup() {
    const t = inject('t');
    const enableTooltip = inject('enableTooltip', true);
    const isCodeViewMode = inject('isCodeViewMode', true);

    return { t, enableTooltip, isCodeViewMode };
  },

  data() {
    return {
      linkAttrs: {
        href: '',
        openInNewTab: true,
      },

      addLinkDialogVisible: false,
    };
  },

  watch: {
    addLinkDialogVisible() {
      this.linkAttrs = { href: '', openInNewTab: true };
    },
  },

  methods: {
    openAddLinkDialog() {
      this.addLinkDialogVisible = true;
    },

    closeAddLinkDialog() {
      this.addLinkDialogVisible = false;
    },

    addLink() {
      if (this.linkAttrs.openInNewTab) {
        this.editor.commands.setLink({
          href: this.linkAttrs.href,
          target: '_blank',
        });
      } else {
        this.editor.commands.setLink({ href: this.linkAttrs.href });
      }

      this.closeAddLinkDialog();
    },
  },
});
</script>

```  about editing text give me week. i will think about this, when complete problems with work

from element-tiptap-vue3.

okijhhyu avatar okijhhyu commented on June 28, 2024

Thank you again for your help

No problem ask. If u need help

from element-tiptap-vue3.

Related Issues (15)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.