WebRoot/backend/ckeditor/samples/inlinetextarea.html

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

<!DOCTYPE html>
<!--
Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
-->
<html>
<head>
	<meta charset="utf-8">
	<title>Replace Textarea with Inline Editor &mdash; CKEditor Sample</title>
	<script src="../ckeditor.js"></script>
	<link href="sample.css" rel="stylesheet">
	<style>

		/* Style the CKEditor element to look like a textfield */
		.cke_textarea_inline
		{
			padding: 10px;
			height: 200px;
			overflow: auto;

			border: 1px solid gray;
			-webkit-appearance: textfield;
		}

	</style>
</head>
<body>
	<h1 class="samples">
		<a href="index.html">CKEditor Samples</a> &raquo; Replace Textarea with Inline Editor
	</h1>
	<div class="description">
		<p>
			You can also create an inline editor from a <code>textarea</code>
			element. In this case the <code>textarea</code> will be replaced
			by a <code>div</code> element with inline editing enabled.
		</p>
<pre class="samples">
// "article-body" is the name of a textarea element.
var editor = CKEDITOR.inline( 'article-body' );
</pre>
	</div>
	<form action="sample_posteddata.php" method="post">
		<h2>This is a sample form with some fields</h2>
		<p>
			Title:<br>
			<input type="text" name="title" value="Sample Form"></p>
		<p>
			Article Body (Textarea converted to CKEditor):<br>
			<textarea name="article-body" style="height: 200px">
				&lt;h2&gt;Technical details &lt;a id="tech-details" name="tech-details"&gt;&lt;/a&gt;&lt;/h2&gt;

				&lt;table align="right" border="1" bordercolor="#ccc" cellpadding="5" cellspacing="0" style="border-collapse:collapse;margin:10px 0 10px 15px;"&gt;
					&lt;caption&gt;&lt;strong&gt;Mission crew&lt;/strong&gt;&lt;/caption&gt;
					&lt;thead&gt;
					&lt;tr&gt;
						&lt;th scope="col"&gt;Position&lt;/th&gt;
						&lt;th scope="col"&gt;Astronaut&lt;/th&gt;
					&lt;/tr&gt;
					&lt;/thead&gt;
					&lt;tbody&gt;