typecho给主题自定义字段添加智能输入
3年前
超过1162天
温馨提示
本文最后更新于2021年09月18日，已超过1162天没有更新，若内容或图片失效，请留言反馈。
弄主题的时候，有时候自定义字段需要填写相对复杂的格式内容，才能便于页面上的输出
例如
如果按格式输出，编辑内容格式去填，有可能对一些用户来说，比较抽象复制
但是如果这样的话，可能就相对来说人性化一点
制作教程
/**
* 后台字段处理
*/
Typecho_Plugin::factory('admin/write-post.php')->bottom = array('myyodu', 'one');
class myyodu {
public static function one()
{
?>
<script src="/usr/themes/spzhi/assets/wmd.js"></script>
<link rel="stylesheet" href="/usr/themes/spzhi/assets/setting.fb.css">
<?php
}}
以上是添加到functions.php的相关代码，意思是处理发布页面的时候，添加相对应的js和css样式
css样式这里就多说了，就是简单美化一下背景和阴影部分，不添加也可以的，就和typecho的默认弹窗一样
这里说的是js代码，涉及到添加窗口，隐藏窗口，获取填入的内容信息并且反馈到指定的id区域里面
不便一一说明，下面发js全部的代码复制出来
/**
* @description typecho后台编辑器插入的js
* @author vv
* @version 0
*/
window.onload = function () {
/* 样式栏 */
$(document).ready(function(){
if ($("#custom-field").length >0){
$('.origin').after('<a href="javascript:;" class="origin_btn wmd-post-button">内容生成</a>');
$('.playnum').after('<a href="javascript:;" class="origin_btn wmd-play-button">视频生成</a>');
$(document).on('click', '.wmd-post-button', function() {
$('body').append(
'<div id="postPanel">'+
'<div class="wmd-prompt-background" style="position: fixed; top: 0px; z-index: 1000; opacity: 0.5; height: 100%; left: 0px; width: 100%;"></div>'+
'<div class="wmd-prompt-dialog">'+
'<div>'+
'<p><b>扩展资料</b></p><p>请按格式填入指定内容，以免生成的时候出错。</p>'+
'<p><labe>输入文章标题</labe></p><input type="text" name="ucgtit" placeholder="必填"></input>'+
'<p><labe>输入文章内容</labe></p><textarea type="text" name="ucgcon" placeholder="必填"></textarea>'+
'</div>'+
'<form>'+
'<button type="button" class="btn btn-s primary" id="post_ok">确定</button>'+
'<button type="button" class="btn btn-s" id="post_cancel">取消</button>'+
'</form>'+
'</div>'+
'</div>');
});
$(document).on('click', '.wmd-play-button', function() {
$('body').append(
'<div id="postPanel">'+
'<div class="wmd-prompt-background" style="position: fixed; top: 0px; z-index: 1000; opacity: 0.5; height: 100%; left: 0px; width: 100%;"></div>'+
'<div class="wmd-prompt-dialog">'+
'<div>'+
'<p><b>输入视频</b></p><p>请按格式填入指定内容，以免生成的时候出错。</p>'+
'<p><labe>免费/付费</labe></p><input type="text" name="playfei" placeholder="必填"></input>'+
'<p><labe>视频标题</labe></p><input type="text" name="playtit" placeholder="必填"></input>'+
'<p><labe>视频链接</labe></p><input type="text" name="playrurl" placeholder="必填"></input>'+
'<p><labe>视频时间长度</labe></p><input type="text" name="playtime" placeholder="必填"></input>'+
'</div>'+
'<form>'+
'<button type="button" class="btn btn-s primary" id="play_ok">确定</button>'+
'<button type="button" class="btn btn-s" id="post_cancel">取消</button>'+
'</form>'+
'</div>'+
'</div>');
});
/* 执行区 *///否定
$(document).on('click','#post_cancel',function() {
$('#postPanel').remove();
$('textarea').focus();
});
$(document).on('click', '#post_ok',function () {
var ucgtit = '' + $('.wmd-prompt-dialog input[name = "ucgtit"]').val() + '';
var ucgcon = '' + $('.wmd-prompt-dialog textarea[name = "ucgcon"]').val() + '';
var textContent = ucgtit + '||'+ ucgcon + '\r\n';
myField = document.getElementsByClassName('origin');
myField = myField[0];
inserContentToTextArea(myField,textContent,'#postPanel');
})
$(document).on('click', '#play_ok',function () {
var playfei = '' + $('.wmd-prompt-dialog input[name = "playfei"]').val() + '';
var playtit = '' + $('.wmd-prompt-dialog input[name = "playtit"]').val() + '';
var playrurl = '' + $('.wmd-prompt-dialog input[name = "playrurl"]').val() + '';
var playtime = '' + $('.wmd-prompt-dialog input[name = "playtime"]').val() + '';
var textContent = playfei + '||'+ playtit + '||'+ playrurl + '||'+ playtime + '\r\n';
myField = document.getElementsByClassName('playnum');
myField = myField[0];
inserContentToTextArea(myField,textContent,'#postPanel');
})
}
});
};
function inserContentToTextArea(myField,textContent,modelId) {
$(modelId).remove();
if (document.selection) {//IE浏览器
myField.focus();
var sel = document.selection.createRange();
sel.text = textContent;
myField.focus();
} else if (myField.selectionStart || myField.selectionStart == '0') {
//FireFox、Chrome
var startPos = myField.selectionStart;
var endPos = myField.selectionEnd;
var cursorPos = startPos;
myField.value = myField.value.substring(0, startPos)
+ textContent
+ myField.value.substring(endPos, myField.value.length);
cursorPos += textContent.length;
myField.selectionStart = cursorPos;
myField.selectionEnd = cursorPos;
myField.focus();
}
else{//其他环境
myField.value += textContent;
myField.focus();
}
}
如图所示：
0 赞
or 打赏
喜欢就打赏一点
酷小呵
24天前 . LV.0
大佬，不知道你这个主题的评论区，代码方便分享一下吗？谢谢大佬！
我的主题的评论区不会弄(如果可以的话)
皮皮社
24天前 . LV.2
@酷小呵
我的比他的好看，用我的。
https://www.pipishe.com/719.html
寻梦xunm
23天前 . LV.0
@皮皮社
主题换的勤快呀
寻梦xunm
24天前 . LV.0
@酷小呵
https://luolt.cn/archives/2782.html
你可以看看以前旧版本的