تصميم معالج النصوص للمواقع Rich Text Editor بواسطة PHP - HTML - JS - CSS
17-12-2021
1763
تصميم المواقع و التطبيقات
NewMedieneبسم الله الرحمن الرحيم ، في أغلب الأحيان يحتاج
المدون لإضافة مواضيع تحتوي على صور و روابط خارجية ليسهل الشرح للزوار أو
ليكون الموضوع جميل و متناسق مع الصفحة التي يظهر بها الموضوع لهذا السبب
تحتاج إلى أداة تساعدك في معالجة النصوص .
في هذا المثال نحتاج القليل من أكواد البرمجة PHP - JS - HTML - CSS
1- ملف index.php هو بمثابة صفحة لإضافة المواضيع .
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" >
<link rel="stylesheet" href="css/style.css">
<link rel="icon" href="img/icon.png" >
<title>Rich Text Editor</title>
</head>
<body onload="initDoc();" >
<div class="container" >
<div class="logo" ><a href="http://www.dzworkers.com" ><img src="img/logo.jpeg" /></a></div>
<form class="richText" name="compForm" method="POST" onsubmit="if(validateMode()){this.topic.value=oDoc.innerHTML;return true;}return false;" >
<?php
if(isset($_POST['add'])){
echo "<span class='post' >".$_POST["topic"]."</span>";
}// End Add ?>
<div id="compForm" >
<input type="hidden" name="topic" >
<div id="toolBar">
<select onchange="formatDoc('fontsize',this[this.selectedIndex].value);this.selectedIndex=0;">
<option class="heading" selected>- الخط -</option>
<option value="3" >حجم متوسط</option>
<option value="4" >حجم كبير</option>
<option value="5" >حجم كبير جدا</option>
</select>
<div class="toolInp" ><img src="img/icon/foreColor.png" /><input type="color" onchange="formatDoc('foreColor', this.value);"></div>
<div class="toolInp" ><img src="img/icon/hiliteColor.png" /><input type="color" onchange="formatDoc('backcolor', this.value);"></div>
<img class="intLink" title="Undo" onclick="formatDoc('undo');" src="img/icon/undo.png" />
<img class="intLink" title="Redo" onclick="formatDoc('redo');" src="img/icon/redo.png" />
<img class="intLink" title="Bold" onclick="formatDoc('bold');" src="img/icon/bold.png" />
<img class="intLink" title="Italic" onclick="formatDoc('italic');" src="img/icon/italic.png" />
<img class="intLink" title="strikeThrough" onclick="formatDoc('strikeThrough');" src="img/icon/strikethrough.png" />
<img class="intLink" title="underline" onclick="formatDoc('underline');" src="img/icon/underline.png" />
<img class="intLink" title="justifyFull" onclick="formatDoc('justifyFull');" src="img/icon/justifyFull.png" />
<img class="intLink" title="Right align" onclick="formatDoc('justifyright');" src="img/icon/justifyRight.png" />
<img class="intLink" title="Center align" onclick="formatDoc('justifycenter');" src="img/icon/justifyCenter.png" />
<img class="intLink" title="Left align" onclick="formatDoc('justifyleft');" src="img/icon/justifyLeft.png" />
<img class="intLink" title="Add image" onclick="formatDoc('insertImage', prompt('Url Image ', ''));" src="img/icon/insertImage.png" />
<img class="intLink" title="Hyperlink" onclick="var sLnk=prompt('Url ','http:\/\/');if(sLnk&&sLnk!=''&&sLnk!='http:\/\/'){formatDoc('createlink',sLnk)}" src="img/icon/createLink.png" />
<img class="intLink" title="unlink" onclick="formatDoc('unlink');" src="img/icon/unlink.png" />
<img class="intLink" title="Cut" onclick="formatDoc('cut');" src="img/icon/cut.png" />
<img class="intLink" title="Copy" onclick="formatDoc('copy');" src="img/icon/copy.png" />
<img class="intLink" title="selectAll" onclick="formatDoc('selectAll');" src="img/icon/selectAll.png" />
</div>
<div id="textBox" contenteditable="true" ></div>
<input type="hidden" name="switchMode" id="switchBox" onchange="setDocMode(this.checked);" />
</div>
<div class="submitclass" >
<input type="submit" name="add" value="إضافة موضوع" >
</div>
</form>
</div>
<script src="css/style.js" ></script>
</body>
</html>
2- مجلد img يحتوي على أيقونات خاصة بالأزرار .
3- مجلد css يحتوي على ملفين style.css و style.js لتصميم الأداة
style.css
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300&display=swap');
*,*:before,*:after {
padding: 0;
margin: 0;
}body {
background-color: white;
font-size: 10pt;
direction: rtl;
font-family: 'Cairo', sans-serif;
}ul {
list-style-type: none;
}a {
text-decoration: none;
display:inline-block;
color: #054c5e;
font-weight: bold;
transition: 0.3s;
}a:hover {
color: #c72b2b;
}pre {
float: left;
width: 95%;
max-width: 95%;
max-height: 500px;
text-align: left;
direction: ltr;
padding: 20px 2%;
overflow: auto;
background-color: #cccccc50;
color: #333333;
font-size: 10pt;
margin: 10px 0.5%;
border-radius: 15px 0px 0px 0px;
border: 1px #333333 solid;
}
input, select, textarea {
border: none;
font-family: 'Cairo', sans-serif;
font-size: 10pt;
}input[type="submit"]{
cursor:pointer;
border-radius: 3px;
transition: 0.3s;
}
.logo a img {
float: right;
width: 70%;
margin: 30px 15%;
}
.container {
margin: 0 auto;
max-width: 600px;
}
.richText {
float: right;
width: 90%;
padding: 5%;
background-color: #cccccc;
}
#compForm {
float: right;
width: 100%;
margin-top: 20px;
}#toolBar {
float: right;
width: 100%;
margin-bottom: 5px;
}.toolInp {
width: 100px;
height: 30px;
background-color: white;
margin-left: 5px;
margin-bottom: 5px;
border-radius: 3px;
}.toolInp input, #toolBar select {
float: right;
border: 0px;
border-radius: 3px;
}.toolInp input {
width: 60px;
height: 20px;
margin: 5px 0px;
}#toolBar select {
float: right;
font-size:8pt;
width: 65px;
height: 30px;
margin-left: 5px;
margin-bottom: 5px;
}.intLink, #toolBar select , .toolInp{
float: right;
box-shadow: 0px 0px 1px #333333;
}.toolInp img, .intLink{
float: right;
background-color: white;
width: 15px;
height: 15px;
padding: 7.5px;
margin-left: 5px;
margin-bottom: 5px;
border-radius: 3px;
}.intLink {
cursor:pointer;
}.intLink:hover {
background-color: #f9f9f9;
}#textBox {
float: right;
width: 94%;
height: 300px;
padding: 3%;
background-color: white;
box-shadow: 0px 0px 1px #333333;
margin: 0px;
overflow: auto;
text-align: auto;
}#textBox img{
max-width: 50%;
}#editMode {
float: right;
padding: 5px 20px;
background-color: #f9f9f9;
color: #333333;
border-radius: 100px;
font-size: 10pt;
margin: 10px 0px ;
box-shadow: 0px 0px 1px #333333;
}#editMode input, #editMode label{
float: right;
}#editMode input {
margin-left: 10px;
margin-top: 6px;
}
.submitclass {
float: right;
width: 100%;
margin-top: 15px;
}.submitclass input {
float: left;
margin-right: 10px;
margin-top: 10px;
padding: 5px 10px;
background-color: #0f802b;
color: white;
}.submitclass input:hover {
background-color: #333333;
color: white;
}.submitclass a {
float: left;
font-size: 8pt;
background-color: white;
border-radius: 50px;
padding: 5px 10px;
margin-top: 14px;
margin-right: 10px;
margin-bottom: 10px;
box-shadow: 0px 0px 1px #333333;
}
.post {
float: right;
width: 90%;
padding: 5%;
margin: 10px 0px;
background-color: white;
}.delete {
float: right;
width: 100%;
background-color: #c72b2b50;
padding: 5px 0px;
margin-top: 10px;
text-align: center;
}center {
color: #c72b2b;
font-weight: bold;
}
style.js
var oDoc, sDefTxt;
function initDoc() {
oDoc = document.getElementById("textBox");
sDefTxt = oDoc.innerHTML;
if (document.compForm.switchMode.checked) { setDocMode(true); }
}
function formatDoc(sCmd, sValue) {
if (validateMode()) { document.execCommand(sCmd, false, sValue); oDoc.focus(); }
}
function validateMode() {
if (!document.compForm.switchMode.checked) { return true ; }
alert("Uncheck \"Show HTML\".");
oDoc.focus();
return false;
}
function setDocMode(bToSource) {
var oContent;
if (bToSource) {
oContent = document.createTextNode(oDoc.innerHTML);
oDoc.innerHTML = "";
var oPre = document.createElement("pre");
oDoc.contentEditable = false;
oPre.id = "sourceText";
oPre.contentEditable = true;
oPre.appendChild(oContent);
oDoc.appendChild(oPre);
document.execCommand("defaultParagraphSeparator", false, "p");
} else {
if (document.all) {
oDoc.innerHTML = oDoc.innerText;
} else {
oContent = document.createRange();
oContent.selectNodeContents(oDoc.firstChild);
oDoc.innerHTML = oContent.toString();
}
oDoc.contentEditable = true;
}
oDoc.focus();
}
function printDoc() {
if (!validateMode()) { return; }
var oPrntWin = window.open("","_blank","width=450,height=470,left=400,top=100,menubar=yes,toolbar=no,location=no,scrollbars=yes");
oPrntWin.document.open();
oPrntWin.document.write("<!doctype html><html><head><title>Print<\/title><\/head><body onload=\"print();\">" + oDoc.innerHTML + "<\/body><\/html>");
oPrntWin.document.close();
}
