ساخت ادیتور برای سایت خودم با جاوا اسکریپت

saalek110

saalek110

Well-Known Member
ساخت ادیتور با جاوا اسکریپت
مثل همین ادیتور مجیدانلاین که شما مطلب پست می کنید.
مثلا انداره فونت را تعین می کنید و رنگ خط و سایز صفات خط را تعین می کنید.
 
saalek110

saalek110

Well-Known Member
یک فایل جاوا اسکریپت هست ضمیمه این پست می کنم.
اول خود فایل این لینک هست

jscolor: JavaScript Color picker with Opacity (alpha channel)

jscolor.com jscolor.com
یعنی اگر به من اعتماد ندارید بروید سایت خودش.
حالا کارش چیه ؟ یک صفحه باز میشه و رنگ انتخاب می کنید ، البته شاید به درد ساخت ادیتور نخوره ولی مثلا یک رنگ را می تونید در دیتابیس ذخیره کنید و در کدهای سایت از اون رنگ داخل دیتابیس استفاده کنید. مثلا body رنگ بک گراند خودش را از دیتا بیس بگیرد. حالا شاید کاربردهای بهتری داشته باشد ولی این یک کاربردش بود. شاید هم بدرد ساخت ادیتور هم بخوره. فعلا اینجا پست کردم.تا در تاپیک باشه.

مثلا کد زیر:
HTML: 
    echo '<body style="background-color:' . $color .........
فقط اول خط را نوشتم ، این خط رنک بگ گراند سایت را با رنگ موجود در متغیر $color رنگ می زنه.
یک کدی قبلش برای خوندن اون رنگ از دیتابیس هم باید باشه.یا از مسیرهای دیگری متعیر $color مقدار دهی بشه.
که فایل ضمیمه کارش انتخاب رنگ است از یک پالت رنگ.فعلا نمی دونم به ساخت ادیتور من کمکی خواهد کرد یا نه
ولی چون برای خودش می تونه کاربردهایی داشته باشه اینجا پست زدم.

برای استفاده از فایل ضمیمه مثلا میشه یک فرم ایجاد کرد و داخل فرم داریم:
JavaScript: 
[/I][/SIZE][/I][/SIZE][/I][/SIZE][/I][/SIZE][/I][/SIZE][/I][/SIZE][/I][/SIZE]
 [SIZE=4][I][SIZE=4][I][SIZE=4][I][SIZE=4][I][SIZE=4][I][SIZE=4][I][SIZE=4][I]<form id='myform' action="<?php echo $_SERVER['PHP_SELF']; ?>"  method = 'POST'>

<script src="jscolor.js"></script>
Color: <input value="#3399FF80" data-jscolor="{}">
....
...
..
Color: <input name="myvalue"  id="myvalue" value="#3399FF80" data-jscolor="{}">
...
....

<input type="submit" name="action_main">
البته من قبلا از این فایل در سایتم استفاده کرده بودم چند سال پیش و الان دارم از کدهای سایت قدیمی خودم کدها را جدا می کنم ، حالا ممکن است کدها را اشتباه زده باشم ولی اون موقع کار میکرد این فایل برام.
من بعدش که دکمه فرم را می زدم با کدهای فعال شدن اکشن فرم رنگ ارسالی را در دیتابیس ثبت می کردم. ولی ممکن است یک روش دیگه استفاده این باشه که در ادیتور اون عدد رنگ را بشه استفاده کرد. حالا بعدا بررسی می کنم.


شاید هم اصلا این پالت رنگ برای ساخت یک ادیتور سایت زیادی باشه و مثلا همون رنگ آبی و قرمز برای ادیتور سایت کافی باشه. برای انجام اون کار روش وجود داره.


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

فکر کنم به اندازه کافی در مورد این فایل گفتم.
 

پیوست ها

  • jscolor.zip
    23.7 کیلوبایت · بازدیدها: 0
آخرین ویرایش:
saalek110

saalek110

