در این مطلب به شما خواهیم گفت که چگونه یک ویرایشگر سازگار با تمام مرورگرها طراحی کنید و در فرم هایتان از آن استفاده کنید.   مرورگرهایی که پشتیبانی می شوند:

• Opera
• Safari
• IE9
• Firefox
• Chrome

متدهای اصلی DHTML که در این ویرایشگر استفاده شده اند،به شرح زیر است:

• execCommand این متد،یک دستور را در سند فعلی،در اجزا انتخاب شده فعلی و یا در رنج مشخصی اجرا می کند
• getElementById با استفاده از صفت id یک مرجع را به اولین شی ارجاع می دهد

دستوراتی که در این اسکریپت قابل استفاده هستند:

• Bold تبدیل متن انتخاب شده،به کلفت یا برعکس
• Underline تبدیل متن انتخاب شده به زیرخط دار یا برعکس
• Italic تبدیل متن انتخاب شده به حالت کج یا برعکس
• JustifyCenter سطرهای بلاک انتخاب شده را در وسط مرتب می کند
• JustifyLeft سطور را به سمت چپ متمرکز می کند
• JustifyRight سطور را به سمت راست متمرکز می کند
• Indent تو رفتگی ایجاد می کند
• Outdent بیرون رفتگی ایجاد می کند
• Undo برگشت به حالت قبل
• Redo اعمال آخرین عمل قبل از برگشت

مشخصه های اصلی مورد استفاده:

• innerHTML تعیین یا بازیابی HTML ما بین تگ های شروع و پایان یک شی
• designMode تنظیم یا بازیابی یک مقدار که مشخص کننده قابل ویرایش بودن سند است

تصاویر دکمه ها را از اینجا دریافت کنید

فایل CSS

.editorbuttons {
	list-style: none;
	margin: 0px;
	padding: 0px;
}
.editorbuttons li {
	float: left;
}
.editorbuttons li img {
	border:none;
}
.editorbody{clear:both; float:none;}

فایل HTML

<form name="edit" method="POST" id="edit" action="form.php" onsubmit="return submitForm();">
<ul class="editorbuttons">
<li><a href="javascript:editorCommand('content', 'bold', '')"><img title="Bold" src="images/bold.gif" alt="Bold" width="25" height="24"></a> </li>

<li><a href="javascript:editorCommand('content', 'underline', '')"><img title="Underline" src="images/underline.gif" alt="Underline" width="25" height="24"></a> </li>

<li><a href="javascript:editorCommand('content', 'italic', '')"><img title="Italic" src="images/italic.gif" alt="Italic" width="25" height="24"></a> </li>

<li><a href="javascript:editorCommand('content', 'justifyleft', '')"><img title="Align Left" src="images/j_left.gif" alt="Align Left" width="25" height="24"></a> </li>

<li><a href="javascript:editorCommand('content', 'justifycenter', '')"><img title="Align Center" src="images/j_center.gif" alt="Align Center" width="25" height="24"></a> </li>

<li><a href="javascript:editorCommand('content', 'justifyright', '')"><img title="Align Right" src="images/j_right.gif" alt="Align Right" width="25" height="24"></a> </li>

<li><a href="javascript:editorCommand('content', 'indent', '')"><img title="Indent" src="images/indent.gif" alt="Indent" width="25" height="24"></a> </li>

<li><a href="javascript:editorCommand('content', 'outdent', '')"><img title="Outdent" src="images/outdent.gif" alt="Outdent" width="25" height="24"></a> </li>

<li><a href="javascript:editorCommand('content', 'undo', '')"><img title="Undo" src="images/undo.gif" alt="Undo" width="25" height="24"></a> </li>

<li><a href="javascript:editorCommand('content', 'redo', '')"><img title="Redo" src="images/redo.gif" alt="Redo" width="25" height="24"></a> </li>

