Fixed img tag in editor + tpl mediamanager

admin/panels/entry/admin.entry.write.tpl

@@ -51,6 +51,7 @@
 						<script src="{$smarty.const.BLOG_BASEURL}/admin/res/sceditor/formats/bbcode.js"></script>
 						<script src="{$smarty.const.BLOG_BASEURL}/fp-interface/lang/{$lang_locale}/sceditor.js"></script>
 						<script src="{$smarty.const.BLOG_BASEURL}/admin/res/sceditor/plugins/flatPressFileManager.js"></script>
+						<script src="{$smarty.const.BLOG_BASEURL}/admin/res/sceditor/plugins/flatPressCustomBBCodes.js"></script>
 						<script>
 						// Replace the textarea #example with SCEditor
 						var lang_editor = "{$lang_locale}";

admin/panels/static/admin.static.write.tpl

@@ -42,6 +42,8 @@
 						-->
 						<script src="{$smarty.const.BLOG_BASEURL}/admin/res/sceditor/formats/bbcode.js"></script>
 						<script src="{$smarty.const.BLOG_BASEURL}/fp-interface/lang/{$lang_locale}/sceditor.js"></script>
+						<script src="{$smarty.const.BLOG_BASEURL}/admin/res/sceditor/plugins/flatPressFileManager.js"></script>
+						<script src="{$smarty.const.BLOG_BASEURL}/admin/res/sceditor/plugins/flatPressCustomBBCodes.js"></script>
 						<script>
 						// Replace the textarea #example with SCEditor
 						var lang_editor = "{$lang_locale}";
@@ -50,11 +52,12 @@
 						{literal}
 						var textarea = document.getElementById('content_textarea');
 						sceditor.create(textarea, {
+							plugins: 'flatPressFileManager',
+							toolbar: 'bold,italic,underline,strike,subscript,superscript|left,center,right,justify|font,size,color,removeformat|cut,copy,pastetext|bulletlist,orderedlist,indent,outdent|table|code,quote|horizontalrule,flatPressFileManager,email,link,unlink|emoticon,youtube,date,time|ltr,rtl|print,maximize,source',
 							emoticonsRoot: eRoot,
 							format: 'bbcode',
 							height: "400px",
 							locale: lang_editor
-							//style: '../../res/sceditor/themes/content/default.min.css'
 						});
 						</script>
 						{/literal}
@@ -87,7 +90,7 @@
 
 <!-- Bootstrap Modal (Open the editor) -->
 <div class="modal fade" id="flatpress-files-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
-  <div class="modal-dialog" role="document">
+  <div class="modal-dialog modal-lg" role="document">
     <div class="modal-content">
       <div class="modal-header">
         <h5 class="modal-title" id="exampleModalLabel">File Manager</h5>
@@ -96,7 +99,23 @@
         </button>
       </div>
       <div class="modal-body">
