• 0

التعديل على النصوص وتنسيقها باستخدام html +JavaScript

ممكن مساعده بعمل كود html و JavaScript لموقع تعديل وتنسيق النصوص كما هو موضح في الصورة

Capture.PNG

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

سنحتاج بداية إنشاء حقل يُوضع النص المٌراد التعديل عليه بداخله ونعطيه تعريف خاص به, طريقة الإضافة تكون عبر الكود :

<textarea id="TextEditor" rows="4" cols="50" placeholder="Copy and Paste a text here ..."></textarea>

ثم نضيف حقول التعديل على النص :

<label for="textcolor">Text Color:</label>
<input type="color" id="textcolor" value="#ff0000"><br>

<label for="backgroundcolor">Background Color:</label>
<input type="color" id="backgroundcolor" value="#ff0000"><br>

<input type="radio" value="1" checked="checked">With Border<br>
<input type="radio" value="0">Without Border<br>

<label for="bordercolor">Border Color:</label>
<input type="color" id="bordercolor" value="#ff0000"><br>

<input type="button" value="Create the styled button">

ثم نضيف صندوق في الأسف لإظهار النص المٌعدل فيه 

<div id="Results"></div>

وأخر مهمة هي إضافة كود javascript يقوم بتطبيق التعديلات عن الضغط على زر التعديل

document.querySelector('input[type = button]').addEventListener("click", function(){
    document.getElementById("Results").innerHTML = document.getElementById("TextEditor").value;
    if(document.querySelector('input[type = radio]:checked').value === 1){
        document.getElementById("Results").style.border = "thick solid "+document.getElementById("bordercolor").value;
    }
    document.getElementById("Results").style.color = document.getElementById("textcolor").value;
    document.getElementById("Results").style.backgroundColor = document.getElementById("backgroundcolor").value;
});

 

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

كيف يمكني ان ابحث عن كلمة داخل الفقره 

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0
بتاريخ 43 دقائق مضت قال Mari Carmen:

كيف يمكني ان ابحث عن كلمة داخل الفقره 

يمكنك إنشاء بحث عن طريق input داخل فقره ما عن طريق هذا الكود :

كود html :

<div id="pra" style="display: none;"> <!--الفقرة التي سوف يتم البحث عن كلمة داخلها وسوف تعدل مساراها لديك حسب ما تشاء-->
  A paragraph is a series of sentences that are organized and coherent, and are all related to a single topic. Almost every piece of writing you do that is longer than a few sentences should be organized into paragraphs. ... Paragraphs can contain many different kinds of information.
</div>
<div id="container">
 	<div class="header">
		<input type="text" placeholder="Search text here ..." name="query" id="query-input"> <!--مدخل البحث-->
  	</div>
 	<ul id="lists" class="lists"><!--سوف يظهر ناتج البحث هنا من جديد وسوف تظهر كلمات البحث بلون اصفر خلفي-->
    </ul>
</div>

كود javascript :

const TIME_OUT = 500;
let input = document.querySelector('#query-input');
let lists = document.querySelector('#lists');
let string = document.getElementById("pra"); /*هذا مسار البجث الذي سوف يتم تغيرة بمسار أخر لديك*/
let texts = [string.innerHTML];
console.log(texts);

let _buildTexts = () =>{
  
  let html = texts.map((text)=>{
    return `<li>${text}</li>`
  });

  lists.innerHTML = html.join('');  
};

_buildTexts();

// Not an arrow function, to avoid lexical scope binding
function _buildSearchedTexts(){
  console.log(this);
  let newTexts = texts.map((text)=>{
    let newText = text.replace(new RegExp(this.value, "gi"), (match) => `<mark>${match}</mark>`);
    return `<li>${newText}</li>`;
  });
  lists.innerHTML = newTexts.join('');
};


let debounce = (callback, wait) => {
	
  let timeout = null;
  
	return function() {
		let context = this; 
    let args = arguments;
		let later = () => {
      callback.apply(context, args)
		};
		clearTimeout(timeout);
		timeout = setTimeout(later, wait);
	};
};

function keyPressCallback() {
  if(!this.value){
    _buildTexts();
    return;
  };
  _buildSearchedTexts.bind(this)();
}

input.onkeydown = debounce(keyPressCallback, TIME_OUT);

 

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن