Редактирование свойст изображения

Rawreso · 29 июля 2022

https://rawr-eso.ru/2-test.html
Первые две картинки.

Скрытый текст

Проблема вот в чем, если вставить картинку и потом отредактировать, допустим добавить описание, то автоматически устанавливается и фиксируется размер картинки, и его ни как не убрать, только по новой вставить картинку. Всё бы ничего, но в мобильной версии выглядит ужасно, отредактированная картинка сильно растянута из-за присвоенных ей размеров.
Как этот эффект убрать?

В тестовой статье выше первая только вставлена, у второй было изменено описание.

celsoft · 29 июля 2022

Нажав на картинку, выберите в редакторе редактирования исходного кода, и удалите параметры размеров из кода.

Rawreso · 29 июля 2022

1 минуту назад, celsoft сказал:

Нажав на картинку, выберите в редакторе редактирования исходного кода, и удалите параметры размеров из кода.

Это само собой понятно, есть люди (авторы) которым это сложно, как от это этого совсем избавится?

Это ошибка?

celsoft · 29 июля 2022

2 минуты назад, Rawreso сказал:

как от это этого совсем избавится?

Никак.

2 минуты назад, Rawreso сказал:

Это ошибка?

Нет. Так работает редактор tinymce и так в нем заложена функциональность, которая никак не отключается. Можете например в настройках скрипта переключиться на другие редакторы, в DLE их три на выбор.

Rawreso · 29 июля 2022

Серьёзно? Я не хочу другой редактор, и мне не нужно выставлять размеры картинкам при их редактировании, зачем этот функционал вообще?

Как это выключить?

celsoft · 29 июля 2022

3 минуты назад, Rawreso сказал:

Серьёзно?

Очень даже

3 минуты назад, Rawreso сказал:

Я не хочу другой редактор, и мне не нужно выставлять размеры картинкам при их редактировании, зачем этот функционал вообще?

Как это выключить?

Это вы задайте вопрос разработчикам редактора https://www.tiny.cloud они не предусмотрели функцию выключения.

Rawreso · 29 июля 2022

Я вас понял.

master27 · 29 июля 2022

Ваша мобильная версия - добавьте с стили что то типа...

.full-news-content .highslide > img {
    height: auto !important;
}

celsoft · 29 июля 2022

прошу прощения, я вас обманул раньше просто не было его, теперь появилось. Свойство https://www.tiny.cloud/docs/tinymce/6/image/#image_dimensions

Для админпанели добавить его нужно в файл engine/editor/shortnews.php

Ну или да, через шаблон как написали выше принудительно переназначить при выводе.

Rawreso · 29 июля 2022

21 минуту назад, master27 сказал:

Ваша мобильная версия - добавьте с стили что то типа...

Большое спасибо, этот стиль исправил проблему.

22 минуты назад, celsoft сказал:

Для админпанели добавить его нужно в файл engine/editor/shortnews.php

Я добавил этот код в указанный вами файл, но результат оказался немного другим, он выключил редакторы, совсем. Вставлял в самый верх.

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'image',
  toolbar: 'image',
  image_description: false
});

Я неправильно вставлял, надо было так:

<script>
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'image',
  toolbar: 'image',
  image_description: false
});
</script>

Rawreso · 29 июля 2022

@celsoft Если я правильно понял описание функции image_dimensions, то положение false должно выключить поле описание в диалоговом окне картинки, но этого не происходит. Я что-то не так сделал?

shortnews.php

Скрытый текст


<?php
/*
=====================================================
 DataLife Engine - by SoftNews Media Group 
-----------------------------------------------------
 http://dle-news.ru/
-----------------------------------------------------
 Copyright (c) 2004-2022 SoftNews Media Group
=====================================================
 This code is protected by copyright
=====================================================
 File: shortnews.php
-----------------------------------------------------
 Use: WYSIWYG for adminpanel
=====================================================
*/
if( !defined( 'DATALIFEENGINE' ) ) {
	header( "HTTP/1.1 403 Forbidden" );
	header ( 'Location: ../../' );
	die( "Hacking attempt!" );
}

if ($mod != "editnews") {
	$row['id'] = 0;
	$row['autor'] = $member_id['name'];
}

if (!isset ($row['short_story'])) $row['short_story'] = "";

$row['id'] = isset($row['id']) ? intval($row['id']) : 0;

$lang['wysiwyg_language'] = totranslit( $lang['wysiwyg_language'], false, false );
$p_name = urlencode($row['autor']);

