From 0d963eaff56d032c4e42f9303903151a796ab709 Mon Sep 17 00:00:00 2001 From: Cameron Date: Thu, 28 Feb 2013 03:38:50 -0800 Subject: [PATCH] TinyMce fixes and support for raw html or bbcodes. (depending on Html posting preference) --- e107_admin/image.php | 13 +- e107_core/bbcodes/bb_img.php | 121 +++++++++++++----- e107_handlers/bbcode_handler.php | 96 ++++++++++++-- e107_handlers/e_parse_class.php | 6 +- e107_handlers/media_class.php | 18 ++- .../tinymce/plugins/e107bbcode/parser.php | 68 ++++++++-- e107_plugins/tinymce/wysiwyg.php | 6 +- e107_web/js/core/mediaManager.js | 61 +++++---- 8 files changed, 294 insertions(+), 95 deletions(-) diff --git a/e107_admin/image.php b/e107_admin/image.php index a5a8619f9..dc8c48762 100644 --- a/e107_admin/image.php +++ b/e107_admin/image.php @@ -1091,10 +1091,15 @@ class media_admin_ui extends e_admin_ui "; // TODO to eventually be hidden. - $text .= "bbcode: - - - + + $type = (E107_DEBUG_LEVEL > 0) ? "text" : "hidden"; + $br = (E107_DEBUG_LEVEL > 0) ? "
" : ""; + + $text .= " + ".$br." + ".$br." + ".$br." + ".$br." "; } diff --git a/e107_core/bbcodes/bb_img.php b/e107_core/bbcodes/bb_img.php index d95f42d02..e7697305f 100644 --- a/e107_core/bbcodes/bb_img.php +++ b/e107_core/bbcodes/bb_img.php @@ -3,7 +3,7 @@ // General purpose image bbcode. As well as the obvious insertion of a picture: // a) if filname begins with 'th_' or 'thumb_', creates link to main image opening in new window -// b) If filename contains '*', treats it as a wildcard, and displays a random image from all matching file names found +// b) If filename contains '*', treats it as a wildcard, and displays a random image from all matching file names found ? really? // // Can use simple classes for float - e.g.: // .floatleft {clear: right; float: left; margin: 0px 5px 5px 0px; padding:2px; border: 0px;} @@ -30,22 +30,94 @@ class bb_img extends e_bb_base return '[img]'.$code_text.'[/img]'; } + /** + * Media Manager bbcode. eg. using {e_MEDIA_IMAGE} and auto-resizing. + * @return tag with resized image. + */ + private function mediaImage($code_text,$parm) + { + $tp = e107::getParser(); + + $code_text = str_replace('{e_MEDIA_IMAGE}', e_HTTP."thumb.php?src={e_MEDIA_IMAGE}", $code_text); + $imgParms = $this->processParm($code_text, $parm); + + foreach($imgParms as $k => $v) + { + // $parmStr .= " ".$k.'="'.$v.'"'; + $p[] = $tp->toAttribute($k).'="'.$tp->toAttribute($v).'"'; + } + + + $w = e107::getBB()->resizeWidth(); // varies depending on the class set by external script. see admin->media-manager->prefs + + + $w = vartrue($imgParms['width']) ? intval($imgParms['width']) : vartrue(e107::getBB()->resizeWidth(),300); + // $h = vartrue($imgParms['height']) ? intval($imgParms['height']) : e107::getBB()->resizeHeight(); + + $resize = "&w=".$w; // Always resize - otherwise the thumbnailer returns nothing. + $parmStr = implode(" ",$p); + + // print_a($imgParms); + // print_a($parmStr); + + return ""; + } + + /** + * Process the [img] bbcode parm. ie. [img parms]something[/img] + */ + private function processParm($code_text, $parm) + { + $tp = e107::getParser(); + + $imgParms = array(); + $parmStr = ""; + + $parm = preg_replace('#onerror *=#i','',$parm); + $parm = str_replace("amp;", "&", $parm); + + // $parm = str_replace(" ","&",$parm); // Needed as parse_str() doesn't know how to handle spaces. Could return [width] => '400 AltValue' + + parse_str($parm,$imgParms); + + foreach($tmp as $p => $v) + { + // $imgParms[$p]=$v; + } + + if(!vartrue($imgParms['alt'])) // Generate an Alt value from filename if one not found. + { + preg_match("/([\w]*)(?:\.png|\.jpg|\.jpeg|\.gif)/i", $code_text, $match); // Generate required Alt attribute. + $imgParms['alt'] = ucwords(str_replace("_"," ",$match[1])); + } + + $imgParms['class'] = "bbcode ".e107::getBB()->getClass('img');; // This will be overridden if a new class is specified + + return $imgParms; + } + function toHTML($code_text, $parm) - { + { + $tp = e107::getParser(); - $pref = e107::getPref(); - - $class = e107::getBB()->getClass('img'); - + $pref = e107::getPref(); - - if (trim($code_text) == "") return ""; // Do nothing on empty file - if (preg_match("#\.php\?.*#",$code_text)){return "";} + if (trim($code_text) == "") return ""; // Do nothing on empty file + + if(substr($code_text,0,15) == '{e_MEDIA_IMAGE}') // Image from Media-Manager. + { + return $this->mediaImage($code_text, $parm); + } + + + + + if (preg_match("#\.php\?.*#",$code_text)){return "";} //XXX Breaks MediaManager Images, so do it after mediaManager check. $addlink = FALSE; - - + + // Automatic Img Resizing -- $w = e107::getBB()->resizeWidth(); // varies depending on the class set by external script. see admin->media-manager->prefs $h = e107::getBB()->resizeHeight(); @@ -57,39 +129,20 @@ class bb_img extends e_bb_base } // ------------------------ - - - $search = array('"', '{E_IMAGE}', '{E_FILE}', '{e_IMAGE}', '{e_FILE}'); $replace = array(''', e_IMAGE_ABS, e_FILE_ABS, e_IMAGE_ABS, e_FILE_ABS); $replaceInt = array(''', e_IMAGE, e_FILE, e_IMAGE, e_FILE); $intName = str_replace($search, $replaceInt, $code_text); // Server-relative file names - unset($imgParms); - $imgParms['class']="bbcode {$class}"; // This will be overridden if a new class is specified - - $imgParms['alt']=''; + $code_text = str_replace($search, $replace, $code_text); $code_text = $tp -> toAttribute($code_text); + $img_file = pathinfo($code_text); // 'External' file name. N.B. - might still contain a constant such as e_IMAGE - if($parm) - { - $parm = preg_replace('#onerror *=#i','',$parm); - $parm = str_replace("amp;", "&", $parm); - parse_str($parm,$tmp); - foreach($tmp as $p => $v) - { - $imgParms[$p]=$v; - } - } - $parmStr=""; - foreach($imgParms as $k => $v) - { - $parmStr .= $tp -> toAttribute($k)."='".$tp -> toAttribute($v)."' "; - } - + $parmStr = $this->processParm($code_text, $parm); + // Select a random file if required if (strpos($img_file['basename'],'*') !== FALSE) diff --git a/e107_handlers/bbcode_handler.php b/e107_handlers/bbcode_handler.php index ec2495f38..4d6edd153 100644 --- a/e107_handlers/bbcode_handler.php +++ b/e107_handlers/bbcode_handler.php @@ -538,25 +538,104 @@ class e_bbcode return "
".$tp->parseTemplate($BBCODE_TEMPLATE,TRUE)."
"; } + + + function processTag($tag, $html) + { + $html = "".$html.""; + $doc = new DOMDocument(); + $doc->loadHTML($html); + + $tmp = $doc->getElementsByTagName($tag); + + $var = array(); + + $attributes = array('class','style','width','height','src','alt','href'); + + $params = array( + 'img' => array('style','width','height','alt') + ); + + // Generate array for $var ($code_text) & $params ($parm); + foreach ($tmp as $tg) + { + $var = array(); + $parm = array(); + + foreach($attributes as $att) + { + $v = (string) $tg->getAttribute($att); + + if(trim($v) != '') + { + $var[$att] = $v; + if(in_array($att, $params[$tag])) + { + $parm[$att] = $att."=".str_replace(" ","",$var[$att]); + } + } + } + + $inc = ($parm) ? " ".implode("&",$parm) : ""; // the parm - eg. [img $parm]whatever[/img] + + switch ($tag) + { + case 'img': + + $e_http = str_replace("/",'\/',e_HTTP); + $regex = "/".$e_http."thumb.php\?src=[^>]*({e_MEDIA_IMAGE}[^&]*)(.*)/i"; + // echo "REGEX = ".$regex; + $code_text = preg_replace($regex,"$1",$var['src']); + $code_reg = str_replace("/","\/",$code_text); + + + $search = '/]*)'.$code_reg.'([^>]*)>/i'; // Must match the specific line - not just the tag. + $replace = "[img{$inc}]".$code_text."[/img]"; // bbcode replacement. + break; + + default: + echo "TAG = ".$tag; + break; + } + + $html = preg_replace($search,$replace,$html); + } + + return str_replace(array("",""),"",$html); + } + + + /** * Convert HTML to bbcode. */ function htmltoBBcode($text) { + + $text = str_replace("","[html]",$text); $text = str_replace("","[/html]",$text); // $text = str_replace('',"[newpage=]",$text); - + + if(substr($text,0,6)=='[html]') { return $text; } - + + + + $text = $this->processTag('img', $text); + + + // Youtube conversion (TinyMce) // return $text; + // $text = preg_replace('//i',"[img style=width:$4px;height:$5px; alt=$8]$3[/img]",$text ); + $text = preg_replace('/([^/i',"[youtube=$1]$4[/youtube]",$text); $text = preg_replace('/([^!]*)/i','[youtube=$1]$2[/youtube]',$text); @@ -565,8 +644,8 @@ class e_bbcode $text = preg_replace("/(.*?)<\/a>/i","[link=$1]$2[/link]",$text); $text = preg_replace('/
([\s\S]*)<\/div>/i',"[$1]$2[/$1]",$text); // verified $text = preg_replace('/
([\s\S]*)<\/div>/i',"[$1]$2[/$1]",$text); // left / right / center - $text = preg_replace('//i',"[img style=width:$4px;height:$5px;$1]$2[/img]",$text ); - $text = preg_replace('//i',"[img style=width:$4px;height:$5px;$1]$2[/img]",$text ); + // $text = preg_replace('//i',"[img style=width:$4px;height:$5px;$1]$2[/img]",$text ); + // $text = preg_replace('//i',"[img style=width:$4px;height:$5px;$1]$2[/img]",$text ); // $text = preg_replace('/(.*?)<\/span>/i',"[color=$1]$2[/color]",$text); $text = preg_replace('//i', "[table $1]",$text); @@ -586,10 +665,9 @@ class e_bbcode $text = preg_replace('/replaceConstants($url,'abs'); + //$url = $this->replaceConstants($url,'abs'); } if(!is_array($options)) @@ -1823,7 +1823,7 @@ class e_parse if($raw) $url = $this->createConstants($url, 'mix'); $baseurl = ($full ? SITEURL : e_HTTP).'thumb.php?'; - + $thurl = 'src='.$url.'&'; if(vartrue($options['aw']) || vartrue($options['ah'])) diff --git a/e107_handlers/media_class.php b/e107_handlers/media_class.php index f0ca96b88..c01a02bac 100644 --- a/e107_handlers/media_class.php +++ b/e107_handlers/media_class.php @@ -568,23 +568,31 @@ class e_media $w = false; $h = false; - if($bbcode) + if($bbcode) // ie. TinyMce Editor, not imagepicker(); { e107::getBB()->setClass($category); $w = e107::getBB()->resizeWidth(); // resize the image according to prefs. $h = e107::getBB()->resizeHeight(); - e107::getBB()->clearclass(); + e107::getBB()->clearclass(); + + $w = vartrue($w,300); + $h = vartrue($w,200); } $tp = e107::getParser(); - // e107::getParser() + + /* + $media_path : Inserted into html tags eg. thumbUrl($im['media_url'], "w={$w}&h={$h}") : $tp->replaceConstants($im['media_url'],'full'); // max-size + $media_path = ($w || $h) ? $tp->thumbUrl($im['media_url'], "&w={$w}") : $tp->thumbUrl($im['media_url']); // $tp->replaceConstants($im['media_url'],'full'); // max-size $realPath = $tp->thumbUrl($im['media_url'], $att); $diz = $tp->toAttribute($im['media_title'])."\n".$im['media_dimensions']; @@ -615,7 +623,7 @@ class e_media $img_url = ($cat !='_icon') ? e107::getParser()->thumbUrl($im['media_url'], $att) : $media_path; - $text .= ""; + $text .= ""; $text .= "\"".$im['media_title']."\""; $text .= "\n\n"; } diff --git a/e107_plugins/tinymce/plugins/e107bbcode/parser.php b/e107_plugins/tinymce/plugins/e107bbcode/parser.php index f480454e7..5f00defa2 100644 --- a/e107_plugins/tinymce/plugins/e107bbcode/parser.php +++ b/e107_plugins/tinymce/plugins/e107bbcode/parser.php @@ -11,29 +11,77 @@ */ require_once("../../../../class2.php"); - +/** + * Two Modes supported below going to and from the Tinymce wysiwyg editor. + * 1) When the post_html pref is active - raw html is used in the editor and wrapped in [html] [/html] bbcodes in the background. + * 2) When the post_html pref is disabled - bbcodes are used in the background and converted to html for the editor. + * Tested extensively over 24 hours with Images - check with Cameron first if issues arise. + * TODO Test Lines breaks and out html tags. + * TODO Check with html5 tags active. + */ if($_POST['mode'] == 'tohtml') { + + // XXX @Cam possible fix - convert to BB first, see news admin AJAX request/response values for reference why $content = stripslashes($_POST['content']); + // $content = e107::getBB()->htmltoBBcode($content); //XXX This breaks inserted images from media-manager. :/ - - $content = $tp->toDB($content); - e107::getBB()->setClass($_SESSION['media_category']); - // XXX @Cam this breaks new lines, currently we use \n instead [br] - //echo $tp->toHtml(str_replace("\n","",$content), true); - echo $tp->toHtml($content, true); + e107::getBB()->setClass($_SESSION['media_category']); + + if(check_class($pref['post_html'])) // raw HTML within [html] tags. + { + $content = str_replace("{e_BASE}","",$content); // We want {e_BASE} in the final data going to the DB, but not the editor. + + $srch = array("","","[html]","[/html]"); + $content = str_replace($srch,"",$content); + echo $content; + } + else // bbcode Mode. + { + + // XXX @Cam this breaks new lines, currently we use \n instead [br] + //echo $tp->toHtml(str_replace("\n","",$content), true); + + $content = str_replace("{e_BASE}",e_HTTP, $content); // We want {e_BASE} in the final data going to the DB, but not the editor. + $content = $tp->toHtml($content, true); + $content = str_replace(e_MEDIA_IMAGE,"{e_MEDIA_IMAGE}",$content); + + echo $content; + } e107::getBB()->clearClass(); } if($_POST['mode'] == 'tobbcode') { - // echo $_POST['content']; + // echo $_POST['content']; $content = stripslashes($_POST['content']); -// $content = str_replace("../","",$content); // quick fix for image-path issue. - echo e107::getBB()->htmltoBBcode($content); + + if(check_class($pref['post_html'])) // Plain HTML mode. + { + $srch = array('src="'.e_HTTP.'thumb.php?'); + $repl = array('src="{e_BASE}thumb.php?'); + + $content = str_replace($srch, $repl, $content); + + // resize the thumbnail to match wysiwyg width/height. + $psrch = '/htmltoBBcode($content); + } + } diff --git a/e107_plugins/tinymce/wysiwyg.php b/e107_plugins/tinymce/wysiwyg.php index 55fa18826..446615672 100644 --- a/e107_plugins/tinymce/wysiwyg.php +++ b/e107_plugins/tinymce/wysiwyg.php @@ -69,6 +69,8 @@ class wysiwyg $text .= " function tinymce_e107Paths(type, source) { + + "; $tp = e107::getParser(); @@ -76,7 +78,7 @@ class wysiwyg $paths = array( e107::getFolder('images'), e107::getFolder('plugins'), - e107::getFolder('media_images'), + // e107::getFolder('media_images'), //XXX Leave disabled - breaks thumb.php={e_MEDIA_IMAGE} which is required. e107::getFolder('media_files'), e107::getFolder('media_videos') ); @@ -284,7 +286,7 @@ class wysiwyg 'entity_encoding' => 'raw', 'convert_fonts_to_styles' => 'true', 'remove_script_host' => 'true', - 'relative_urls' => 'true', + 'relative_urls' => 'false', //Media Manager prefers it like this. 'preformatted' => 'true', 'document_base_url' => SITEURL, 'theme_advanced_styles' => 'border=border;fborder=fborder;tbox=tbox;caption=caption;fcaption=fcaption;forumheader=forumheader;forumheader3=forumheader3', diff --git a/e107_web/js/core/mediaManager.js b/e107_web/js/core/mediaManager.js index ac6e5a201..9e616e005 100644 --- a/e107_web/js/core/mediaManager.js +++ b/e107_web/js/core/mediaManager.js @@ -43,36 +43,23 @@ $(document).ready(function() function eMediaAttribute(e) { - var style = ''; - var bb = ''; - - var target = $(e).attr('data-target'); - // var path = $(e).attr('data-path'); - // var preview = $(e).attr('data-preview'); - // var src = $(e).attr('data-src'); - + var style = ''; + var bb = ''; + var src = $('#src').attr('value'); // working old var path = $('#path').attr('value'); // working old var preview = $('#preview').attr('value'); // working old var width = $('#width').val(); - var height = $('#height').val(); + var height = $('#height').val(); + var margin_top = $('#margin-top').val(); var margin_bottom = $('#margin-bottom').val(); var margin_right = $('#margin-right').val(); var margin_left = $('#margin-left').val(); var _float = $('#float').val(); - - if(width !='') - { - style = style + 'width:' + width + 'px;'; - } - if(height !='') - { - style = style + 'height:' + height + 'px;'; - } - + if(margin_right !='') { style = style + 'margin-right:' + margin_right + 'px;'; @@ -98,6 +85,22 @@ $(document).ready(function() style = style + 'float:' + _float + ';'; } + // Set the Html / Wysiwyg Value. + var html = '\"\"'; + $('#html_holder').val(html); + + // Only Do width/height styling on bbcodes -- + if(width !='') + { + style = style + 'width:' + width + 'px;'; + } + + if(height !='') + { + style = style + 'height:' + height + 'px;'; + } + + bb = '[img'; if(style !='') @@ -109,13 +112,10 @@ $(document).ready(function() bb = bb + path; bb = bb + '[/img]'; - $('#bbcode_holder').val(bb); - // document.getElementById('bbcode_holder').value = bb; + $('#bbcode_holder').val(bb); // Set the BBcode Value. // var html = ''; - var html = '\"\"'; - $('#html_holder').val(html); } @@ -124,8 +124,7 @@ $(document).ready(function() // $(".e-media-select").click(function () { $(".e-media-select").live("click", function(){ - - + // console.log(this); var id = $(this).attr('data-id'); @@ -133,10 +132,13 @@ $(document).ready(function() var path = $(this).attr('data-path'); var preview = $(this).attr('data-preview'); var src = $(this).attr('data-src'); - var bbcode = $(this).attr('data-bbcode'); + var bbcode = $(this).attr('data-bbcode'); // TinyMce/Textarea insert mode var name = $(this).attr('data-name'); - - //alert(target); + var width = $(this).attr('data-width'); + var height = ''; // disable for now - will be updated by bb parser. // $(this).attr('data-height'); + + + // alert(width); $(this).addClass("media-select-active"); $(this).closest("img").addClass("active"); @@ -169,6 +171,9 @@ $(document).ready(function() $('#path').attr('value',path); // working old $('#src').attr('src',src); // working old + $('#width').val(width); + $('#height').val(height); + $('img#' + target + "_prev", window.top.document).attr('src',preview); // set new value $('div#' + target + "_prev", window.top.document).html(preview); // set new value $('span#' + target + "_prev", window.top.document).html(preview); // set new value