آموزش كامل استفاده از Text Editor

mohammad_molana

mohammad_molana

Member
سلام

توسايت جستجو كردم و چن تا از اين كد ها رو كه تكست اديتور بودن پيدا كردم.

اما هيچ جا نتونستم يه آموزش پيدا كنم كه چطوري از اين ها استفاده كنم.

مي شه يكي لطف كنه و لينك يه تكست اديتور معمولي رو بزاره به علاوه آموزش كامل استفاده از اون رو؟؟

خيلي ممنون.
 
mohammad_molana

mohammad_molana

Member
کسی نیست کمک ام کنه؟؟

من تو تکست آریا هر وقت می خوام برم خط بعد باید یه تگ بی آر بزنم... عذابه.

کمک کنید...:lol:
 
mohammad_molana

mohammad_molana

Member
Extracting the archives
On Windows you could use WinZip or something similar, and on other operating systems such as Linux you simply extract the archive with the tar command. You can find a example on how to extract the archived file on Linux below.

You should extract TinyMCE in your wwwroot or site domain root folder.

[edit]Extract example using a shell
$ cd wwwroot
$ gzip -d tinymce_1_44.tar.gz
$ tar xvf tinymce_1_44.tar
[edit]A folder structure looking like this is created
/tinymce/
/tinymce/docs/
/tinymce/docs/zh_cn/
/tinymce/examples/
/tinymce/examples/zh_cn/
/tinymce/jscripts/
/tinymce/jscripts/tiny_mce/
/tinymce/jscripts/tiny_mce/langs/
/tinymce/jscripts/tiny_mce/plugins/
/tinymce/jscripts/tiny_mce/plugins/<plugin folders>
/tinymce/jscripts/tiny_mce/themes/
/tinymce/jscripts/tiny_mce/themes/advanced/
/tinymce/jscripts/tiny_mce/themes/default/
/tinymce/jscripts/tiny_mce/themes/simple/
[edit]Making changes on your web site
Once you have extracted the archive you will need to edit the pages to include the configuration and javascript for TinyMCE. Please note that you should probably only include the TinyMCE javascript on the pages that need it, not all the pages of the web site. Remember to change the URL to the .js below to match your installation path.

[edit]The most basic page integration (converts all textarea elements into editors)
<html>
<head>
<title>TinyMCE Test</title>
<script language="javascript" type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
mode : "textareas"
});
</script>
</head>
<body>
<!-- form sends content to moxiecode's demo page -->
<form method="post" action="http://tinymce.moxiecode.com/dump.php?example=true">
<textarea name="content" cols="50" rows="15">This is some content that will be editable with TinyMCE.</textarea>
<input type="submit" value="Save" />
</form>
</body>
</html>
The Save button in this example sends the content of the textarea to the moxiecode.com site and simply displays it to you. You can create your own "submit" process and have your system write the content to a file or database.

​
کلیک کنید تا باز شود...

گفته این کارا رو بکن
منم هر کاری گفته بود کردم ولی نشد
یه تکست آریای خالی و معمولی می یاد

با یه دکمه submit که می فرسته به سایت اصلی...

چی کارش کنم؟؟
 
آخرین ویرایش:
hidensoft

hidensoft

Member
در پوشه tinymce یک پوشه به نام examples وجود داره . فایل های HTML درون اون رو تست کنید . اگر اون ها هم عمل نکردند مطمئنا جاوا اسکریپت در مرور گر شما غیر فعال می باشد.
می تونی از روی سورس همون ها الهام بگیری

HTML: 
<script language="javascript" type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script>
باید آدرس صحیح رو بدی. jscripts/tiny_mce/tiny_mce.js/.. شاید آدرس صحیح فایل tiny_mce.js نباشه .. به این قسمت توجه کنید
 
آخرین ویرایش:
mohammad_molana

mohammad_molana

Member
همین که آدرس فایل جدید رو بدم کافیه؟
این فایل از کجا تشخیص می ده که کدوم تکست آریا رو باید به عنوان ورودی متن بشناسه؟؟؟

