0

I'm using summernote as text editor and when I add an image it adds to it the text style= "width: ***px;" (the * are numbers). This causes problems when I change the window size. I want to replace width: ***px for 100% using PHP. Is there any wildcard I can use with str_ireplace?

for ex add the image car.jpg summernote adds it like:

<img src="/images/car.jpg" style= "width:750px;">

what i want:

<img src="/images/car.jpg" style= "width:100%;">

or just remove all the style part.

user3783243
  • 5,368
  • 5
  • 22
  • 41
Jose Joseles
  • 11
  • 1
    If you add `img { width: 100%; height: auto; }` in your css stylesheet, then this will overrule the `` . Another way is gving `img { display: block; height: auto; }` in your css stylesheet. – bron Dec 13 '20 at 15:57
  • Or, in php, use `preg_replace('/(?:img.*)(width|height ?= ?['"].*['"])/', "", $your_html);` to remove width and heidht completely from img elements. – bron Dec 13 '20 at 16:05
  • Summernote is Javascript, and you can't do anything to its output in PHP. I suspect the question you want to ask is how to specify an image height. When you ask that question, please include the Javascript code, not the generated HTML. – miken32 Dec 13 '20 at 18:41
  • @miken32 If output is stored PHP can be used on it. – user3783243 Dec 14 '20 at 12:59
  • @user3783243 the "output" is on the client web browser. PHP runs on the server. – miken32 Dec 14 '20 at 17:11
  • @miken32 It is a WYSIWYG so it just converts input to HTML. That HTML can be sent anywhere, and likely is part of a CMS sending it to a DB. Same as `TinyMCE`, `nicedit`, `ckeditor`, etc. PHP can be used to fix it. Likely JS configuration should just be modified though. https://github.com/summernote/summernote/issues/1241 might be a related thread. – user3783243 Dec 15 '20 at 03:27

1 Answers1

-1

\d+ is any number, (presuming decimals aren't used) use that with preg_replace,

The str_ireplace can't take wildcards. The i modifier can be used to ignore case sensitivity in regexs.

So regex for preg_replace would be:

style= "width: \d+px;"

if spacing varies you could use:

style=\h*"width:\h*\d+px;"

or

style=\h*("|\')width:\h*\d+px;\1

if quoting also can vary.

preg_replace('/style=\h*("|\')width:\h*\d+px;\1/i', 'style= "width:100%;"', '<img src="/images/car.jpg" style= "width:750px;">');

() is a grouping, it is the first group, and is accessible in regex as a backreference (\1). The \h is a horizontal whitespace (tab or space). The * is a quantifier meaning 0 or more of the character. The + is another quantifier meaning one or more.

So \h*\d+ says there can be any amount of spaces before a number, but a number must be present.

This presumes your with values are always a whole number and pixels. Varying groupings will be needed if units vary or decimals/percents are allowed.

user3783243
  • 5,368
  • 5
  • 22
  • 41
  • thank you very much,ill try that, im having some troubles to understand regex but ill keep reading about it – Jose Joseles Dec 13 '20 at 15:48
  • Any particular part? You can use regex101.com to see how parts are being processed. Here's the first example, https://regex101.com/r/FLsOfX/1/ – user3783243 Dec 13 '20 at 15:50