Well-Known Member
من یک ادیتوری چند سال پیش ساخته بودم که کار میکرد ‌
حالا دنبال این هستم از کدهای اون استفاده کنم و کمی هم کد از سایتها پیدا کنم و یک ادیتور جدید بسازم.
مثلا بتونم شکلک استفاده کنم یا یک خط نوشته را بولد یا قرمز کنم.
 
saalek110

saalek110

Well-Known Member
از این تابع جاوا اسکریپ شروع می کنم. این تابع از سایت قدیمی من است و الان نمی دونم از کدوم سایت اون را گرفته بودم.

JavaScript: 
?>
 <script type='text/javascript'>
 
function darj(str){
       var tc = document.getElementById("mytextarea");
    var tclen = tc.value.length;
    tc.focus();
    if(typeof document.selection != "undefined")
    {
      document.selection.createRange().text = str; 
    }
    else
    {
      tc.value =
      tc.value.substr(0, tc.selectionStart) +
      str +
      tc.value.substring(tc.selectionStart, tclen);
    }
}

</script>


و در همون فایل که این تابع بود این خط کد هم بود:
HTML: 
 <button type="button" onclick="darj('[right][/right]')">right</button>

احتمالا با زدن یک دکمه که بالای ادیتور بوده این علامت های راست-راست را می نوشته داخل textarea
. تکست اریا textarea همون جایی است که داریم می نویسیم تا مطلب را به سایت خود ارسال کنیم.
می دونید textarea یکی از ابزارهای html است مثل input و لیبل. حالا اگر نمی دونید textarea چیه در گوگل سرچ کنید و کمی در موردش مطالعه کنید ولی کلا همون جایی است که متن ارسالی به سایت اونجا رویش کار میشه


الان این تابع darj کارش اینه هر عبارتی بخواهیم را در textarea می اندازد و لازم نیست بیاییم تایپ کنیم که
HTML: 
[right][/right]
 
آخرین ویرایش:
saalek110

saalek110

Well-Known Member
Textarea چیه؟

اونایی هم که نمی دونن texareaچیه این کد را ببینید:
HTML: 
<!DOCTYPE html>
<html>
<body>

<h1>The textarea element</h1>

<form action="/action_page.php">
  <p><label for="w3review">Review of W3Schools:</label></p>
  <textarea id="w3review" name="w3review" rows="4" cols="50">At w3schools.com you will learn how to make a website. They offer free tutorials in all web development technologies.</textarea>
  <br>
  <input type="submit" value="Submit">
</form>

<p>Click the "Submit" button and the form-data will be sent to a page on the
server called "action_page.php".</p>

</body>
</html>
در کد بالا یک textarea داره و یک دکمه. البته یک لیبل هم داره ولی اون لیبل نباشه هم اتفاقی نمی افته ، چون فقط مثل یک تابلو متنی را نمایش می دهد. اصلش هم تکست اریا و دکمه است. قبل و بعدش همشون هم تگ فرم می بینید باز و بسته شده.
کد بالا را زدم که به قول معروف from scratch بشه آموزش ، یعنی از تهو از بیخ همه چیز را گفته باشیم.وگرنه خیلی ها می دونن textarea چیه.

کد بالا از این صفحه است:
www.w3schools.com

W3Schools online HTML editor

The W3Schools online code editor allows you to edit code and view the result in your browser
www.w3schools.com www.w3schools.com
اگر به صفحه بالا بروید هم کد بالا هست ، و هم شکل textarea که کلا یک مستطیل است که میشه در آن نوشت و با زدن دکمه زیرش مطالب رابه سایت ارسال کرد.
 
آخرین ویرایش:
saalek110

saalek110

Well-Known Member
جمع بندی :
پس تا اینجا یک texarea داریم و یک تابع جاوا اسکریپت که هر متنی بهش بدیم در textarea درج می کنه.
و بعدش می تونیم بین دو تگ <<راست>>و <</راست>> مطلب خودمون را بنویسیم.
این عبارت راست-راست ، همراه نوشته ما میره در دیتابیس ذخیره میشه
و بعد موقع خواندن مقاله از دیتابیس جایگزین میشه با موارد مناسب مشابه html ، مثلا متنی قرمز نمایش داده میشه یا درشت نمایش داده میشه.
 
