grapesjs如何自定义模板标签,方便后端php进行动态渲染输出html?
网友回复
1、首先是前端js,自顶一个customtag标签及属性,内容可以按照真实的样式模拟:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/grapesjs-preset-webpage.min.css"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/grapes.min.css"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/grapes.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/grapesjs-preset-webpage.min.js"></script> <style> body, html { height: 100%; margin: 0; } </style> </head> <body> <div id="gjs"> </div> <script> const editor = grapesjs.init({ container: '#gjs', height: '100%', fromElement: true, storageManager: false, }); editor.DomComponents.addType('customtag', { model: { defaults: { // 设定组件的类型 type: 'customtag', // 设定组件的标签 tagName: 'customtag', // 不允许组件被选中以防止内容改变 selectable: false, // 标记组件不能被拖动 draggable: false, // 给组件一个特殊属性,稍后用于服务器端识别 attributes: { 'data': '123',"class":'bfw' }, // 组件在画布上的显示内容 content: '这里可替换模拟真实标签内容' } }, view: { // 可以是一个自定义函数来渲染此组件的模板 } }); // 现在在编辑器中添加这个自定义组件 editor.addComponents({ type: 'customtag' }); </script> </body> </html>
2、后端我们以php为例,解析customtag标签数据最终替换整个标签内容:
<?php // HTML字符串 $htmlContent = '<div><customtag class="bfw" data="1">内容</customtag><p data-template="true">Old Content</p><span>Irrelevant content</span><p data-template="true">Other old content</p><customtag class="bfw" data="2">内容</customtag></div>'; // 创建DOMDocument实例 $dom = new DOMDocument(); // 加载HTML内容 @$dom->loadHTML($htmlContent); // 创建DOMXPath实例 $xpath = new DOMXPath($dom); // 通过DOMXPath查询找到所有具有data-template属性的<p>标签 $templateNodes = $xpath->query('//customtag[@class="bfw"]'); foreach ($templateNodes as $node) { // 创建一个新元素<div>来替换旧的<p>标签 $newNode = $dom->createElement('div', 'New Content'); $node->nodeValue = 'New Content'; echo $node->getAttribute('data'); // 可选: 如果你需要将属性从旧元素复制到新元素 // foreach ($node->attributes as $attribute) { // $newNode->setAttribute($attribute->name, $attribute->value); // } // 使用新元素替换原有的元素 $node->parentNode->replaceChild($newNode, $node); // 替换节点的内容 } // 获取新的HTML内容并输出 $newHtmlContent = $dom->saveHTML(); echo $newHtmlContent; ?>