Comments (4)
Thank you again for your help
from element-tiptap-vue3.
from element-tiptap-vue3.
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.
Thank you again for your help
No problem ask. If u need help
from element-tiptap-vue3.
Related Issues (15)
- Fix bugs
- Weird behaviour when setting height HOT 2
- Unable to add @tiptap/extension-gapcursor extension HOT 4
- The link on the toolbar always placed first HOT 5
- Slash Command
- how to add superscript and subscript for the tiptap? HOT 1
- paste image event HOT 6
- Can I add lighting to my code? HOT 4
- Link MenuBubble Bug!
- How can I retrieve the selected content, for example, when selecting a piece of text in an editor and processing the selected text? HOT 1
- Uncaught (in promise) TypeError: Image is not a constructor HOT 1
- 使用element-tiptap-vue3,选中文本内容,然后设置h1,h2,h3标题不起作用,看不到字号大小变化 HOT 1
- About `FontFamily` configuration issues HOT 1
- Dynamic assignment to rich text The text content is not updated.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from element-tiptap-vue3.