if( $config['allow_admin_wysiwyg'] == 1 ) {

	$quick_icon = "'video',";

	if ( $user_group[$member_id['user_group']]['allow_image_upload'] OR $user_group[$member_id['user_group']]['allow_file_upload'] ) {
		$image_upload = "'dleupload',";
		$image_q_upload = ", 'imageUpload'";
		$quick_icon .= "'image',";
	} else {$image_upload = ""; $image_q_upload = "";}
	
	if($config['bbimages_in_wysiwyg']) {
		$implugin = 'dleimg';
	} else $implugin = 'insertImage';

echo <<<HTML
<script>
tinymce.init({
	selector: 'textarea',  // change this value according to your HTML
	plugins: 'image',
	toolbar: 'image',
	image_description: false
});
</script>
<script>
jQuery(function($){

      $('.wysiwygeditor').froalaEditor({
        dle_root: '',
        dle_upload_area : "short_story",
        dle_upload_user : "{$p_name}",
        dle_upload_news : "{$row['id']}",
        width: '100%',
        height: '350',
        language: '{$lang['wysiwyg_language']}',
        imageAllowedTypes: ['jpeg', 'jpg', 'png', 'gif', 'bmp', 'webp', 'avif'],
        imageDefaultWidth: 0,
        imageInsertButtons: ['imageBack', '|', 'imageByURL'{$image_q_upload}],
        imageUploadURL: 'engine/ajax/controller.php?mod=upload',
        imageUploadParam: 'qqfile',
        imageUploadParams: { "subaction" : "upload", "news_id" : "{$row['id']}", "area" : "short_story", "author" : "{$p_name}", "mode" : "quickload", "user_hash" : "{$dle_login_hash}"},
        imageMaxSize: {$config['max_up_size']} * 1024,
        quickInsertButtons: [{$quick_icon}'table', 'ul', 'ol', 'hr'],
		
        toolbarButtonsXS: ['bold', 'italic', 'underline', 'strikeThrough', 'align', 'color', 'insertLink', '{$implugin}', {$image_upload}'insertVideo', 'paragraphFormat', 'paragraphStyle', 'dlehide', 'dlequote', 'dlespoiler', 'html'],

        toolbarButtonsSM: ['bold', 'italic', 'underline', 'strikeThrough', '|', 'align', 'color', 'insertLink', '|', '{$implugin}',{$image_upload}'insertVideo', 'dleaudio', '|', 'paragraphFormat', 'paragraphStyle', '|', 'formatOL', 'formatUL', '|', 'dlehide', 'dlequote', 'dlespoiler', 'html'],

        toolbarButtonsMD: ['bold', 'italic', 'underline', 'strikeThrough', '|', 'align', 'indent', 'outdent', '|', 'subscript', 'superscript', '|', 'insertTable', 'formatOL', 'formatUL', 'insertHR', '|', 'undo', 'redo', 'dletypo', 'clearFormatting', 'selectAll', '|', 'fullscreen', '-', 
                         'fontFamily', 'fontSize', '|', 'color', 'paragraphFormat', 'paragraphStyle', '|', 'insertLink', 'dleleech', '|', 'emoticons', '{$implugin}',{$image_upload}'|', 'insertVideo', 'dleaudio', 'dlemedia' ,'|', 'dlehide', 'dlequote', 'dlespoiler','dlecode','page_dropdown', 'html'],

        toolbarButtons: ['bold', 'italic', 'underline', 'strikeThrough', '|', 'align', 'indent', 'outdent', '|', 'subscript', 'superscript', '|', 'insertTable', 'formatOL', 'formatUL', 'insertHR', '|', 'undo', 'redo', 'dletypo', 'clearFormatting', 'selectAll', '|', 'fullscreen', '-', 
                         'fontFamily', 'fontSize', '|', 'color', 'paragraphFormat', 'paragraphStyle', '|', 'insertLink', 'dleleech', '|', 'emoticons', '{$implugin}',{$image_upload}'|', 'insertVideo', 'dleaudio', 'dlemedia', '|', 'dlehide', 'dlequote', 'dlespoiler','dlecode','page_dropdown', 'html']

      }).on('froalaEditor.image.inserted froalaEditor.image.replaced', function (e, editor, \$img, response) {
	  
			if( response ) {
			
			    response = JSON.parse(response);
			  
			    \$img.removeAttr("data-returnbox").removeAttr("data-success").removeAttr("data-xfvalue").removeAttr("data-flink");

				if(response.flink) {
				  if(\$img.parent().hasClass("highslide")) {
		
					\$img.parent().attr('href', response.flink);
		
				  } else {
		
					\$img.wrap( '<a href="'+response.flink+'" class="highslide"></a>' );
					
				  }
				}
			  
			}
			
		});

});
</script>
    <div class="editor-panel"><textarea id="short_story" name="short_story" class="wysiwygeditor" style="width:98%;height:400px;">{$row['short_story']}</textarea></div>
HTML;

} else {

	if($config['bbimages_in_wysiwyg']) {
		$implugin = 'dleimage';
	} else $implugin = 'image';

	$image_upload = array();
	
	if ( $user_group[$member_id['user_group']]['allow_image_upload'] ) {

		$image_upload[0] = "dleupload ";

		$image_upload[1] = <<<HTML
function dle_image_upload_handler (blobInfo, success, failure, progress) {
  var xhr, formData;

  xhr = new XMLHttpRequest();
  xhr.withCredentials = false;
  xhr.open('POST', 'engine/ajax/controller.php?mod=upload');
  
  xhr.upload.onprogress = function (e) {
    progress(e.loaded / e.total * 100);
  };

  xhr.onload = function() {
    var json;

    if (xhr.status === 403) {
      failure('HTTP Error: ' + xhr.status, { remove: true });
      return;
    }

    if (xhr.status < 200 || xhr.status >= 300) {
      failure('HTTP Error: ' + xhr.status);
      return;
    }

    json = JSON.parse(xhr.responseText);

    if (!json || typeof json.link != 'string') {

		if(typeof json.error == 'string') {
			failure(json.error);
		} else {
			failure('Invalid JSON: ' + xhr.responseText);	
		}
		
		var editor = tinymce.activeEditor;
		var node = editor.selection.getEnd();
		editor.selection.select(node);
		editor.selection.setContent('');
		
      return;
    }

	if( json.flink ) {
		
		var editor = tinymce.activeEditor;
		var node = editor.selection.getEnd();
		editor.selection.select(node);
		editor.selection.setContent('<a href="'+json.flink+'" class="highslide"><img src="'+json.link+'" style="display: block; margin-left: auto; margin-right: auto;"></a>&nbsp;');
		editor.notificationManager.close();

	} else {
		success(json.link);
	}
	
  };

  xhr.onerror = function () {
    failure('Image upload failed due to a XHR Transport error. Code: ' + xhr.status);
  };
  	
  formData = new FormData();
  formData.append('qqfile', blobInfo.blob(), blobInfo.filename());
  formData.append("subaction", "upload");
  formData.append("news_id", "{$row['id']}");
  formData.append("area", "short_story");
  formData.append("author", "{$p_name}");
  formData.append("mode", "quickload");
  formData.append("editor_mode", "tinymce");
  formData.append("user_hash", "{$dle_login_hash}");    
  
  xhr.send(formData);
};
HTML;

		$image_upload[2] = <<<HTML
paste_data_images: true,
automatic_uploads: true,
images_upload_handler: dle_image_upload_handler,
images_reuse_filename: true,

image_uploadtab: false,
images_file_types: 'gif,jpg,png,jpeg,bmp,webp,avif',

file_picker_types: 'image',
file_picker_callback: function (cb, value, meta) {
  var input = document.createElement('input');
  input.setAttribute('type', 'file');
  input.setAttribute('accept', 'image/*');

  input.onchange = function () {
	var file = this.files[0];

	var filename = file.name;
	filename = filename.split('.').slice(0, -1).join('.');

	var reader = new FileReader();
	
	reader.onload = function () {

	  var id = filename;
	  var blobCache =  tinymce.activeEditor.editorUpload.blobCache;
	  var base64 = reader.result.split(',')[1];
	  var blobInfo = blobCache.create(id, file, base64);
	  blobCache.add(blobInfo);

	  cb(blobInfo.blobUri());
	};
	
	reader.readAsDataURL(file);
  };

  input.click();
},
HTML;
		
	} else {
		
		$image_upload[0] = "";
		$image_upload[1] = "";
		$image_upload[2] = "";
		
	}	
	
	if( $user_group[$member_id['user_group']]['allow_file_upload'] ) {
		$image_upload[0] = "dleupload ";
	}

if( @file_exists( ROOT_DIR . '/templates/'. $config['skin'].'/editor.css' ) ) {
	
	$editor_css = "templates/{$config['skin']}/editor.css";
		
} else $editor_css = "engine/editor/css/content.css";

echo <<<HTML
<script>
jQuery(function($){

	{$image_upload[1]}

	tinyMCE.baseURL = 'engine/editor/jscripts/tiny_mce';
	tinyMCE.suffix = '.min';

	if(dle_theme === null) dle_theme = '';

	tinymce.init({
		selector: 'textarea.wysiwygeditor',
		language : "{$lang['wysiwyg_language']}",
		element_format : 'html',
		body_class: dle_theme,
		skin: dle_theme == 'dle_theme_dark' ? 'oxide-dark' : 'oxide',

		width : "100%",
		height : 400,
		deprecation_warnings: false,

		plugins: ["fullscreen advlist autolink lists link image charmap anchor searchreplace visualblocks visualchars nonbreaking noneditable table paste codemirror spellchecker dlebutton codesample hr quickbars autosave wordcount pagebreak"],

		setup: function(editor) {
			editor.on('PreInit', function() {
				var shortEndedElements = editor.schema.getShortEndedElements();
				shortEndedElements['path'] = {};
				shortEndedElements['source'] = {};
				shortEndedElements['use'] = {};
			});
		},

		relative_urls : false,
		convert_urls : false,
		remove_script_host : false,
		verify_html: false,
		nonbreaking_force_tab: true,
		branding: false,
		default_link_target: '_blank',
		browser_spellcheck: true,
		pagebreak_separator: '{PAGEBREAK}',
		pagebreak_split_block: true,
		noneditable_editable_class: 'contenteditable',
		noneditable_noneditable_class: 'noncontenteditable',
		contextmenu: 'image table spellchecker lists',

		image_advtab: true,
		image_caption: true,
		{$image_upload[2]}
		
		draggable_modal: true,
		menubar: 'edit insert format table view tools',
		toolbar: 'bold italic underline strikethrough | align | bullist numlist | indent outdent | link dleleech unlink | {$implugin} {$image_upload[0]} dlemp dlaudio dletube dleemo | dle | fontformatting textformatting fullscreen code',
		toolbar_mode: 'floating',
		toolbar_groups: {
		  
		  fontformatting: {
			icon: 'change-case',
			tooltip: 'Formatting',
			items: 'formatselect fontselect fontsizeselect | forecolor backcolor'
		  },
		  
		  textformatting: {
			icon: 'edit-block',
			tooltip: 'Tools',
			items: 'searchreplace spellchecker | dletypo removeformat'
		  },
		  
		  align: {
			icon: 'align-center',
			tooltip: 'Formatting',
			items: 'alignleft aligncenter alignright alignjustify'
		  },
		  
		  dle: {
			icon: 'preview',
			tooltip: 'DLE Tags',
			items: 'dlequote dlespoiler dlehide codesample | pagebreak dlepage'
		  }
		  
		  
		},
		
		menu: {
			view: { title: 'View', items: 'restoredraft | visualaid visualchars visualblocks | fullscreen' }
		},
		removed_menuitems: 'codeformat, bold, italic, underline, strikethrough',

		quickbars_insert_toolbar: '',
		quickbars_selection_toolbar: 'bold italic underline | quicklink dlequote dlespoiler dlehide | forecolor backcolor formatselect',

		autosave_ask_before_unload: true,
		autosave_interval: '10s',
		autosave_prefix: 'dle-editor-{path}{query}-{id}-',
		autosave_restore_when_empty: false,
		autosave_retention: '10m',
  
		formats: {
		  bold: {inline: 'b'},  
		  italic: {inline: 'i'},
		  underline: {inline: 'u', exact : true},  
		  strikethrough: {inline: 's', exact : true}
		},
		
		spellchecker_language : "ru",
		spellchecker_languages : "Russian=ru,Ukrainian=uk,English=en",
		spellchecker_rpc_url : "https://speller.yandex.net/services/tinyspell",
		
		dle_root : "",
		dle_upload_area : "short_story",
		dle_upload_user : "{$p_name}",
		dle_upload_news : "{$row['id']}",

		content_css : "{$editor_css}"

	});

});
</script>

    <div class="editor-panel"><textarea id="short_story" name="short_story" class="wysiwygeditor" style="width:98%;height:300px;">{$row['short_story']}</textarea></div>
HTML;

}

