typecho给主题自定义字段添加智能输入

寻梦xunm| 822| 收集

3年前

超过1295天温馨提示

本文最后更新于2021年09月18日，已超过1295天没有更新，若内容或图片失效，请留言反馈。

弄主题的时候，有时候自定义字段需要填写相对复杂的格式内容，才能便于页面上的输出

例如

4133562800.png

如果按格式输出，编辑内容格式去填，有可能对一些用户来说，比较抽象复制

但是如果这样的话，可能就相对来说人性化一点

3868469421.png

制作教程

/**
 * 后台字段处理
 */    
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();
    }
}

如图所示：

3248772988.png

typecho 教程代码

本站相关资源来自互联网用户收集发布，仅供用于学习和交流。如有侵权之处，请联系站长并出示相关证明以便删除，敬请谅解！

0 赞 or 打赏

喜欢就打赏一点

XBlog通用漏洞防护补丁v1.0

如何在emlog首页第N篇文章下面加上广告

服务器服务器

人生中的第一款运动相机

35人气6小时前

这城有良田一键端手工端运营后台安卓苹果视频教程赛季教程

53人气21小时前

妈的，累死累活才这点工资

174人气4天前

又要开始上夜班了，坚持还有十来天

154人气5天前

typecho简洁主题-采风

169人气5天前

最近忙，没得空更新

127人气10天前

酷小呵

5个月前 . LV.0

大佬，不知道你这个主题的评论区，代码方便分享一下吗？谢谢大佬！
我的主题的评论区不会弄(如果可以的话)

Android Chrome 北京市
1. 皮皮社
  
  5个月前 . 贵人 . LV.3
  
  @酷小呵
  我的比他的好看，用我的。
  https://www.pipishe.com/719.html
  
  Windows Chrome 广东省中山市
  1. 寻梦xunm 作者博主
    
    5个月前 . 贵人 . LV.6
    
    @皮皮社
    主题换的勤快呀
    
    Android 夸克浏览器江苏省连云港市
2. 寻梦xunm 作者博主
  
  5个月前 . 贵人 . LV.6
  
  @酷小呵
  https://luolt.cn/archives/2782.html
  你可以看看以前旧版本的
  
  Android 夸克浏览器重庆市

服务器服务器

我的音乐