saalek110

saalek110

Well-Known Member
این خط را ببینید:
PHP: 
     $info['text']=str_replace("[Img]","<img src='",$info['text']);

در کد بالا یک تابع رشته ای php داریم که وقتی مقاله را از دیتابیس بیرون کشیدیم میاد جایگزینی های لازم را انجام می دهد ، چیزی که در خط کد بالا می بینید برای شروع نمایش عکس هست.

برای موارد دیگر هم جایگزینی ها باید انجام بشه.

یعنی به جای نماد هایی که در دیتابیس ذخیره کردید باید معادل html اونها را بگذارید.
 
آخرین ویرایش:
saalek110

saalek110

Well-Known Member
ادیتور آماده است.


پس ادیتور ساخته شد.
یک سری دکمه بالای textarea دارد که علامت هایی را در textarea درج می کند ،
و بعد موقع خوندن مقاله اون علامت ها با مشابه های html اش جایگزین میشه.

البته کیفیتش به ادیتور فعلی مجیدآنلاین نمی رسه ، در این ادیتور مجیدآنلاین وقتی میگیم بزرگ بنویس در داخل ادیتور هم بزرگ نمایش می دهد نه اینکه مثل ادیتور ما دورش بزنه بزرگ. ولی فروم من که phpbb است مثل همین ادیتور ساختگی ما تگ بزرگ می اندازه دو طرف نوشته . ممکنه این چیزی که مجیدانلاین داره یک افزونه بوده که بهش اضافه شده یا اینکه اصلا وی بی بالتن از اولش ادیتورش همین طوریه. قالب این فروم وی بی بالتن است که پولی است ولی قالب فروم من phpbb است که مجانی است.

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

saalek110

Well-Known Member
من چهارچوب و اسکلت ساخت چنین ادیتوری را گفتم.
کد کامل سایتم را که فکر نکنم اینجا بزنم، ولی شاید یک اسکلت کامل شده از کل کد را اینجا پست بزنم.ولی همه چیز گفته شده و خودتون می تونید بسازیدش.

ادیت ماهها بعد: در تاپیک زیر کد کامل ادیتور هست:


forum.majidonline.com

سایت خود را بسازید ، به روش saalek110

سایت خود را بسازید ، به روش saalek110 در این روش شما فقط html و css یاد می گیرید که خیلی خیلی ساده است و در همین تاپیک مقداریش آموزش داده می شود. کدهای php کدش به شکل آماده در اختیاز شما قرار می گیرد. جاوا اسکریپت هم خیلی کم استفاده شده و کدش آماده در پست ها قرار داده می شود. طرز استفاده از...
forum.majidonline.com forum.majidonline.com



ادیتور فعلی که الان جلوی من است یک فایل نیست و در فایلهای مختلف کدها پخش است.
مثلا یک فایل شامل همه replace ها است و وقتی مقاله از دیتابیس بیروم میاد اون فایل include میشه تا مقاله را تفت بده یعنی جایگزینی های لازم روی رشته خارج شده از دیتابیس انجام بشه.
اینکه چرا خرت و پرت های html را مستقیما داخل دیتابیس وارد نمی کنیم ، احتمالا چون اصلا نمیشه یا باعث دردسر میشه ، پس یک زبان رمزی باید بسازیم تا به جای کدهایhtml چیزهای بی خطری را در دیتابیس بنویسیم ولی موقع چاپ مقاله باید به جای اون زبان رمزی ،معادل های html اش را جایگزین کنیم تا مقاله به شکلی که می خواهیم به نماش در بیاید.
 
آخرین ویرایش:
saalek110

saalek110

Well-Known Member
شاید ساده ترین ادیتور برای یک سایت ساده ، همینی باشه که روش آن اینجا گفته شد.

ولی ممکن است ادیتورهای بهتری وجود داشته باشه که زیاد هم پیچیده تر از این ادیتور بحث شده در بالا نباشد.

