Adatum
Июл
29
2013

WYSIWYG редактор с загрузкой изображений KindEditor 4.1.7 на русском

12
Предлагаю вашему вниманию wysiwyg редактор с аплоадом картинок kindeditor-4.1.7. Скачать его можете на китайском сайте http://www.kindsoft.net/. Я же выложу уже локализованую мной версию здесь.

Демо Скачать

Мной внесено ряд изменений в этот замечательный скрипт так к примеру я удалил китайские карты baldu и немного скорректировал google карты.

Как пользоваться:
1.подключаем скрипты

                <link rel="stylesheet" href="./kindeditor/default.css" />
		<script charset="utf-8" src="./kindeditor/kindeditor.js"></script>
		<script charset="utf-8" src="./kindeditor/ru_Ru.js"></script>


2.Инициализируем

<script>
			
			KindEditor.ready(function(K) {
				K.create('#content1', {
				
					cssPath : ['./kindeditor/plugins/code/prettify.css', 'index.css'],
						autoHeightMode : true, // это автоматическая высота блока
					afterCreate : function() {
						this.loadPlugin('autoheight');
					},
					allowFileManager : true,
				items : [// Вот здесь задаем те кнопки которые хотим видеть
		'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
		'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
		'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
		'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
		'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
		'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',
		'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons','pagebreak',
		'anchor', 'link',  'unlink','map', '|', 'about'
	]
				});
		//Ниже инициализируем доп. например выбор цвета или загрузка файла
				var colorpicker;
				K('#colorpicker').bind('click', function(e) {
					e.stopPropagation();
					if (colorpicker) {
						colorpicker.remove();
						colorpicker = null;
						return;
					}
					var colorpickerPos = K('#colorpicker').pos();
					colorpicker = K.colorpicker({
						x : colorpickerPos.x,
						y : colorpickerPos.y + K('#colorpicker').height(),
						z : 19811214,
						selectedColor : 'default',
						noColor : 'Очистить',
						click : function(color) {
							K('#color').val(color);
							colorpicker.remove();
							colorpicker = null;
						}
					});
				});
				K(document).click(function() {
					if (colorpicker) {
						colorpicker.remove();
						colorpicker = null;
					}
				});
				
						var editor = K.editor({
					allowFileManager : true
				});
				K('#insertfile').click(function() {
					editor.loadPlugin('insertfile', function() {
						editor.plugin.fileDialog({
							fileUrl : K('#url').val(),
							clickFn : function(url, title) {
								K('#url').val(url);
								editor.hideDialog();
							}
						});
					});
				});
				K('#image1').click(function() {
					editor.loadPlugin('image', function() {
						editor.plugin.imageDialog({
							imageUrl : K('#url1').val(),
							clickFn : function(url, title, width, height, border, align) {
								K('#url1').val(url);
								editor.hideDialog();
							}
						});
					});
				});
				K('#image2').click(function() {
					editor.loadPlugin('image', function() {
						editor.plugin.imageDialog({
							showLocal : false,
							imageUrl : K('#url2').val(),
							clickFn : function(url, title, width, height, border, align) {
								K('#url2').val(url);
								editor.hideDialog();
							}
						});
					});
				});
				K('#image3').click(function() {
					editor.loadPlugin('image', function() {
						editor.plugin.imageDialog({
							showRemote : false,
							imageUrl : K('#url3').val(),
							clickFn : function(url, title, width, height, border, align) {
								K('#url3').val(url);
								editor.hideDialog();
							}
						});
					});
				});
				
			});
		</script>

3. Выводим сам блок в textarea.

 <textarea id="content1" name="content" style="width:750px;height:200px;visibility:hidden;"></textarea>

Похожие статьи

Оставить комментарий

  • Очень приятный редактор,
    спасибо за перевод. Я еще в алертах сообщения перевел, но их там немного.
    Проблемка; не могу найти как заставить ставить в загруженных картинках абсолютный путь, а не относительный.

  • А где указывать корневую папку при подгрузке картинок?

    У меня при загрузке выскакивает сообщение на корейском. Откуда оно?

  • Здесь нету загрузки картинок

    • как нету ? посмотри пример прекрасно реализованная загрузка !

  • Очень рад что пригодилось )

  • Огромное спасибо, пригодилось