编程技术

Typecho后台编辑器添加样式按钮

# 样式浏览

比如说我的后台加载了bootstrap的css文件，这么代码为: 更多参考Bootstrap官网

<button type="button" class="btn btn-info">快捷通过按钮复制该样式</button>
1

# 我的按钮使用于layui

我的不要点击复制，需要的是弹窗功能。使用layui的话就需要自己参考这篇文章做修改了，因为我是后面修改的，没写有文章出来

# 回到重点,引入所用的JS CSS文件

//在后台头部</head>之前添加（为了防止以后后台其它页面也使用到`clipboard.min.js`，我就直接在头部）
//也可以直接在>`根目录/admin/write-post.php`添加具体自测
//第一个JS文件是点击复制的,不用可不添加！
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>

//第二个JS文件与css文件
在`根目录/admin/write-post.php`后面添加

<script src="https://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">

//如发现加载慢的,记得换源/直接百度`bootstrap+加速`
1
2
3
4
5
6
7
8
9
10
11
12

# 添加点击复制JS

//在`根目录/admin/write-post.php`刚才引入JS CSS文件上方粘贴
<script>
    var btn = document.getElementById('btn1');
    var clipboard = new ClipboardJS(btn);
    clipboard.on('success', function(e) {
        console.log(e);
    });
    clipboard.on('error', function(e) {
        console.log(e);
    });
</script>
1
2
3
4
5
6
7
8
9
10
11

# 然后我们就需要把它放在需要显示的位置

  • 比如我需要在编写新文章的标题下方，参考下图片 typecho

# 整体代码(中午需要转义)

<p class="mono url-slug">
    <label for="slug" class="sr-only"><?php _e('网址缩略名'); ?></label>
    <?php echo preg_replace("/\{slug\}/i", $input, $permalink); ?>
</p>
//我在网站'网址缩略名'的下方添加的
<div class="well">            
<button class="btn btn-info" type="button" data-toggle="collapse" data-target="#Condom1" aria-expanded="false" aria-controls="Condom1">按钮</button>    //按钮收缩框,避免眼花缭乱。
                
    <div class="collapse" id="Condom1">
        <div class="well" >
            <div class="row">
<div  class=".col-xs-6 .col-sm-4" id="btn1" data-clipboard-text="&lt;button type=&quot;button&quot; class=&quot;btn btn-default&quot;&gt;（默认样式）Default&lt;/button&gt;">
<button type="button" class="btn btn-default">（默认样式）Default</button>  
</div>

//<button type="button" class="btn btn-default">（默认样式）Default</button>
//上面是正常代码,需要经过HTML转义,不然浏览器解析是复制不了的

<div  class=".col-xs-6 .col-sm-4" id="btn2" data-clipboard-text="在我这里添加经过转义后的代码">
<button type="button" class="btn btn-primary" >（首选项）Primary</button>
</div>
    
            </div>
        </div>
    </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# 示列图片