PHP历理 KaTeX指定渲染容器
点击查看代码
<?php
ini_set('session.gc_maxlifetime', 86400);
session_start();
define('CHAOYI',true);
require $_SERVER['DOCUMENT_ROOT'].'/_/_php/data/database.php';
require ROOT.'_php/data/common.php';
require ROOT.'_php/data/config.php';
require ROOT.'_php/load/pic.php';
require ROOT.'_php/temp/ad.inc.php';
//重新定义标题
$titlebar = '添加模板';
//权限设置
if(!($seroleId==1 || $seroleId==2)){
mysqli_close($conn);
echo prompt('没有权限操作，请联系管理员','index.php',4,3);
exit;
}
//接收表单数据操作
if($_SERVER["REQUEST_METHOD"] == "POST"){
$tit = filterHTML($_POST["tit"]);
$cmath = filterHTML($_POST["cmath"]);
$emath = filterHTML($_POST["emath"]);
$xmath = filterSQL($conn,$_POST["xmath"]);
$info = filterHTML($_POST["info"]);
$nkey = strtostr($_POST["nkey"]);
$nval = strtostr($_POST["nval"]);
$dkey = strtostr($_POST["dkey"]);
$dval = strtostr($_POST["dval"]);
$caladd = filterHTML($_POST["caladd"]);
$ps = filterHTML($_POST["ps"]);
$unitbig_id= filterHTML($_POST["unitbig_id"]);
$unitmin_id = filterHTML($_POST["unitmin_id"]);
$used = (is_array($_POST["used"])) ? implode(',', $_POST["used"]) : filterHTML($_POST["used"]);
$flag_id = filterHTML($_POST["flag_id"]);
$sort = filterHTML($_POST["sort"]);
//开始上传图片
$pic = filterHTML($_POST["pic"]);
if($_FILES['picfile']['name']){
$pic = picfile($_FILES);
}
//插入一条数据
$nowTime = date('Y-m-d H:i:s', time());
$sql = "INSERT INTO a21mm (aduser_id, adtime, upuser_id, uptime, isnow, pic, xmath, tit, cmath, emath, info, nkey, nval, dkey, dval, caladd, ps, unitbig_id, unitmin_id, used, flag_id, sort) VALUES ( '$seid', '$nowTime', '$seid', '$nowTime', '1', '$pic', '$xmath', '$tit', '$cmath', '$emath', '$info', '$nkey', '$nval', '$dkey', '$dval', '$caladd', '$ps', '$unitbig_id', '$unitmin_id', '$used', '$flag_id', '$sort'
)";
sqlQuery($conn,$sql);
//向图片表插入一条数据
$inid = mysqli_insert_id($conn);
if($pic != filterHTML($_POST["pic"])){
$type_id = filterHTML($_POST["type_id"]);
$sqlpic = "INSERT INTO a21mmpic (aduser_id, adtime, upuser_id, uptime, pic, main_id, type_id) VALUES( '$seid', '$nowTime', '$seid', '$nowTime', '$pic', '$inid', '$type_id')";
sqlQuery($conn,$sqlpic);
}
//关闭数据库
mysqli_close($conn);
$enid = enstr($inid);
echo prompt('添加数据成功',"mm.up.php?f={$enid}",1,3);
exit;
}
/**
* 生成HTML页面
*/
//生成表单HTML
$form = array();
array_push($form, ad_form_fileinput('模板图片','file','picfile','text','pic','/_/pic/A/A21/000000.jpg','请输入图片路径'));
array_push($form, ad_form_selectSql('图片类型','type_id',$conn,"SELECT id, CONCAT(id,' ',tit) AS news FROM a00pictype WHERE id=1 OR id=20 OR id=30 OR id=40 OR id=50 ORDER BY id ASC LIMIT 10",'1',0));
array_push($form, ad_form_textarea('标准公式','xmath','V=abh','请输入LaTeX表示',0));
array_push($form, ad_form_input('公式标题','text','tit','求长方体体积已知长宽高','请输入公式标题'));
array_push($form, ad_form_textarea('中文公式','cmath','长方体的体积 = 长 × 宽 × 高','请输入中文表示'));
array_push($form, ad_form_textarea('字母公式','emath','V=abh','请输入字母表示'));
array_push($form, ad_form_textarea('描述解释','info','由6个长方形（也可能有两个相对的面是正方形）所围成的立体图形叫长方体。','请输入描述解释'));
array_push($form, ad_form_textareaTwo('参数键值','nkey','长 宽 高','请输入参数键','nval','50 40 30','请输入参数值'));
array_push($form, ad_form_textareaTwo('默认键值','dkey','','请输入默认键','dval','','请输入默认值',0));
array_push($form, ad_form_input('补充运算','text','caladd','*1','请输入补充运算'));
array_push($form, ad_form_textarea('公式备注','ps','','请输入公式备注',0));
array_push($form, ad_form_selectSqlTwo('单位分类',$conn,enstr('a00unitmin'),'unitbig_id',"SELECT id, CONCAT(tit) AS news FROM a00unitbig ORDER BY sort ASC LIMIT 50",'1','unitmin_id',"SELECT id, CONCAT(tit,tag) AS news FROM a00unitmin WHERE unitbig_id=1 ORDER BY sort ASC LIMIT 50",'1'));
$arr = ['原生','几何','建筑','餐饮','电商','废品'];
array_push($form, ad_form_checkbox('应用范围','used[]',$arr,'原生'));
array_push($form, ad_form_selectSql('临时标记','flag_id',$conn,"SELECT id, CONCAT(tit) AS news FROM a00flag WHERE id<>3 ORDER BY id ASC LIMIT 50",'2',0));
array_push($form, ad_form_input('临时序号','number','sort','999999','请输入临时序号1~999999',0));
//生成预览HTML
$view = array();
$text = <<<'text'
<img class="pimg" src="/_/pic/A/A21/000000.jpg" height="100px" title="默认" />
<hr>
<dl><dt>会员号码：</dt> </dl><dl>
<dt>会员密码：</dt> </dl><dl>
<dt>登陆英文：</dt></dl>
<dl><dt>登陆密码：</dt> </dl>
<dl><dt>微信图片：</dt>/_/pic/U/U11/000000.jpg</dl>
<dl><dt>微信号：</dt></dl>
<dl><dt>真实姓名：</dt></dl>
<dl><dt>电话号码：</dt></dl>
<dl><dt>联系地址：</dt></dl>
<dl><dt>用户备注：</dt></dl>
<dl><dt>用户等级：</dt>A 优质用户</dl>
<dl><dt>用户权限：</dt>超级管理员 </dl>
<dl><dt>用户关系：</dt>家庭 </dl>
<dl><dt>临时序号：</dt>999999 </dl>
<dl><dt>生成链接：</dt>http://192.168.1.70/?f=null</dl>
<dl><dt>创建时间：</dt></dl><dl>
<dt>创建用户：</dt></dl>
<dl><dt>修改时间：</dt></dl>
<dl><dt>修改用户：</dt></dl>
text;
array_push($view, $text);
//生成提示HTML
$hint = array();
$text = <<<'text'
<div class="katex">
$ a^2 + b^2 = c^2 $
</div>
<div class="katex">
$ f(x) = \int_{-\infty}^\infty \hat f(\xi)\,e^{2 \pi i \xi x} \,d\xi $
</div>
<ul>
<li>提示信息：暂无</li>
<li>提示信息：暂无</li>
</ul>
text;
array_push($hint, $text);
//生成链接HTML
$path = array();
array_push($path, ad_path_a('index.php','','项目列表',1));
array_push($path, ad_path_a('mm.li.php','','模板列表',-1));
array_push($path, ad_path_a('dd.li.php','','算条列表',1));
array_push($path, ad_path_a('mm.ad.php','','添加模板',-2));
mysqli_close($conn);
include ROOT . '_php/temp/ad.tpl.php';
?>
<link rel="stylesheet" href="/_/_js/katex/katex.min.css">
<script defer src="/_/_js/katex/katex.min.js"></script>
<script defer src="/_/_js/katex/contrib/auto-render.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
// 指定渲染容器
const mathContainers = document.querySelectorAll(".katex");
// 遍历所有容器
mathContainers.forEach(container => {
renderMathInElement(container, {
delimiters: [
{left: '$$', right: '$$', display: true},
{left: '$', right: '$', display: false}
],
throwOnError: false
});
});
});
</script>
//生成提示HTML
$hint = array();
$text = <<<'text'
<div class="katex">
$ a^2 + b^2 = c^2 $
</div>
<div class="katex">
$ f(x) = \int_{-\infty}^\infty \hat f(\xi)\,e^{2 \pi i \xi x} \,d\xi $
</div>
<ul>
<li>提示信息：暂无</li>
<li>提示信息：暂无</li>
</ul>
text;
array_push($hint, $text);
<link rel="stylesheet" href="/_/_js/katex/katex.min.css">
<script defer src="/_/_js/katex/katex.min.js"></script>
<script defer src="/_/_js/katex/contrib/auto-render.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
// 指定渲染容器
const mathContainers = document.querySelectorAll(".katex");
// 遍历所有容器
mathContainers.forEach(container => {
renderMathInElement(container, {
delimiters: [
{left: '$$', right: '$$', display: true},
{left: '$', right: '$', display: false}
],
throwOnError: false
});
});
});
</script>
效果图：
浙公网安备 33010602011771号