Перейти к публикации

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

Rawreso

Автор: Rawreso,
в Прием багов

 Рассказать Подписчики 1

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

Rawreso

Rawreso 2

Опубликовано:
Опубликовано:

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

  Показать содержимое

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

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

 

  • Поддерживаю 1
Ссылка на сообщение
Поделиться на других сайтах
celsoft

celsoft 6 168

Опубликовано:
Опубликовано:

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

Ссылка на сообщение
Поделиться на других сайтах
Rawreso

Rawreso 2

Опубликовано:
Опубликовано: Автор
  29.07.2022 в 11:41, celsoft сказал:

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

Расширить  

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

Это ошибка?

Ссылка на сообщение
Поделиться на других сайтах
celsoft

celsoft 6 168

Опубликовано:
Опубликовано:
  29.07.2022 в 11:44, Rawreso сказал:

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

Расширить  

Никак.

  29.07.2022 в 11:44, Rawreso сказал:

Это ошибка?

Расширить  

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

Ссылка на сообщение
Поделиться на других сайтах
Rawreso

Rawreso 2

Опубликовано:
Опубликовано: Автор

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

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

Ссылка на сообщение
Поделиться на других сайтах
celsoft

celsoft 6 168

Опубликовано:
Опубликовано:
  29.07.2022 в 11:52, Rawreso сказал:

Серьёзно?

Расширить  

Очень даже

  29.07.2022 в 11:52, Rawreso сказал:

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

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

Расширить  

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

Ссылка на сообщение
Поделиться на других сайтах
celsoft

celsoft 6 168

Опубликовано:
Опубликовано:

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

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

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

Ссылка на сообщение
Поделиться на других сайтах
Rawreso

Rawreso 2

Опубликовано:
Опубликовано: Автор
  29.07.2022 в 12:03, master27 сказал:

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

Расширить  

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

  29.07.2022 в 12:04, celsoft сказал:

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

Расширить  

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

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

wz00pml3zrp00an94vib.jpg

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

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

 

Ссылка на сообщение
Поделиться на других сайтах
Rawreso

Rawreso 2

Опубликовано:
Опубликовано: Автор

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

shortnews.php

  Показать содержимое

 

Ссылка на сообщение
Поделиться на других сайтах
celsoft

celsoft 6 168

Опубликовано:
Опубликовано:

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

image_dimensions: false,

 

Ссылка на сообщение
Поделиться на других сайтах
Rawreso

Rawreso 2

Опубликовано:
Опубликовано: Автор
  29.07.2022 в 14:04, celsoft сказал:

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

Расширить  

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

  29.07.2022 в 14:04, celsoft сказал:

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

Расширить  

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

Ссылка на сообщение
Поделиться на других сайтах
celsoft

celsoft 6 168

Опубликовано:
Опубликовано:
  29.07.2022 в 14:25, Rawreso сказал:

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

Расширить  

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

  29.07.2022 в 14:25, Rawreso сказал:

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

Расширить  

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

Ссылка на сообщение
Поделиться на других сайтах
Rawreso

Rawreso 2

Опубликовано:
Опубликовано: Автор
  29.07.2022 в 16:03, 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

celsoft 6 168

Опубликовано:
Опубликовано:

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

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

image_caption: true,

добавьте  

image_dimensions: false,

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

  • Спасибо 1
Ссылка на сообщение
Поделиться на других сайтах
celsoft

celsoft 6 168

Опубликовано:
Опубликовано:

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

Ссылка на сообщение
Поделиться на других сайтах

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

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

Гость
Ответить в тему...

×   Вставлено в виде отформатированного текста.   Вставить в виде обычного текста

  Разрешено не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отобразить как ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставить изображения напрямую. Загрузите или вставьте изображения по ссылке.

×
 Рассказать
Подписчики 1
Перейти к списку тем
×
×
  • Создать...