تصميم معالج النصوص للمواقع Rich Text Editor بواسطة PHP - HTML - JS - CSS

17-12-2021

1706

تصميم المواقع و التطبيقات 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();
}