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;
?>by thinkfuture
我知道答案，我要回答
私活外包
最新提问
