<template> <div> <div> <button @click="editor.chain().focus().setParagraph().run()">正文</button> <button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()">H1</button> <button @click="editor.chain().focus().toggleHeading({ level: 2 }).run()">H2</button> <button @click="editor.chain().focus().toggleHeading({ level: 3 }).run()">H3</button> <button @click="editor.chain().focus().toggleHeading({ level: 4 }).run()">H4</button> <button @click="editor.chain().focus().toggleHeading({ level: 5 }).run()">H5</button> <button @click="editor.chain().focus().toggleHeading({ level: 6 }).run()">H6</button> <button @click="editor.chain().focus().toggleBlockquote().run()">引用</button> <br> <button @click="editor.chain().focus().toggleBold().run()">加粗</button> <button @click="editor.chain().focus().toggleUnderline().run()">下划线</button> <button @click="editor.chain().focus().toggleItalic().run()">斜体</button> <button @click="editor.chain().focus().toggleStrike().run()">删除线</button> <button @click="editor.chain().focus().toggleCode().run()">行内代码</button> <button @click="editor.chain().focus().toggleSuperscript().run()">上标</button> <button @click="editor.chain().focus().toggleSubscript().run()">下标</button> <button @click="editor.chain().focus().unsetAllMarks().run()">清除格式</button> <input type="color" @input="editor.chain().focus().setColor($event.target.value).run()" :value="editor.getAttributes('textStyle').color" > <button @click="editor.chain().focus().toggleHighlight({ color: '#8ce99a' }).run()">高亮</button> <button @click="editor.chain().focus().setFontSize('20px').run()">20px</button> <br> <button @click="editor.chain().focus().toggleBulletList().run()">无序列表</button> <button @click="editor.chain().focus().toggleOrderedList().run()">有序列表</button> <button @click="editor.chain().focus().toggleTaskList().run()">待办</button> <br> <button @click="editor.chain().focus().setTextAlign('left').run()">左对齐</button> <button @click="editor.chain().focus().setTextAlign('center').run()">居中对齐</button> <button @click="editor.chain().focus().setTextAlign('right').run()">右对齐</button> <button @click="editor.chain().focus().setTextAlign('justify').run()">两端对齐</button> <button @click="editor.chain().focus().unsetTextAlign().run()">不设置对齐</button> </div> <div style="width: 500px;height: 500px;border: 1px solid #ccc"> <editor-content class="tiptap" style="border: 1px solid pink;height: 100%;overflow-y: auto" :editor="editor"/> </div> <div> <el-input style="width: 500px;" v-model="prompt" type="textarea"></el-input> <br> <el-button @click="generateText">生成长文本</el-button> </div> </div></template><script>import {Editor, EditorContent} from '@tiptap/vue-2'import StarterKit from '@tiptap/starter-kit'import Underline from '@tiptap/extension-underline'import Superscript from '@tiptap/extension-superscript'import Subscript from "@tiptap/extension-subscript"import Text from '@tiptap/extension-text'import TextStyle from '@tiptap/extension-text-style'import {Color} from '@tiptap/extension-color'import Highlight from '@tiptap/extension-highlight'import FontSize from './fontSize'import TaskItem from '@tiptap/extension-task-item'import TaskList from '@tiptap/extension-task-list'import TextAlign from '@tiptap/extension-text-align'import {marked} from 'marked';import axios from "axios";export default { name: "Tiptap.vue", components: { EditorContent, }, data() { return { editor: null, // 提示词 prompt: '到北京的旅游攻略，时间：7月15日到7月20日，我和我的家人，包括爷爷奶奶，他们比较喜欢历史悠久的名胜古迹和自然山水，有哪些必打卡的地方，需要携带哪些物品，有什么注意的地方，我需要提前准备什么', } }, mounted() { this.editor = new Editor({ content: '', extensions: [StarterKit, Underline, Superscript, Subscript, Text, TextStyle, Color, Highlight, FontSize, TaskList, TaskItem.configure({ nested: true, }), TextAlign.configure({ types: ['heading', 'paragraph'], }),], }) }, beforeDestroy() { this.editor.destroy() }, created() { }, methods: { // 生成长文本 generateText() { const url = 'https://open.hunyuan.tencent.com/openapi/v1/agent/chat/completions'; const headers = { 'X-Source': 'openapi', 'Content-Type': 'application/json', 'Authorization': 'Bearer 你的Token' }; const data = { "assistant_id": "你的智能体ID", "user_id": "username", "stream": false, "messages": [ { "role": "user", "content": [ { "type": "text", "text": this.prompt, } ] } ] }; axios.post(url, data, {headers}) .then(response => { console.log(response.data); let content = response.data.choices[0].message.content; console.log(content) let html = marked(content, {sanitize: true}); this.editor.commands.setContent(html); }) .catch(error => { console.error('There was an error!', error); // 处理错误情况 }); } }}</script><style scoped lang="scss"></style>
评论