شاید یک سرچی بکنم و چیز بهتری پیدا کنم. ولی تا اینجا یک روش ساخت ادیتور گفته شد. که با یک تابعی بود که تگ مورد نظر ما را در داخل ادیتور یا همون textarea درج می کرد.
 
saalek110

saalek110

Well-Known Member
در این ادیتور من ، یک فایل هست به نام ((دکمه های من)) که قبل کد textarea اینکلود میشه و کارش انداختن دکمه های ادیتور بالای texarea است.

یک قسمت ادیت مقاله هم داریم که میاد از دیتابیس مقاله را می خونه و می اندازد داخلtextarea که ادیتش کنیم این جوری:

HTML: 
  echo" <textarea charset=utf-8 form='myform' id='mytextarea' name='message1' rows='25' cols='100' form='form_id'> $post </textarea>";

اون متغیر $post همون مقاله است که از دیتابیس بیرون کشیدیم.
 
saalek110

saalek110

Well-Known Member
دیگه خوندن از دیتابیس را که که دیگه فکر نکنم ربطی به این تاپیک داشته باشه تا بگم. باید در تاپیک های دیگه دنبال این باشید. ولی کاری که من کردم اینه که در ردیف هر مقاله در دیتابیس یک ستون عنوان هم داره و عنوان میره داخل یک input و داخل textarea نمیره. چون داخل سایت روی عنوان مقاله یک حساب جدا باز میشه. یعنی نمایش عنوان به شکل خاصی در سایت است که می تونه ماه به ماهنمایش عنوان مقاله تغییر کنه ، پس به نظر من بهتره عنوان جدا در دیتابیس ذخیره بشه و موقع ادیت هم عنوان میرود داخل یک input یا یک textarea دیگر به غیر از texarea بدنه مقاله.
 
saalek110

saalek110

Well-Known Member
نمایش عکسهای مقاله:

یک کار دیگر که من کردم اومدم یک ستون در دیتابیس برای آدرس عکس مقاله در نظر گرفتم.
این کار دو حسن داره ،
اول اینکه چون ادرس جای خاصی است ، اون آدرس را راحت از دیتابیس برمی داریم و کار کردن باهاش راحته ، یعنی داخل مقاله قاطی نمیشه و کار باهاش ساده تره.
دوم اینکه عکس خاص مقاله محسوب میشه و کدهای سایت خوب می دونه با عکس خاص مقاله چه رفتاری باید داشته باشه. منظورم شیوه و محل نمایش عکس خاص مقاله است.


ولی ادیتور خودش امکان نمایش عکس هم داره.
ولی مثلا برای یک کاربر ناشی سایت ، انداختن آدرس عکس در آدرس دونی زیر مقاله راحت تره تا بهش بگی تگ image دو طرف آدرس عکس باید بگذاری. برای بعض کار با تگ ها در ادیتور ممکنه خیلی سخت باشه.ولی اگر بهش بگی آدرس عکس را بیانداز داخل اون کادر شاید برایش قابل فهم تر باشه. سایتی که من ساختم امکان درج عکسهای متعدد درون مقاله علاوه بر اون عکس خاص که ادرسش را زیر texarea داخل یک input می انداخت وجود داشت.یعنی دو جور میشد به مقاله عکس اضافه کرد.


پس دو روش انداختن عکس را در اینجا گفتم. هر کدام را دوست دارید استفاده کنید.
اولی این بود یک ادرس دونی زیر ادیتور بسازید و کاربر آدرس عکس را اونجا بیاندازد
و دومی اینکه آدرس عکس را بین تگ های img و /img بیاندازد.
 
آخرین ویرایش:
saalek110

saalek110

Well-Known Member
قدم بعدی:

شاید روش بالا ، خیلی عهد حجری و بدقواره باشه، ولی کار راه اندازه.
بعدا شاید چیزهای بهتری پیدا کردم و اینجا بحث کردم.
 
آخرین ویرایش:
برای ارسال پاسخ شما باید وارد سیستم شوید.

آخرین مطالب مجیدآنلاین

جدیدترین ارسال ها

بالا