<li>Shift+Enter for single line spacing</li>
</ul>
<div class="editorbody">
< script language= "JavaScript" type= "text/javascript"  >
<!--
function submitForm() {
 updateEditor('content');
  return true;
}

initiateEditor();
//-->
< /script >
< script language= "JavaScript" type= "text/javascript" >
    //this calles displayEditor function. Parametars are (textarea name, ,default text, textarea  width, textarea  height)
    displayEditor('content', 'Default Text', 600, 300);
//-->
< /script >
</div>
<input name="Submit" type="submit" value="Submit">
</form>

فایل Javascript

برای اطلاعات بیشتر می توانید کامنت ها را ببینید

//First set isEditable to false to make sure editor is not loaded in browsers that don't support it
var isEditable= false;
function initiateEditor() {

 //enable designMode if the browser supports it.
 if (document.getElementById && document.designMode)  {
   isEditable= true;
 }
}
//Javascript function dislpayEditor will create the textarea. 

function displayEditor(editor, html, width, height) {
   if(isEditable){
       document.writeln('< iframe name="' + editor + '" id="' + editor + '"  height="' + height + 'px" width="' + width + 'px">');
//create a hidden field that will hold everything that is typed in the textarea
       document.writeln('<input name="hidden' + editor + '" type="hidden" id="hidden' + editor + '">');
//assign html (textarea value) to hiddeneditor
      document.getElementById('hidden' + editor).value = html;
//call function designer
      designer(editor, html);
   }else{
     document.writeln('< textarea name="' + editor + '" id="' + editor + '" cols="39" rows="10">' + html + '<!-- textarea -->');
   }
}

//this is designer function that enables designMode and writes defalut text to the text area
function designer(editor, html) {
     var mainContent= "< html id=" + editor + ">< head >< /head >< body >" + html + "< /body ><!-- html -->" ;
//assign the frame(textarea) to the edit variable using that frames id
     var edit = document.getElementById(editor).contentWindow.document;
//write the content to the textarea
      edit.write(mainContent);
	  edit.close();
//enable the designMode
      edit.designMode =  "On" ;
	  document.getElementById(editor).contentDocument.designMode = "on";
}

//To execute command we will use javascript function editorCommand.
function editorCommand(editor, command, option) {
// first we assign the content of the textarea to the variable mainField
    var mainField;
	mainField = document.getElementById(editor).contentWindow;
 // then we will use execCommand to execute the option on the textarea making sure the textarea stays in focus
   try {
          mainField.focus();
          mainField.document.execCommand(command, false, option);
          mainField.focus();
    } catch (e) { }
}

function updateEditor(editor) {
	if (!isEditable) return;
//assign the value of the textarea to the hidden field.
	var hiddenField = document.getElementById('hidden' + editor);
	if (hiddenField.value == null) hiddenField.value = "";
		hiddenField.value = document.getElementById(editor).contentWindow.document.body.innerHTML;
}

فایل PHP

قسمت مهم فایل php تابع phpSafe است.با این تابع مطمئن خواهیم بود که علامت های نقل قول به صورت مناسب نمایش می یابند. برای اطلاعات بیشتر می توانید کامنت ها را ببینید.

// from the form we are getting the hidden field value and sending it to the phpSafe function
$hiddencontent = phpSafe($_REQUEST['hiddencontent']);
function phpSafe($strText) {
 //removes backslash created by php from the string
    $tmpString = $strText;
    $tmpString = str_replace(chr(92), "", $tmpString);
    return $tmpString;
}
echo $hiddencontent;

تمام فایل ها را در یک پوشه ذخیره کنید و در سرور خود آپلود نمایید.می توانید با کد بازی کنید و امکانات و دکمه های بیشتری به آن اضافه کنید.در زیر منابع کاملی معرفی می کنیم:

• کتابخانه MSDN مایکروسافت
• ویرایشگر موزیلا

امیدوارم استفاده کرده باشید