?>

celsoft · 29 июля 2022

Во первых я указал другой параметр а именно image_dimensions, во вторых вы допустили банальную синтаксическую ошибку, и не указали запятую, что можно увидеть в консоли браузреа. А именно должно быть

image_dimensions: false,

Rawreso · 29 июля 2022

5 минут назад, celsoft сказал:

Во первых я указал другой параметр а именно image_dimensions

Да, я перепутал.

8 минут назад, celsoft сказал:

во вторых вы допустили банальную синтаксическую ошибку, и не указали запятую, что можно увидеть в консоли браузреа.

Здесь нет мой ошибки, такой код представлен в документации, я просто скопировал. Как бы там не было, но результат нулевой, что с запятой что без, поля размеров не убираются.

celsoft · 29 июля 2022

1 час назад, Rawreso сказал:

Здесь нет мой ошибки, такой код представлен в документации, я просто скопировал.

В документации правильный код, потому как после этого параметра в документации нет других параметров, а туда куда вы ставите, они дальше есть, поэтому нужно ставить запятую.

1 час назад, Rawreso сказал:

Как бы там не было, но результат нулевой, что с запятой что без, поля размеров не убираются.

Этот параметр рабочий, что то вы значит не правильно делаете.

Rawreso · 29 июля 2022

59 минут назад, celsoft сказал:

Этот параметр рабочий, что то вы значит не правильно делаете.

Вод код в файле shortnews.php, что тут не правильно?

Цитата


<?php
/*
=====================================================
 DataLife Engine - by SoftNews Media Group 
-----------------------------------------------------
 http://dle-news.ru/
-----------------------------------------------------
 Copyright (c) 2004-2022 SoftNews Media Group
=====================================================
 This code is protected by copyright
=====================================================
 File: shortnews.php
-----------------------------------------------------
 Use: WYSIWYG for adminpanel
=====================================================
*/
if( !defined( 'DATALIFEENGINE' ) ) {
	header( "HTTP/1.1 403 Forbidden" );
	header ( 'Location: ../../' );
	die( "Hacking attempt!" );
}

if ($mod != "editnews") {
	$row['id'] = 0;
	$row['autor'] = $member_id['name'];
}

if (!isset ($row['short_story'])) $row['short_story'] = "";

$row['id'] = isset($row['id']) ? intval($row['id']) : 0;

$lang['wysiwyg_language'] = totranslit( $lang['wysiwyg_language'], false, false );
$p_name = urlencode($row['autor']);

if( $config['allow_admin_wysiwyg'] == 1 ) {

	$quick_icon = "'video',";

	if ( $user_group[$member_id['user_group']]['allow_image_upload'] OR $user_group[$member_id['user_group']]['allow_file_upload'] ) {
		$image_upload = "'dleupload',";
		$image_q_upload = ", 'imageUpload'";
		$quick_icon .= "'image',";
	} else {$image_upload = ""; $image_q_upload = "";}
	
	if($config['bbimages_in_wysiwyg']) {
		$implugin = 'dleimg';
	} else $implugin = 'insertImage';

echo <<<HTML
<script>
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'image',
  toolbar: 'image',
  image_dimensions: false,
});
</script>
<script>
jQuery(function($){

      $('.wysiwygeditor').froalaEditor({
        dle_root: '',
        dle_upload_area : "short_story",
        dle_upload_user : "{$p_name}",
        dle_upload_news : "{$row['id']}",
        width: '100%',
        height: '350',
        language: '{$lang['wysiwyg_language']}',
        imageAllowedTypes: ['jpeg', 'jpg', 'png', 'gif', 'bmp', 'webp', 'avif'],
        imageDefaultWidth: 0,
        imageInsertButtons: ['imageBack', '|', 'imageByURL'{$image_q_upload}],
        imageUploadURL: 'engine/ajax/controller.php?mod=upload',
        imageUploadParam: 'qqfile',
        imageUploadParams: { "subaction" : "upload", "news_id" : "{$row['id']}", "area" : "short_story", "author" : "{$p_name}", "mode" : "quickload", "user_hash" : "{$dle_login_hash}"},
        imageMaxSize: {$config['max_up_size']} * 1024,
        quickInsertButtons: [{$quick_icon}'table', 'ul', 'ol', 'hr'],
		
        toolbarButtonsXS: ['bold', 'italic', 'underline', 'strikeThrough', 'align', 'color', 'insertLink', '{$implugin}', {$image_upload}'insertVideo', 'paragraphFormat', 'paragraphStyle', 'dlehide', 'dlequote', 'dlespoiler', 'html'],

        toolbarButtonsSM: ['bold', 'italic', 'underline', 'strikeThrough', '|', 'align', 'color', 'insertLink', '|', '{$implugin}',{$image_upload}'insertVideo', 'dleaudio', '|', 'paragraphFormat', 'paragraphStyle', '|', 'formatOL', 'formatUL', '|', 'dlehide', 'dlequote', 'dlespoiler', 'html'],

        toolbarButtonsMD: ['bold', 'italic', 'underline', 'strikeThrough', '|', 'align', 'indent', 'outdent', '|', 'subscript', 'superscript', '|', 'insertTable', 'formatOL', 'formatUL', 'insertHR', '|', 'undo', 'redo', 'dletypo', 'clearFormatting', 'selectAll', '|', 'fullscreen', '-', 
                         'fontFamily', 'fontSize', '|', 'color', 'paragraphFormat', 'paragraphStyle', '|', 'insertLink', 'dleleech', '|', 'emoticons', '{$implugin}',{$image_upload}'|', 'insertVideo', 'dleaudio', 'dlemedia' ,'|', 'dlehide', 'dlequote', 'dlespoiler','dlecode','page_dropdown', 'html'],

        toolbarButtons: ['bold', 'italic', 'underline', 'strikeThrough', '|', 'align', 'indent', 'outdent', '|', 'subscript', 'superscript', '|', 'insertTable', 'formatOL', 'formatUL', 'insertHR', '|', 'undo', 'redo', 'dletypo', 'clearFormatting', 'selectAll', '|', 'fullscreen', '-', 
                         'fontFamily', 'fontSize', '|', 'color', 'paragraphFormat', 'paragraphStyle', '|', 'insertLink', 'dleleech', '|', 'emoticons', '{$implugin}',{$image_upload}'|', 'insertVideo', 'dleaudio', 'dlemedia', '|', 'dlehide', 'dlequote', 'dlespoiler','dlecode','page_dropdown', 'html']

      }).on('froalaEditor.image.inserted froalaEditor.image.replaced', function (e, editor, \$img, response) {
	  
			if( response ) {
			
			    response = JSON.parse(response);
			  
			    \$img.removeAttr("data-returnbox").removeAttr("data-success").removeAttr("data-xfvalue").removeAttr("data-flink");

				if(response.flink) {
				  if(\$img.parent().hasClass("highslide")) {
		
					\$img.parent().attr('href', response.flink);
		
				  } else {
		
					\$img.wrap( '<a href="'+response.flink+'" class="highslide"></a>' );
					
				  }
				}
			  
			}
			
		});

});
</script>
    <div class="editor-panel"><textarea id="short_story" name="short_story" class="wysiwygeditor" style="width:98%;height:400px;">{$row['short_story']}</textarea></div>
