这样
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/grapes.0.21.1.css"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/grapes.0.21.1.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/grapesjs-preset-webpage.1.0.2.js"></script> <style> body, html { height: 100%; margin: 0; } #gjs { border: 3px solid #444; } </style> </head> <body> <div id="gjs" style="height:100%;"></div> <script> document.addEventListener('DOMContentLoaded', function () { const editor = grapesjs.init({ container: '#gjs', fromElement: true, height: '100%', width: 'auto', plugins: ['gjs-preset-webpage'], pluginsOpts: { 'gjs-preset-webpage': {} } }); // Initial content editor.setComponents(` <div> <p id="selectable-link">Click here to select a link</p> </div> `); const links = [ { label: 'Google', value: 'https://www.google.com' }, { label: 'Facebook', value: 'https://www.facebook.com' }, { label: 'Twitter', value: 'https://www.twitter.com' } ]; // Extend the Component Manager to add a custom trait for href editor.Components.addType('link', { model: { defaults: { traits: [ // Replace href trait with a dropdown { type: 'select', label: 'Href', name: 'href', options: links.map(link => ({ value: link.value, name: link.label })) } ] } } }); // Apply the custom link component type to <a> elements editor.DomComponents.addType('link', { isComponent: el => el.tagName === 'A', model: { defaults: { tagName: 'a', draggable: true, droppable: true, traits: [ { type: 'select', label: 'Href', name: 'href', options: links.map(link => ({ value: link.value, name: link.label })) } ] } } }); // Convert the initial text element to a link component when selected editor.on('component:selected', (component) => { if (component.getAttributes().id === 'selectable-link') { component.set({ tagName: 'a', draggable: true, droppable: true }); component.addTraits([ { type: 'select', label: 'Href', name: 'href', options: links.map(link => ({ value: link.value, name: link.label })) } ]); } }); }); </script> </body> </html>
网友回复
python如何实现torrent的服务端进行文件分发p2p下载?
如何在浏览器中录制摄像头和麦克风数据为mp4视频保存下载本地?
go如何编写一个类似docker的linux的虚拟容器?
python如何写一个bittorrent的种子下载客户端?
ai能通过看一个网页的交互过程视频自主模仿复制网页编写代码吗?
ai先写功能代码通过chrome mcp来进行测试功能最后ai美化页面这个流程能行吗?
vue在手机端上下拖拽元素的时候如何禁止父元素及body的滚动导致无法拖拽完成?
使用tailwindcss如何去掉响应式自适应?
有没有直接在浏览器中运行的离线linux系统?
nginx如何保留post或get数据进行url重定向?