您的位置：首页 > Web前端 > CSS

简单利用js、css、php实现手机在线编辑器功能

2019-03-14 05:45 519 查看

简单利用js、css、php实现手机编辑器：效果图如下

index.htm

[code]<!DOCTYPE html>
<html>
<head>
<title>在线编辑器 - 时光旅行</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<link rel="stylesheet" href="css/tool.css">
</head>
<body>
<form action="xqbj.php" id="frm1" method="post">
<div id="hidden" class="tool">
<div class="c" onclick="0html()">加粗</div>
<div class="c" id="c1">换行</div>
<div class="c" id="c2">图片</div>
<div class="c" id="c3">视频</div>
<div class="c" id="c4">链接</div>
</div>

<div class="c" id="calc" onclick="calc()">替换</div>
<div class="c" id="copy">复制</div>
<div class="c" id="calc" onclick="formReset()">清除</div>
<div class="btn" onclick="document.getElementById('frm1').submit()">运行</div>
<div id="hidden" style="display:block;">
<input type="text" id="select" class="text-cz" placeholder="查找内容">
<input type="text" id="replace" class="text-th" placeholder="替换内容">
<textarea id="i" name="text" class="text" placeholder="请输入内容..."></textarea>
</div>
</form>
<script type="text/javascript" src="js/tool.js">
</script>
</body>
</html>

tool.css

[code]html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 1;
overflow: hiddean;
font-family: 'Fira Mono', helvetica, arial, sans-serif;
font-weight: 400;
font-size: 62.0%;
}

.c,.btn{ width:42px; height:25px; line-height:25px; text-align:center; border:1px solid #eee; margin:5px;

float:left; font-size:13px; cursor:pointer }
.text{width:760px; height:465px; padding: 12px 15px; border:1px solid #eee; overflow:hidden}
.text-cz,.text-th{width:125px; padding: 10px 15px; border:0; overflow:hidden}
.tool{display:block;}
@media only screen and (max-width: 600px){
/*使用移动终端时的样式设定*/
html,body{background-color: #fff;}
.c,.btn{ width:32px; border:0;}
.text{width: 320px;height:506px;}
.text-cz,.text-th{width:56px;}
.tool{display:none;}
}

tool.js

[code]var i = document.getElementById("i");
i.value = "";

var x=["<b></b>","<p></p>","<img id='image' src=''><a href='' style='color:#607FA6;'></a>","<video

src=''></video>","<a href='' style='color:#607FA6;'></a>"];
var y=[];
function $(id){ return document.getElementById(id)};
for(var i=0,m=x.length;i<m;i++){
$("c"+i).onclick=(function(i){
return function(){
var s=y.join(",").indexOf(x[i]);
if(s>=0){
for(var r in y){
if(y[r]==x[i]){y.splice(r,1)}
}
}
else{
y.push(x[i])
}
$("i").value=y.join(" ");
}
})(i)
}
//清除功能
function formReset(){
document.getElementById("frm1").reset();
}
//替换
function calc() {
var i = new String();
var s = new String();
var r = new String();
i = document.getElementById("i").value;
s = document.getElementById("select").value;
r = document.getElementById("replace").value;
var regS = new RegExp(s, "g");
document.getElementById("i").value = i.replace(regS, r);
}
//复制
function copyArticle(event){
const range = document.createRange();
range.selectNode(document.getElementById('i'));
const selection = window.getSelection();
if(selection.rangeCount > 0) selection.removeAllRanges();
selection.addRange(range);
document.execCommand('copy');
}
document.getElementById('copy').addEventListener('click', copyArticle, false);

到这里就基本实现在线网站编辑功能了！

附：xqbj.php

[code]<?php
echo $_POST['text'];

?>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航