HTML;

} else {

	if($config['bbimages_in_wysiwyg']) {
		$implugin = 'dleimage';
	} else $implugin = 'image';

	$image_upload = array();
	
	if ( $user_group[$member_id['user_group']]['allow_image_upload'] ) {

		$image_upload[0] = "dleupload ";

		$image_upload[1] = <<<HTML
function dle_image_upload_handler (blobInfo, success, failure, progress) {
  var xhr, formData;

  xhr = new XMLHttpRequest();
  xhr.withCredentials = false;
  xhr.open('POST', 'engine/ajax/controller.php?mod=upload');
  
  xhr.upload.onprogress = function (e) {
    progress(e.loaded / e.total * 100);
  };

  xhr.onload = function() {
    var json;

    if (xhr.status === 403) {
      failure('HTTP Error: ' + xhr.status, { remove: true });
      return;
    }

    if (xhr.status < 200 || xhr.status >= 300) {
      failure('HTTP Error: ' + xhr.status);
      return;
    }

    json = JSON.parse(xhr.responseText);

    if (!json || typeof json.link != 'string') {

		if(typeof json.error == 'string') {
			failure(json.error);
		} else {
			failure('Invalid JSON: ' + xhr.responseText);	
		}
		
		var editor = tinymce.activeEditor;
		var node = editor.selection.getEnd();
		editor.selection.select(node);
		editor.selection.setContent('');
		
      return;
    }

	if( json.flink ) {
		
		var editor = tinymce.activeEditor;
		var node = editor.selection.getEnd();
		editor.selection.select(node);
		editor.selection.setContent('<a href="'+json.flink+'" class="highslide"><img src="'+json.link+'" style="display: block; margin-left: auto; margin-right: auto;"></a>&nbsp;');
		editor.notificationManager.close();

	} else {
		success(json.link);
	}
	
  };

  xhr.onerror = function () {
    failure('Image upload failed due to a XHR Transport error. Code: ' + xhr.status);
  };
  	
  formData = new FormData();
  formData.append('qqfile', blobInfo.blob(), blobInfo.filename());
  formData.append("subaction", "upload");
  formData.append("news_id", "{$row['id']}");
  formData.append("area", "short_story");
  formData.append("author", "{$p_name}");
  formData.append("mode", "quickload");
  formData.append("editor_mode", "tinymce");
  formData.append("user_hash", "{$dle_login_hash}");    
  
  xhr.send(formData);
};
HTML;

		$image_upload[2] = <<<HTML
paste_data_images: true,
automatic_uploads: true,
images_upload_handler: dle_image_upload_handler,
images_reuse_filename: true,

image_uploadtab: false,
images_file_types: 'gif,jpg,png,jpeg,bmp,webp,avif',

file_picker_types: 'image',
file_picker_callback: function (cb, value, meta) {
  var input = document.createElement('input');
  input.setAttribute('type', 'file');
  input.setAttribute('accept', 'image/*');

  input.onchange = function () {
	var file = this.files[0];

	var filename = file.name;
	filename = filename.split('.').slice(0, -1).join('.');

	var reader = new FileReader();
	
	reader.onload = function () {

	  var id = filename;
	  var blobCache =  tinymce.activeEditor.editorUpload.blobCache;
	  var base64 = reader.result.split(',')[1];
	  var blobInfo = blobCache.create(id, file, base64);
	  blobCache.add(blobInfo);

	  cb(blobInfo.blobUri());
	};
	
	reader.readAsDataURL(file);
  };

  input.click();
},
HTML;
		
	} else {
		
		$image_upload[0] = "";
		$image_upload[1] = "";
		$image_upload[2] = "";
		
	}	
	
	if( $user_group[$member_id['user_group']]['allow_file_upload'] ) {
		$image_upload[0] = "dleupload ";
	}

if( @file_exists( ROOT_DIR . '/templates/'. $config['skin'].'/editor.css' ) ) {
	
	$editor_css = "templates/{$config['skin']}/editor.css";
		
} else $editor_css = "engine/editor/css/content.css";

echo <<<HTML
<script>
jQuery(function($){

	{$image_upload[1]}

	tinyMCE.baseURL = 'engine/editor/jscripts/tiny_mce';
	tinyMCE.suffix = '.min';

	if(dle_theme === null) dle_theme = '';

	tinymce.init({
		selector: 'textarea.wysiwygeditor',
		language : "{$lang['wysiwyg_language']}",
		element_format : 'html',
		body_class: dle_theme,
		skin: dle_theme == 'dle_theme_dark' ? 'oxide-dark' : 'oxide',

		width : "100%",
		height : 400,
		deprecation_warnings: false,

		plugins: ["fullscreen advlist autolink lists link image charmap anchor searchreplace visualblocks visualchars nonbreaking noneditable table paste codemirror spellchecker dlebutton codesample hr quickbars autosave wordcount pagebreak"],

		setup: function(editor) {
			editor.on('PreInit', function() {
				var shortEndedElements = editor.schema.getShortEndedElements();
				shortEndedElements['path'] = {};
				shortEndedElements['source'] = {};
				shortEndedElements['use'] = {};
			});
		},

		relative_urls : false,
		convert_urls : false,
		remove_script_host : false,
		verify_html: false,
		nonbreaking_force_tab: true,
		branding: false,
		default_link_target: '_blank',
		browser_spellcheck: true,
		pagebreak_separator: '{PAGEBREAK}',
		pagebreak_split_block: true,
		noneditable_editable_class: 'contenteditable',
		noneditable_noneditable_class: 'noncontenteditable',
		contextmenu: 'image table spellchecker lists',

		image_advtab: true,
		image_caption: true,
		{$image_upload[2]}
		
		draggable_modal: true,
		menubar: 'edit insert format table view tools',
		toolbar: 'bold italic underline strikethrough | align | bullist numlist | indent outdent | link dleleech unlink | {$implugin} {$image_upload[0]} dlemp dlaudio dletube dleemo | dle | fontformatting textformatting fullscreen code',
		toolbar_mode: 'floating',
		toolbar_groups: {
		  
		  fontformatting: {
			icon: 'change-case',
			tooltip: 'Formatting',
			items: 'formatselect fontselect fontsizeselect | forecolor backcolor'
		  },
		  
		  textformatting: {
			icon: 'edit-block',
			tooltip: 'Tools',
			items: 'searchreplace spellchecker | dletypo removeformat'
		  },
		  
		  align: {
			icon: 'align-center',
			tooltip: 'Formatting',
			items: 'alignleft aligncenter alignright alignjustify'
		  },
		  
		  dle: {
			icon: 'preview',
			tooltip: 'DLE Tags',
			items: 'dlequote dlespoiler dlehide codesample | pagebreak dlepage'
		  }
		  
		  
		},
		
		menu: {
			view: { title: 'View', items: 'restoredraft | visualaid visualchars visualblocks | fullscreen' }
		},
		removed_menuitems: 'codeformat, bold, italic, underline, strikethrough',

		quickbars_insert_toolbar: '',
		quickbars_selection_toolbar: 'bold italic underline | quicklink dlequote dlespoiler dlehide | forecolor backcolor formatselect',

		autosave_ask_before_unload: true,
		autosave_interval: '10s',
		autosave_prefix: 'dle-editor-{path}{query}-{id}-',
		autosave_restore_when_empty: false,
		autosave_retention: '10m',
  
		formats: {
		  bold: {inline: 'b'},  
		  italic: {inline: 'i'},
		  underline: {inline: 'u', exact : true},  
		  strikethrough: {inline: 's', exact : true}
		},
		
		spellchecker_language : "ru",
		spellchecker_languages : "Russian=ru,Ukrainian=uk,English=en",
		spellchecker_rpc_url : "https://speller.yandex.net/services/tinyspell",
		
		dle_root : "",
		dle_upload_area : "short_story",
		dle_upload_user : "{$p_name}",
		dle_upload_news : "{$row['id']}",

		content_css : "{$editor_css}"

	});

});
</script>

    <div class="editor-panel"><textarea id="short_story" name="short_story" class="wysiwygeditor" style="width:98%;height:300px;">{$row['short_story']}</textarea></div>
HTML;

}

