cthep-ui-vue3
Version:
Vue 3 试题组件库
151 lines (136 loc) • 5.49 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>拼音</title>
<script src="./pinyin-pro.js"></script>
<style>
.x-pinyin-box{width: 82%;margin: 0 auto;}
.x-pinyin-box .button-groups { width: 100%; height: 60px;border-radius: 5px;
display: flex;flex-wrap: wrap;justify-content: space-around;padding: 10px 0px;}
.x-pinyin-box .button-groups ul{display: block;float: left;margin: 0px;padding-left: 0px;}
.x-pinyin-box .button-groups li{float: left;list-style-type: none;width: 30px;height: 24px;line-height:24px;margin: 2px 5px;}
.x-pinyin-box .button-groups li a{display: inline-block;width: 100%;height: auto;text-align: center;background-color: #ececec;
font-size: 14px;border-radius: 5px;cursor: pointer;}
.x-pinyin-box .button-groups li a:hover{color: #fff;background-color: #0060ce;}
.x-pinyin-box .x-pinyin-content {margin-top: 30px;}
.x-pinyin-box .x-pinyin-content input{height: 36px;line-height: 36px;width: 100%;outline: none;border: 1px solid #ececec;
border-radius: 5px;padding-left: 20px;margin-top: 5px;}
</style>
</head>
<body>
<div class="x-pinyin-box">
<div>特殊字符:</div>
<div id="x-vowel-box" class="button-groups">
</div>
<div class="x-pinyin-content">
<div>拼音:</div>
<input id="pinyinstr" type="text" value="" placeholder="请输入拼音" oninput="inputChange()"/>
</div>
<div id="x-show-box">
<div style="margin: 20px 0 10px;"><input type="checkbox" id="x-pinyin-direction" onchange="checkboxChange()" value="true"/><label>上方(拼音显示位置)</label></div>
<div id="x-show-content"></div>
</div>
</div>
<script>
// 获取参数
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) {
return pair[1]
}
}
return ''
}
// 光标函数
function getPositionForTextArea(ctrl) {
let CaretPos = 0;
if (ctrl.selectionStart || ctrl.selectionStart == '0') {// Firefox support
CaretPos = ctrl.selectionStart;
}
return CaretPos;
}
var currentText = decodeURI(getQueryVariable('selectText'));
var pinyinstr = document.getElementById('pinyinstr');
var { pinyin } = pinyinPro;
if (currentText) {
pinyinstr.value = pinyin(currentText);
var showContent = document.getElementById('x-show-content');
showContent.innerHTML = `<span>${currentText} (${pinyinstr.value})</span>`;
} else {
document.getElementById('x-show-box').style.display = 'none';
}
// input change事件
function inputChange(e) {
if (currentText) {
checkboxChange()
}
}
// checkbox change事件
function checkboxChange() {
var curValue = document.getElementById('x-pinyin-direction').checked;
if (curValue) {
showContent.innerHTML = `<span><ruby>${currentText}<rt>${pinyinstr.value}<rt></ruby><span>`;
} else {
showContent.innerHTML = `<span>${currentText} (${pinyinstr.value})</span>`;
}
}
//处理TinyMCE编辑器的事件
window.addEventListener('message', function (event) {
var data = event.data;
var curValue = document.getElementById('x-pinyin-direction').checked
var x_content = ''
if (currentText) {
if (curValue) {
x_content = `<ruby>${currentText}<rt>${pinyinstr.value}<rt></ruby> `;
} else {
x_content = `${currentText} (${pinyinstr.value})`;
}
} else {
x_content = pinyinstr.value;
}
window.parent.postMessage({
mceAction: 'insertContent',
content: x_content
}, '*');
window.parent.postMessage({
mceAction: 'close'
}, '*');
});
const vowelList = [
['a', 'ā', 'á', 'ǎ', 'à'],
['o', 'ō', 'ó', 'ǒ', 'ò'],
['e', 'ē', 'é', 'ě', 'è'],
['i', 'ī', 'í', 'ǐ', 'ì'],
['u', 'ū', 'ú', 'ǔ', 'ù'],
['ü', 'ǖ', 'ǘ', 'ǚ', 'ǜ']
]
var vowelBox = document.getElementById('x-vowel-box');
for (let i = 0; i < vowelList.length; i++) {
var ul = document.createElement('ul');
for (let j = 0; j < vowelList[i].length; j++) {
var li = document.createElement('li')
li.innerHTML = `<a src="javascript:void(0);">${vowelList[i][j]}</a>`;
li.onclick = (function clickFun(e) {
return function () {
let pos = getPositionForTextArea(pinyinstr)
var frontString = pinyinstr.value.substring(0, pos);
var afterString = pinyinstr.value.substring(pos, pinyinstr.value.length);
pinyinstr.value = frontString + e + afterString;
pinyinstr.focus()
pinyinstr.setSelectionRange(pos+1, pos+1) // 设置input光标位置
checkboxChange()
}
})(vowelList[i][j]);
ul.appendChild(li);
}
vowelBox.appendChild(ul);
}
</script>
</body>
</html>