/
index.html
139 lines (138 loc) · 8.09 KB
/
index.html
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>关键词加超链接</title>
<link rel="stylesheet" href="http://unpkg.com/element-ui/lib/theme-chalk/index.css">
<style>
* { box-sizing: border-box; }
.container { margin: 0 auto 50px; max-width: 1000px; }
.el-button { padding: 3px 12px; }
a.el-button { text-decoration: none; }
.el-button:before { margin-right: 5px; font-size: 24px; vertical-align: middle; }
.right-btn { float: right; margin: -52px 12px 0 0; }
.content { margin: 0; padding: 4px 10px; line-height: 22px; font-size: 12px; border: 1px solid #ebebeb; border-radius: 3px; background-color: #f6f6f1; }
pre.content { white-space: pre-wrap; }
.hot-keyword { background-color: #FD0; }
.el-table + .el-table { margin-top: 20px; }
img { display: block; margin: 10px auto; width: 300px; height: 160px; background-color: #d4edda; border: 1px solid #c3e6cb; }
</style>
</head>
<body>
<div id="app" class="container">
<h1>关键词加超链接</h1>
<a href="http://github.com/wuliupo/keyword-linker" class="el-button el-button--default el-button--small right-btn el-icon-star-off">Github</a>
<h3>关键词</h3>
<button class="el-button el-button--default el-button--small right-btn el-icon-circle-plus-outline" @click="add">添加</button>
<table class="el-table el-table--border el-table--small" cellspacing="0" cellpadding="0" border="0">
<thead class="el-table__header-wrapper">
<tr class="">
<th class="cell is-leaf">关键词</th>
<th class="cell is-leaf">最多替换</th>
<th class="cell is-leaf">优先级</th>
<th class="cell is-leaf" width="100">操作</th>
</tr>
</thead>
<tbody class="el-table__body-wrapper is-scrolling-none">
<tr class="el-table__row" v-for="(item, index) in keywords">
<td class="cell">
<div class="el-input el-input--small"><input v-model="item.text" placeholder="关键词" type="text" autocomplete="off" class="el-input__inner"></div>
</td>
<td class="cell">
<div class="el-input el-input--small"><input v-model="item.max" placeholder="最多替换次数" type="text" autocomplete="off" class="el-input__inner"></div>
</td>
<td class="cell">
<div class="el-input el-input--small"><input v-model="item.priority" placeholder="优先级" type="text" autocomplete="off" class="el-input__inner"></div>
</td>
<td class="cell">
<button type="button" class="el-button el-icon-remove-outline el-button--default el-button--small" @click="remove(index)">删除</button>
</td>
</tr>
</tbody>
</table>
<table class="el-table el-table--border el-table--small" cellspacing="0" cellpadding="0" border="0">
<tbody class="el-table__body-wrapper is-scrolling-none">
<tr class="el-table__row">
<td class="cell">
替换文本：<div class="el-input el-input--small"><input v-model="config.replacement" placeholder="替换文本" type="text" autocomplete="off" class="el-input__inner"></div>
</td>
<td class="cell">
占位符：<div class="el-input el-input--small"><input v-model="config.placeholder" placeholder="替换占位符" type="text" autocomplete="off" class="el-input__inner"></div>
</td>
<td class="cell">
最多次数：<div class="el-input el-input--small"><input v-model="config.max" placeholder="最多替换次数" type="text" autocomplete="off" class="el-input__inner"></div>
</td>
</tr>
</tbody>
</table>
<h3>正文</h3>
<span class="right-btn">
<button class="el-button el-button--primary el-button--small el-icon-edit" @click="linker">加链接</button>
<button class="el-button el-button--default el-button--small el-icon-view" @click="toggleSource">源码</button>
<button class="el-button el-button--default el-button--small el-icon-refresh" @click="reset">还原</button>
</span>
<textarea class="content el-textarea__inner" rows="20" v-if="source" v-model="source"></textarea>
<div v-else id="content" ref="content" class="content" v-html="content || text">
<p data-tips="盘古大帝">宇宙混沌，鸿蒙初开，<a title="盘古大帝" href="#盘古大帝">盘古大帝劈开了天地</a>。</p>
<p>那时候，神族、人族、妖族混居于天地之间。天与地的距离并非遥不可及，人居于陆地，神居于神山，人可以通过天梯见神。</p>
<p>盘古大帝有三位情如兄妹的下属，神力最高的是一位女子，因年代过于久远，名字已不可考，只知道她后来建立了华胥国，后世尊称她为华胥氏。另外两位是男子：神农氏，驻守中原，守四方安宁；高辛氏，驻守东方，守护日出之地汤谷和万水之眼归墟。</p>
<p>盘古大帝仙逝后，天下战火频起，华胥氏厌倦了无休无止的战争，避世远走，创建了美丽祥和的华胥国。可她之所以被后世铭记，并不是因为华胥国，而是因为她的儿子伏羲、女儿女娲。</p>
<p>伏羲、女娲恩威并重，令天下英雄敬服，制止了兵戈之争。伤痕累累的大荒迎来太平，渐渐恢复了生机。</p>
<p>伏羲、女娲被尊为伏羲大帝、女娲大帝。</p>
<p>伏羲大帝仙逝后，女娲大帝悲痛不已，避居华胥国，从此再没有人见过她，生死成谜，伏羲女娲一族日渐没落。</p>
<p>大荒的西北，一个小神族——轩辕族，在他们年轻首领的带领下正在慢慢崛起。几千年之后，轩辕族已经可以和古老的神农、高辛两族抗衡。</p>
<p>中原的神农、东南的高辛、西北的轩辕，三大神族，三分天下。</p>
<p>神农炎帝遍尝百草，以身试药，为世人解除疾苦，受万民爱戴，被天下人尊为医祖。因为神农炎帝，大荒形成了三足鼎立的局面。</p>
<p>神农炎帝的逝世打破了三足鼎立的局面，轩辕黄帝雄才伟略，经过和神农族的激烈斗争，统一了中原。</p>
<p>统一并不是斗争的结束，而是另一种斗争的开始。</p>
<!--这是一段注释 盘古大帝 盘古-->
<p>神农、轩辕两个部族经过痛苦的斗争，逐渐能和平相处，可一切的矛盾犹如休眠的火山，随时会爆发。</p>
<p class="盘古">盘古大帝、盘古大帝、盘古、盘古大帝、盘古、盘古大帝、盘古</p>
<p><img src="about:blank" alt="长相思、盘古、三皇五帝时期的故事" title="盘古大帝"></p>
</div>
</div>
<script src="http://unpkg.com/vue@2.5.17/dist/vue.min.js"></script>
<script src="./keyword-linker.js"></script>
<script>
Vue.config.performance = Vue.config.debug = Vue.config.devtools = Vue.config.productionTip = true;
Vue.config.silent = false;
new Vue({
el: '#app',
data: {
keywords: [
{ text: '盘古大帝', priority: 10, max: 3 },
{ text: '盘古', priority: 1, max: 3 }
],
text: document.getElementById('content').innerHTML,
content: '',
config: { replacement: '<a class="hot-keyword" href="#KEYWORD">KEYWORD</a>', placeholder: 'KEYWORD', max: 10 },
source: ''
},
methods: {
add: function() {
this.keywords.push({ text: '', priority: 1, max: 3 });
},
remove: function(index) {
this.keywords.splice(index, 1);
},
linker: function() {
this.content = new KeywordLinker(this.keywords, this.config).addLink2String(this.source || this.text);
this.source = this.source ? this.content : '';
},
toggleSource: function() {
this.source = this.source ? '' : (this.content || this.text);
},
reset: function() {
this.content = this.text;
this.source = this.source ? this.content : '';
}
},
mounted: function() {
new KeywordLinker(this.keywords, this.config).addLink2Dom(this.$refs.content);
}
})
</script>
</body>
</html>