آموزش ساخت ویرایشگر محتوا text editor حرفه ای با جاوا اسکریپت
ویرایشگر محتوا با جاوا اسکریپت – text editor یک بخش مهم از سیستم مدیریت محتوا محسوب می شود همین الان که دارم برای شما این مقاله رو می نویسم از ویرایشگر TinyMCE وردپرس استفاده می کنم 😁 .
در این آموزش قصد داریم از ویرایشگر محتوای قدرتمند QuillJs استفاده کنیم .
ساختار HTML برای ویرایشگر نوشته
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>Rapidcode.iR - سورس کد</title>
<link rel="stylesheet" href="static/css/lib/monokai-sublime.min.css">
<link rel="stylesheet" href="static/css/lib/quill.snow.css">
<link rel="stylesheet" href="static/css/main.css">
</head>
<body>
<div class="container">
<a id="introduce" href="https://rapidcode.ir" target="_blank">رپید کد • کتابخانه مجازی برنامه نویسان</a>
<div class="text-editor-container">
<div id="text-editor">
<p>میخوام یک کد خفن بنویسم 😉</p>
<p>معرکه <strong>هست</strong> مگه نه</p>
<p><br></p>
</div>
</div>
</div>
<script src="static/js/lib/highlight.min.js"></script>
<script src="static/js/lib/quill.min.js"></script>
<script src="static/js/app.js"></script>
</body>
</html>
در نظر داشته باشید که می توانیم چینش و ویژگی هایی را به تولبار ویرایشگر اضافه کنیم همینطور که در toolbarOptions پایین مشاهده می کنید .
فایل app.js برای کانفیگ ویرایشگر
var toolbarOptions = [
['bold', 'italic', 'underline', 'strike'], // toggled buttons
['blockquote', 'code-block'],
[{ 'header': 1 }, { 'header': 2 }], // custom button values
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
[{ 'script': 'sub'}, { 'script': 'super' }], // superscript/subscript
[{ 'indent': '-1'}, { 'indent': '+1' }], // outdent/indent
[{ 'direction': 'rtl' }], // text direction
[{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
[{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme
[{ 'font': [] }],
[{ 'align': [] }],
['clean'] // remove formatting button
];
var quill = new Quill('#text-editor', {
modules: {
syntax: true,
toolbar: toolbarOptions
},
placeholder: 'چه در ذهن دارید ؟! . . .',
theme: 'snow'
});
// برای راست چین کردن
var content = quill.getContents();
quill.setSelection(0 , quill.getLength())
document.querySelector(".ql-direction").click();
quill.setSelection(0 , 0);
خروجی برنامه ویرایشگر
لیست نظرات
سلام لطفا آموزش آپلود فایل برروی سرور در ویرایشگر فوق را با زبان جی کوئری و پی اچ پی قرار بدید تشکر
درود ، به زودی قرار می دیم .