?>

celsoft · 29 июля 2022

Все в принципе неправильно. Нужно один параметр добавить у уже ко всем другим параметрам уже имеющегося редактора, а вы зачем то непонятный вызов нового редактора написали, причем совершенно неверно.

После строчки

image_caption: true,

добавьте

image_dimensions: false,

Все. А все остальные свои правки и добавления уберите.

ntrtv · 30 июля 2022

Спасибо, работает. Тоже с такой проблемой столкнулись.

celsoft · 30 июля 2022

Да, раньше нельзя было просто так убрать размеры, не порезав функциональность. Насколько я помню раньше если убрать размеры нельзя было изменить потом размеры картинки в том же редакторе, двигая саму картинку, теперь по сути вся функциональность сохраняется, поэтому эта опция пойдет также в DLE в следующих версиях.

Редактирование свойст изображения

Рекомендованные сообщения

Rawreso 2

Ссылка на сообщение

Поделиться на других сайтах

celsoft 6 090

Ссылка на сообщение

Поделиться на других сайтах

Rawreso 2

Ссылка на сообщение

Поделиться на других сайтах

celsoft 6 090

Ссылка на сообщение

Поделиться на других сайтах

Rawreso 2

Ссылка на сообщение

Поделиться на других сайтах

celsoft 6 090

Ссылка на сообщение

Поделиться на других сайтах

Rawreso 2

Ссылка на сообщение

Поделиться на других сайтах

master27 38

Ссылка на сообщение

Поделиться на других сайтах

celsoft 6 090

Ссылка на сообщение

Поделиться на других сайтах

Rawreso 2

Ссылка на сообщение

Поделиться на других сайтах

Rawreso 2

Ссылка на сообщение

Поделиться на других сайтах

celsoft 6 090

Ссылка на сообщение

Поделиться на других сайтах

Rawreso 2

Ссылка на сообщение

Поделиться на других сайтах

celsoft 6 090

Ссылка на сообщение

Поделиться на других сайтах

Rawreso 2

Ссылка на сообщение

Поделиться на других сайтах

celsoft 6 090

Ссылка на сообщение

Поделиться на других сайтах

ntrtv 55

Ссылка на сообщение

Поделиться на других сайтах

celsoft 6 090

Ссылка на сообщение

Поделиться на других сайтах

Присоединяйтесь к обсуждению