-        NOT WORKING YEY :(
+	  	<div class="row">
+		  <div class="col-12" id="currentDirectory">
+		  	<input class="form-control mw-100" id="directoryInput" readonly>
+		  </div>
+		</div>
+	  	<div class="row visualizator">
+		  <div class="p-2 col-6 h-100">
+		  	<div class="flatpress-files-modal-box h-100 p-3" id="mediaDirectory"></div>
+		  </div>
+		  <div class="p-2 col-6 h-100">
+			<div class="flatpress-files-modal-box h-100" id="mediaPreview"></div>
+		  </div>
+		</div>
+      </div>
+	  <div class="modal-footer">
+	  	<div class="w-100 text-center" id="FilesModalFooter">
+		</div>
       </div>
     </div>
   </div>

admin/res/sceditor/plugins/flatPressCustomBBCodes.js

@@ -0,0 +1,70 @@
+/* Include a headers and IMG fix */
+
+// IMG copied and modified from format/bbcode.js
+sceditor.formats.bbcode.set('img', {
+    allowsEmpty: true,
+    tags: {
+        img: {
+            src: null
+        }
+    },
+    allowedChildren: ['#'],
+    quoteType: sceditor.BBCodeParser.QuoteType.never,
+    format: function (element, content) {
+        var	width, height,
+            attribs   = '',
+            style     = function (name) {
+                return element.style ? element.style[name] : null;
+            };
+
+        const EMOTICON_DATA_ATTR = 'data-sceditor-emoticon';
+
+        // check if this is an emoticon image
+        if (sceditor.dom.attr(element, EMOTICON_DATA_ATTR)) {
+            return content;
+        }
+
+        width = sceditor.dom.attr(element, 'width') || style('width');
+        height = sceditor.dom.attr(element, 'height') || style('height');
+
+        // only add width and height if one is specified
+        if ((element.complete && (width || height)) ||
+            (width && height)) {
+
+            attribs = '=' + sceditor.dom.width(element) + 'x' +
+                sceditor.dom.height(element);
+        }
+
+        return '[img=' + sceditor.dom.attr(element, 'src') + '' + attribs + ']' + '[/img]';
+    },
+    html: function (token, attrs, content) {
+        var	undef, width, height, match,
+            attribs = '';
+
+        // handle [img width=340 height=240]url[/img]
+        width  = attrs.width;
+        height = attrs.height;
+
+        // handle [img=340x240]url[/img]
+        if (attrs.defaultattr) {
+            match = attrs.defaultattr.split(/x/i);
+
+            width  = match[0];
+            height = (match.length === 2 ? match[1] : match[0]);
+        }
+
+        if (width !== undef) {
+            attribs += ' width="' + sceditor.escapeEntities(width, true) + '"';
+        }
+
+        if (height !== undef) {
+            attribs += ' height="' + sceditor.escapeEntities(height, true) + '"';
+        }
+
+        if(/^images/.test(content)) { // Fix small bug with fp-content directory
+            return '<img' + attribs + ' src="fp-content/' + sceditor.escapeUriScheme(content) + '" />';
+        } else {
+            return '<img' + attribs + ' src="' + sceditor.escapeUriScheme(content) + '" />';
+        }
+    }
+});

fp-plugins/mediamanager/res/style.css

@@ -1,18 +1,22 @@
 .type-attachs a {
     padding-left: 25px;
-    background-image: url('unknown.gif');
+    background-image: url('unknown.png');
     background-repeat: no-repeat;
     background-position: left center;
 }
 .type-images a {
     padding-left: 25px;
-    background-image: url('image2.gif');
+    background-image: url('image.png');
     background-repeat: no-repeat;
     background-position: left center;
 }
 .type-gallery a {
     padding-left: 25px;
-    background-image: url('folder.gif');
+    background-image: url('folder.png');
     background-repeat: no-repeat;
     background-position: left center;
 }
+
+.btn {
+    margin-bottom: 0.2rem !important;
+}

fp-plugins/mediamanager/tpls/admin.plugin.mediamanager.files.tpl

@@ -1,112 +1,134 @@
 <link rel="stylesheet" type="text/css" href="{$mmurl}res/style.css" />
-<h2>{$plang.head}</h2>
+
-<p>{$plang.description}</p>
 {include file=shared:errorlist.tpl}
 
 {html_form class=option-set}
-{$plang.page}: {$paginator.current} /  {$paginator.total}</br>
-{if $currentgallery!=""}<h3>gallery '{$currentgallery}'</h3>{/if}
-<table class="entrylist">
-	<thead>
-		<colgroup><col/><col width="50%"/><col/><col/><col/></colgroup>
-		<tr>
-		    <th>&nbsp;</th>
-		    <th>{$plang.colname}</th>
-			<th>{$plang.colusecount}</th>
-			<th>{$plang.colsize}</th>
-			<th>{$plang.colmtime}</th>
-			<th>&nbsp;</th>
-		</tr>
-	</thead>
-	<tbody>
-{if $currentgallery!=""}
-    <tr><td>&nbsp;</td>
-		<td class="main-cell type-gallery" colspan="5">
-			<a class="link-general" href="admin.php?p=uploader&action=mediamanager">{$plang.up}</a>
-		</td>
-	</tr>
-{else}
-	{foreach from=$galleries item=v}
-		<tr>
-			<td>
-				&nbsp;
-			</td>
-			<td class="main-cell type-{$v.type}">
-				<a class="link-general" href="admin.php?p=uploader&action=mediamanager&gallery={$v.name}">{$v.name}</a>
-			</td>
-			<td>{if $v.usecount>0}
-				<a class="link-general" href="search.php?q=images%2F{$v.name}&stype=full&Date_Day=&Date_Month=&Date_Year=&submit=Search">{$v.usecount}</a>
-				{else}
-				0
-				{/if}
-			</td>
-			<td>{$v.size}</td>
-			<td>{$v.mtime}</td>
-			<td>
-				<a class="link-delete" href="{$mmbaseurl}&deletefile={$v.type}-{$v.name}">{$plang.delete}</a>
-			</td>
-		</tr>
-	{/foreach}
-{/if}
-{if $totalfilescount=="0" }
-	<tr><td colspan="6"><br>{$plang.nofiles} <a class="link-general" href="admin.php?p=uploader&action=default">{$plang.loadfile}</a><br><br></td></tr>
-{else}
-	{foreach from=$files item=v}
-		<tr>
-			<td>
-				{if $v.type=='images'}
-					<input type='checkbox' name='file[{$v.type}-{$v.name}]'>
-				{else}
-					&nbsp;
-				{/if}
-			</td>
-			<td class="main-cell type-{$v.type}"><a class="link-general" {if $v.type=='images'}rel="lightbox[mm]"{/if} href="{$v.url}">{$v.name}</a></td>
-			<td>{if $v.usecount>0}
-				<a class="link-general" href="search.php?q={$v.type}%2F{$v.name}&stype=full&Date_Day=&Date_Month=&Date_Year=&submit=Search">{$v.usecount}</a>
-				{else}
-				0
-				{/if}
-			</td>
-			<td>{$v.size}</td>
-			<td>{$v.mtime}</td>
-			<td>
-				<a class="link-delete" href="{$mmbaseurl}&deletefile={$v.type}-{$v.name}">{$plang.delete}</a>
-			</td>
-		</tr>
-	{/foreach}
-{/if}
-	</tbody>
-</table>
 
-<!-- paginator -->
+<div class="row">
-<p class="paginator">
+		<div class="col-xl-12 col-lg-12">
-	{foreach name=pagelist from=$paginator.pages item=page}
+			<div class="card shadow mb-4">
-		{if $paginator.current==$page}
+				<div class="card-header">
-			{$page}
+					<h6 class="m-0 font-weight-bold text-primary">{$plang.head} {if $currentgallery!=""}<span class="ti-angle-double-right"></span> gallery '{$currentgallery}'{/if}</h6>
-		{else}
+				</div>
-			<a href="{$mmbaseurl}&page={$page}">{$page}</a>
+				<div class="card-body">
-		{/if}
+					<div class="table-responsive table-striped">
-		{if $smarty.foreach.pagelist.last==false} - {/if}
+						<table class="entrylist table">
-	{/foreach}
+							<thead>
-</p>
+								<colgroup><col/><col width="50%"/><col/><col/><col/></colgroup>
-	
+								<tr class="head_table" style="background-color:#aa4142; color:#fff">
+									<th>&nbsp;</th>
+									<th>{$plang.colname}</th>
+									<th>{$plang.colusecount}</th>
+									<th>{$plang.colsize}</th>
+									<th>{$plang.colmtime}</th>
+									<th>&nbsp;</th>
+								</tr>
+							</thead>
+							<tbody>
+						{if $currentgallery!=""}
+							<tr><td>&nbsp;</td>
+								<td class="main-cell type-gallery" colspan="5">
+									<a class="link-general" href="admin.php?p=uploader&action=mediamanager">{$plang.up}</a>
+								</td>
+							</tr>
+						{else}
+							{foreach from=$galleries item=v}
+								<tr>
+									<td>&nbsp;
 
-<p>
+									</td>
-    {$plang.selected}:
+									<td class="main-cell type-{$v.type}">
-    <select name='action'>
+										<a class="link-general" href="admin.php?p=uploader&action=mediamanager&gallery={$v.name}">{$v.name}</a>
-        <option value='-'>{$plang.selectaction}</option>
+									</td>
-        <{foreach from=$dwgalleries item=v}
+									<td>{if $v.usecount>0}
-            <option value='atg-{$v.name}'>{$plang.addtogallery} '{$v.name}'</option>
+										<a class="link-general" href="search.php?q=images%2F{$v.name}&stype=full&Date_Day=&Date_Month=&Date_Year=&submit=Search">{$v.usecount}</a>
-        {/foreach}
+										{else}
-    </select>
+										0
-	<input type="submit" name="mm-addto" value="{$plang.go}"/>
+										{/if}
-</p>
+									</td>
-<p>
+									<td>{$v.size}</td>
-	<label>{$plang.newgallery}:
+									<td>{$v.mtime}</td>
-	<input type="text" name="mm-newgallery-name" />
+									<td>
-	</label>
+										<a class="link-delete" href="{$mmbaseurl}&deletefile={$v.type}-{$v.name}">
-	<input type="submit" name="mm-newgallery" value="{$plang.add}"/>
+										<span class="ti-trash"></span> {$plang.delete}</a>
-</p>
+									</td>
+								</tr>
+							{/foreach}
+						{/if}
+						{if $totalfilescount=="0" }
+							<tr><td colspan="6"><br>{$plang.nofiles} <a class="link-general" href="admin.php?p=uploader&action=default">{$plang.loadfile}</a><br><br></td></tr>
+						{else}
+							{foreach from=$files item=v}
+								<tr>
+									<td>
+										{if $v.type=='images'}
+											<input type='checkbox' class='mt-1' name='file[{$v.type}-{$v.name}]'>
+										{else}
+											&nbsp;
+										{/if}
+									</td>
+									<td class="main-cell type-{$v.type}"><a class="link-general" {if $v.type=='images'}rel="lightbox[mm]"{/if} href="{$v.url}">{$v.name}</a></td>
+									<td>{if $v.usecount>0}
+										<a class="link-general" href="search.php?q={$v.type}%2F{$v.name}&stype=full&Date_Day=&Date_Month=&Date_Year=&submit=Search">{$v.usecount}</a>
+										{else}
+										0
+										{/if}
+									</td>
+									<td>{$v.size}</td>
+									<td>{$v.mtime}</td>
+									<td>
+										<a class="link-delete" href="{$mmbaseurl}&deletefile={$v.type}-{$v.name}"><span class="ti-trash"></span> {$plang.delete}</a>
+									</td>
+								</tr>
+							{/foreach}
+						{/if}
+							</tbody>
+						</table>
+					</div>
+					<!-- paginator -->
+						<p class="paginator">
+							  <div class="paginator-left">
+								{$plang.page}: {$paginator.current} /  {$paginator.total}</br>
+							  </div>
+							  <div class="paginator-right">
+								  <ul class="pagination pagination-sm">
+									{foreach name=pagelist from=$paginator.pages item=page}
+									{if $paginator.current==$page}
+									<li class="page-item disabled">
+									  <a class="page-link" href="#" tabindex="-1">{$page}</a>
+									</li>
+									 {else}
+									<li class="page-item"><a class="page-link" href="{$mmbaseurl}&page={$page}">{$page}</a></li>
+									{/if}
+										<!-- {if $smarty.foreach.pagelist.last==false} - {/if} -->
+									{/foreach}
+								  </ul>
+							  </div>
+						</p>
+						</br>
+						</br>
+						<p>	
+							<label>
+							{$plang.selected}:
+							<select name='action' class="form-control gallery_select">
+								<option value='-'>{$plang.selectaction}</option>
+								<{foreach from=$dwgalleries item=v}
+									<option value='atg-{$v.name}'>{$plang.addtogallery} '{$v.name}'</option>
+								{/foreach}
+							</select>
+							</label>
+							<input type="submit" name="mm-addto" class="btn btn-primary" value="{$plang.go}" style="margin-bottom:0.2rem"/>
+						</p>
+						<p>
+							<label>{$plang.newgallery}:
+							<input type="text" name="mm-newgallery-name" class="form-control input_gray"/>
+							</label>
+							<input type="submit" name="mm-newgallery" class="btn btn-primary" value="{$plang.add}" style="margin-bottom:0.2rem"/>
+						</p>
+				</div>
+			</div>
+		</div>
+	</div>
 
 {/html_form}