آیا در خود تکست آریا نیازی نیست تابعی فراخوانی بشه؟

همین خط بالا رو اول صفحه هام بنویسم؟؟؟

example ها رو دیدم
اونا کار می کنن.

اما من هم همون نوشته ها رو تو یه صفحه جدید نوشتم، ولی کار نکرد.

شاخه tinyMCE رو کجا کپی کنم؟ (در لوکال هاست )
 
jalilvand

jalilvand

Member
یه ID داره هر کدوم از text area ها که با اون مشخص می شه می خوای روش Editor باشه یا نه
 
mohammad_molana

mohammad_molana

Member
خیلی سپاسگذارم جناب جلیلوند

حالا تو این تکست ادیتور چه آی دی بدم من به تکست آریا؟؟؟
 
hidensoft

hidensoft

Member
اون کدی که شما خودتون گذاشتید تمام Textarea های موجود در صفحه رو به ادیتور تبدیل می کنه
کد: 
The most basic page integration (converts all textarea elements into editors)
برای اینکه خودتون اون textarea هایی که ما خواید رو به ادیتور تبدیل کنید این کد رو بین دو تگ <head> </head> بگذارید.
HTML: 
<!-- tinyMCE -->
<script language="javascript" type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
	tinyMCE.init({
		theme : "advanced",
		mode : "exact",
		elements : "elm1",
		save_callback : "customSave",
		content_css : "example_advanced.css",
		extended_valid_elements : "a[href|target|name]",
		plugins : "table",
		theme_advanced_buttons3_add_before : "tablecontrols,separator",
		//invalid_elements : "a",
		theme_advanced_styles : "Header 1=header1;Header 2=header2;Header 3=header3;Table Row=tableRow1", // Theme specific setting CSS classes
		//execcommand_callback : "myCustomExecCommandHandler",
		debug : false
	});

	// Custom event handler
	function myCustomExecCommandHandler(editor_id, elm, command, user_interface, value) {
		var linkElm, imageElm, inst;

		switch (command) {
			case "mceLink":
				inst = tinyMCE.getInstanceById(editor_id);
				linkElm = tinyMCE.getParentElement(inst.selection.getFocusElement(), "a");

				if (linkElm)
					alert("Link dialog has been overriden. Found link href: " + tinyMCE.getAttrib(linkElm, "href"));
				else
					alert("Link dialog has been overriden.");

				return true;

			case "mceImage":
				inst = tinyMCE.getInstanceById(editor_id);
				imageElm = tinyMCE.getParentElement(inst.selection.getFocusElement(), "img");

				if (imageElm)
					alert("Image dialog has been overriden. Found image src: " + tinyMCE.getAttrib(imageElm, "src"));
				else
					alert("Image dialog has been overriden.");

				return true;
		}

		return false; // Pass to next handler in chain
	}

	// Custom save callback, gets called when the contents is to be submitted
	function customSave(id, content) {
		alert(id + "=" + content);
	}
</script>
<!-- /tinyMCE -->
این کد رو هم بعد از تگ <body> بگذارید.
HTML: 
<textarea name="elm1" style="width:100%" rows="15">
	Some &lt;b&gt;element&lt;/b&gt;, this is to be editor 1. &lt;br /&gt; This editor instance has a 100% width to it.
	&lt;p&gt;Some paragraph. &lt;a href=&quot;http://www.sourceforge.net&quot;&gt;Some link&lt;/a&gt;&lt;/p&gt;
	&lt;img src=&quot;logo.jpg&quot;&gt;
</textarea>
اگر آدرس فایل tinymce.js رو درست داده باشید
HTML: 
<script language="javascript" type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script>

شما باید ادیتور رو ببینید. باز هم می گم .. مثال های موجود در پوشه example بیان گر تمام مسائل هست.
موفق باشید.
 
hidensoft

hidensoft

Member
طریق سایت osp.ir اقدام به ثبت TinyMce فارسی کردم .انشا الله تا چند روز آینده در دسترس قرار خواهد گرفت(OpenSource).
 
برای ارسال پاسخ شما باید وارد سیستم شوید.

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

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

بالا