root
/
tv_xiaoyouxi


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173
							<!DOCTYPE html>
<!--
Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
-->
<html>
<head>
	<meta charset="utf-8">
	<title>Autocomplete Smileys &mdash; CKEditor Sample</title>
	<script src="../../../ckeditor.js"></script>
	<script src="utils.js"></script>
	<link rel="stylesheet" href="../../../samples/css/samples.css">
	<link href="../skins/moono/autocomplete.css" rel="stylesheet">
</head>
<body>

<style>
	.adjoined-bottom:before {
		height: 270px;
	}
	.cke_autocomplete_icon
	{
		vertical-align: middle;
	}
</style>

<nav class="navigation-a">
	<div class="grid-container">
		<ul class="navigation-a-left grid-width-70">
			<li><a href="https://ckeditor.com">Project Homepage</a></li>
			<li><a href="https://github.com/ckeditor/ckeditor-dev/issues">I found a bug</a></li>
			<li><a href="https://github.com/ckeditor/ckeditor-dev" class="icon-pos-right icon-navigation-a-github">Fork CKEditor on GitHub</a></li>
		</ul>
		<ul class="navigation-a-right grid-width-30">
			<li><a href="https://ckeditor.com/blog/">CKEditor Blog</a></li>
		</ul>
	</div>
</nav>

<header class="header-a">
	<div class="grid-container">
		<h1 class="header-a-logo grid-width-30">
			<img src="../../../samples/img/logo.svg" onerror="this.src='../../../samples/img/logo.png'; this.onerror=null;" alt="CKEditor Sample">
		</h1>
	</div>
</header>

<main>
	<div class="adjoined-top">
		<div class="grid-container">
			<div class="content grid-width-100">
				<h1>Autocomplete Smileys Demo</h1>
				<p>This sample shows the progress of work on Autocomplete with Smileys integration. Type 	&#8220; : &#8221; to start smileys autocompletion.</p>
			</div>
		</div>
	</div>
	<div class="adjoined-bottom">
		<div class="grid-container">
			<div class="grid-width-100">
				<div id="editor">
					<h1>Apollo 11</h1>
					<figure class="image easyimage">
						<img alt="Saturn V carrying Apollo 11" src="../../../samples/img/logo.png">
					</figure>
					<p><strong>Apollo 11</strong> was the spaceflight that landed the first humans, Americans <a href="http://en.wikipedia.org/wiki/Neil_Armstrong">Neil Armstrong</a> and <a href="http://en.wikipedia.org/wiki/Buzz_Aldrin">Buzz Aldrin</a>, on the Moon on July 20, 1969, at 20:18 UTC. Armstrong became the first to step onto the lunar surface 6 hours later on July 21 at 02:56 UTC.</p>
					<figure class="easyimage easyimage-side">
						<img alt="Saturn V carrying Apollo 11" src="../../image2/samples/assets/image1.jpg">
						<figcaption>Saturn V carrying Apollo 11</figcaption>
					</figure>
					<p>Armstrong spent about <s>three and a half</s> two and a half hours outside the spacecraft, Aldrin slightly less; and together they collected 47.5 pounds (21.5&nbsp;kg) of lunar material for return to Earth. A third member of the mission, <a href="http://en.wikipedia.org/wiki/Michael_Collins_(astronaut)">Michael Collins</a>, piloted the <a href="http://en.wikipedia.org/wiki/Apollo_Command/Service_Module">command</a> spacecraft alone in lunar orbit until Armstrong and Aldrin returned to it for the trip back to Earth.</p>
				</div>
			</div>
		</div>
	</div>
</main>

<footer class="footer-a grid-container">
	<div class="grid-container">
		<p class="grid-width-100">
			CKEditor &ndash; The text editor for the Internet &ndash; <a class="samples" href="https://ckeditor.com/">https://ckeditor.com</a>
		</p>
		<p class="grid-width-100" id="copy">
			Copyright &copy; 2003-2019, <a class="samples" href="https://cksource.com/">CKSource</a> &ndash; Frederico Knabben. All rights reserved.
		</p>
	</div>
</footer>

<script>
	'use strict';

	( function() {
		// For simplicity we define the plugin in the sample, but normally
		// it would be extracted to a separate file.
		CKEDITOR.plugins.add( 'smileyautocomplete', {
			requires: 'autocomplete,textmatch,smiley',

			onLoad: function() {
				var that = this,
					View = CKEDITOR.plugins.autocomplete.view,
					Autocomplete = CKEDITOR.plugins.autocomplete;

				function SmileyView( editor ) {
					// Call the parent class constructor.
					View.call( this, editor );

					this.itemTemplate = new CKEDITOR.template(
						'<li data-id="{id}"><img src="{src}" alt="{id}" class="cke_autocomplete_icon"> {name}</li>'
					);
				}
				// Inherit the view methods.
				SmileyView.prototype = CKEDITOR.tools.prototypedCopy( View.prototype );

				function SmileyAutocomplete( editor ) {
					var data = that.getData( editor );

					// Call the parent class constructor.
					Autocomplete.call(
						this, editor,
						autocompleteUtils.getTextTestCallback( ':', 0, false ),
						autocompleteUtils.getSyncDataCallback( data )
					);
				}
				// Inherit the autocomplete methods.
				SmileyAutocomplete.prototype = CKEDITOR.tools.prototypedCopy( Autocomplete.prototype );

				SmileyAutocomplete.prototype.getHtmlToInsert = function( item ) {
					return '<img src=' + item.src + ' alt="' + item.id + '" />';
				};

				SmileyAutocomplete.prototype.getView = function() {
					return new SmileyView( this.editor );
				}

				// Expose the smiley autocomplete so it can be used later.
				CKEDITOR.plugins.smileyAutocomplete = SmileyAutocomplete;
			},

			getData: function( editor ) {
				var descriptions = editor.config.smiley_descriptions,
					images = editor.config.smiley_images,
					path = editor.config.smiley_path,
					data = [];

				for ( var i = 0; i < descriptions.length; ++i ) {
					data.push( {
						id: descriptions[ i ],
						name: ':' + descriptions[ i ],
						src: CKEDITOR.tools.htmlEncode( path + images[ i ] )
					} );
				}
				return data;
			}
		} );

		var editor = CKEDITOR.replace( 'editor', {
			height: 600,
			extraPlugins: 'smileyautocomplete,autocomplete,textmatch,easyimage,sourcearea,toolbar,undo,wysiwygarea,basicstyles',
			toolbar: [
				{ name: 'document', items: [ 'Source', 'Undo', 'Redo' ] },
				{ name: 'basicstyles', items: [ 'Bold', 'Italic', 'Strike' ] },
			]
		} );

		editor.on( 'instanceReady', function() {
			// Use the smiley autocomplete class.
			new CKEDITOR.plugins.smileyAutocomplete( editor );
		} );
	} )();
</script>

</body>
</html>