Tinymce editor gallery plugin Regexp problem? - regex

I am using tinymce editor for inserting contents to mysql.
I have changed wordpress gallery editor plugin according to my system.
If there is gallery code in content. I convert this code to a symbolic photo, so that user understand there is a gallery , in stead of seeing a code. Like wordpress does.
If there is only 1 gallery in content, i convert this code to image successfully, but if there is more than 1 gallery it fails.
How can i convert all {gallery} code into a symbolic image before saving to db and convert these photos back to {gallery} code again while inserting or updating into mysql.
I am so bad on regular expression.
I think do_gallery RegExp has mistake. How should i change this.
initalising editor like:
ed.onBeforeSetContent.add(function(ed, o) {
ed.dom.loadCSS(url + "/css/gallery.css");
o.content = t._do_gallery(o.content);
});
ed.onPostProcess.add(function(ed, o) {
if (o.get)
o.content = t._get_gallery(o.content);
});
My "do and get gallery" codes like that:
_do_gallery : function(co) {
return co.replace(/\{gallery([^\]]*)\}/g, function(a,b){
var image = '<img src="gallery.gif" class="wpGallery mceItem" title="gallery'+tinymce.DOM.encode(b)+'" />';
console.log(image);
return image;
});
},
_get_gallery : function(co) {
function getAttr(s, n) {
n = new RegExp(n + '="([^"]+)"', 'g').exec(s);
return n ? tinymce.DOM.decode(n[1]) : '';
};
return co.replace(/(?:<p{^>}*>)*(<img[^>]+>)(?:<\/p>)*/g, function(a,im) {
var cls = getAttr(im, 'class');
if ( cls.indexOf('wpGallery') != -1 )
return '<p>{'+tinymce.trim(getAttr(im, 'title'))+'}</p>';
return a;
});
}
If Content is:
<p>Blah</p>
<p>{gallery Name="gallery1" id="82" galeryID="15" sizeId="6" galery_type="list"}</p>
<p>test</p>
this is ok
<img src="gallery.gif" class="wpGallery mceItem" title="gallery Name="tekne1" id="82" galeryID="15" sizeId="6" galery_type="liste"" />
But, if content is:
<p>Blah</p>
<p>{gallery Name="gallery1" id="82" galeryID="15" sizeId="6" galery_type="list"}</p>
<p>test</p>
<p>{gallery Name="gallery2" id="88" galeryID="11" sizeId="1" galery_type="slide"}</p>
<p>test2</p>
it logs
<img src="gallery.gif" class="wpGallery mceItem" title="gallery Name="gallery1" id="82" galeryID="15" sizeId="6" galery_type="list"}</p> <p>test</p> <p>{gallery Name="gallery2" id="88" galeryID="11" sizeId="1" galery_type="slide"" />
I hope i could explain my problem
Thank you.

I suspect that your original regex is a typo, looks like a missing Shift when you hit the ]. Try this:
/\{gallery([^\}]*)\}/g
Then the ([^\}]*) part will (greedily) eat up any sequence of characters that aren't }; your original one would consume any sequence of character that didn't include a ] and the result is that you'd grab everything between the first { and the last } rather than just grabbing the text between pairs of braces.

Related

How to transform link in markdown() to link with favicon using Google S2 Converter?

I'd like markdown links to have a favicon within the transformed link.
https://www.google.com/s2/favicons?domain=http://cnn.com
- will return the favicon from any domain.
Marked (https://github.com/chjj/marked)
- will turn all links in my code to a href's
http://cnn.com
becomes
http://cnn.com
So, How would I modify marked.js so that
- http://cnn.com
will become
<img src="https://www.google.com/s2/favicons?domain=http://cnn.com">http://cnn.com
I do see this line 452 marked.js
autolink: /^<([^ >]+(#|:\/)[^ >]+)>/,
Ref: https://github.com/chjj/marked/blob/master/lib/marked.js
I'm using expressjs and NodeJS
Thanks
Rob
You can override a renderer method.
Marked works in two steps: (1) it parses the Markdown into a bunch of tokens and (2) it renders those tokens to HTML. As you don't want to alter the Markdown parsing (it already properly identifies links), but you do want to alter the HTML output, you want to override the renderer for links.
var renderer = new marked.Renderer();
get_favicon = function (text) {
// return replacement text here...
var out = '<img src="https://www.google.com/s2/favicons?domain='
out += text + '">' + text + '</a>'
return out
}
renderer.link = function (href, title, text) {
if (this.options.sanitize) {
try {
var prot = decodeURIComponent(unescape(href))
.replace(/[^\w:]/g, '')
.toLowerCase();
} catch (e) {
return '';
}
if (prot.indexOf('javascript:') === 0 || prot.indexOf('vbscript:') === 0 || prot.indexOf('data:') === 0) {
return '';
}
}
var out = '<a href="' + href + '"';
if (title) {
out += ' title="' + title + '"';
}
out += '>' + get_favicon(text) + '</a>';
return out;
};
}
// Pass the custom renderer to marked with the input.
markdown(input, renderer=renderer)
Note that I just took the default link method and altered it slightly to pass text through the get_favicon function. The get_favicon function accepts a text string and returns the replacement text (an image in this case). It could probably be improved as not all links will only have a domain as their text content. If the text contained more that the domain (path, fragment, query string, etc), then only use the domain for the favicon link. Or if the text did not contain a link at all (as the same renderer is used for all links, not just auto links) then the text should be returned unaltered. I'll leave those improvements as an exercise for the reader.
You don't have to mess with marked source code.
This simple regexp should do the trick:
const markedOutput = 'http://cnn.com';
const withFavIcons = markedOutput.replace(/(<a[^>]+>)(https?:\/\/[^<]+)(<\/a>)/gi, (m, open, url, close) => {
const favicon = '<img src="https://www.google.com/s2/favicons?domain=' + url + '">';
const truncated = url.length > 50 ? url.slice(0, 47) + '...' : url;
return open + favicon + truncated + close;
});

angular2 - adding 'pattern' for form builder

I have a pattern for a form builder and I have this:
this.userForm = this.formBuilder.group({
'postalCode': ['', Validators.pattern('/[A-Za-z][0-9][A-Za-z] [0-9][A-Za-z][0-9]/i')]
});
I have a ValidationService which I've added a function "getValidatorErrorMessage".
static getValidatorErrorMessage(validatorName: string, validatorValue?: any) {
let config = {
'pattern': 'invalid pattern'
};
return config[validatorName];
}
My template has:
<div>
<label for="postalCode">Postal code (A1A 2J3)</label>
<input formControlName="postalCode" id="postalCode" />
<control-messages [control]="userForm.controls.postalCode"></control-messages>
</div>
But for some odd reason, the validation messages arent displaying if I dont follow the regex code.
You can view the plunkr here.
That's because you set a condition in your ControlMessagesComponent that input field has to be touched in order for error message to be displayed:
get errorMessage() {
for (let propertyName in this.control.errors) {
if (this.control.errors.hasOwnProperty(propertyName) &&
this.control.touched) { // this line
return ValidationService.getValidatorErrorMessage(propertyName, this.control.errors[propertyName]);
}
}
return null;
}
If you remove this.control.touched, validation will be performed as you type. But this also will result in required messages being displayed right away. Combination I prefer most is to display error message in two cases: when user clicks on input field and then clicks somewhere else or when user starts typing which can be achieved with following condition:
if (this.control.errors.hasOwnProperty(propertyName) &&
this.control.dirty ||
this.control.touched)

Drupal7 custom menu code in template adds stray div for no reason

I am hoping someone more knowledgeable here can point out what the problem is.
I am making a custom menu for Drupal7 for a particular theme I am working on, which is using the menu_views module. Everything works pretty nicely until I pass the view menu entry over to menu_views to parse, in which case drupal adds a broken <div class=">...</div> around the parent UL element of the view menu.. I have gone through the code and don't see how this is even happening.. If I comment out the call to the view parsing, then it doesn't add this DIV, but that view parsing shouldnt' be touching the parent UL element?
Here is how the HTML is output:
<ul class="sub-menu collapse" id="parent_">
<div class="> <li class=" first=" " expanded=" " active-trail "=" ">Por nome
<ul class="menu-content collapsed in " id=" ">
<div class="view view-nameofview view-id-nameofview etc ">
<div class="view-content ">
<div class="item-list ">
<ul class="views-summary ">
<li>Á
</li>
</ul>
</div>
</div>
</div>
</ul>
</div>
</ul>
Here is the template code that causes this:
function bstheme_menu_link__main_menu($variables) {
$element = $variables['element'];
// resolve conflict with menu_views module
if (module_exists('menu_views') && $element['#href'] == '<view>') {
return _bstheme_menu_views_menu_link($variables); //<<<< IF I COMMENT OUT THIS THE OUTPUT IS FINE
}
static $item_id = 0;
// Add an ID for easy identifying in jquery and such
$element['#attributes']['id'] = 'menu_'.str_replace(' ', '_',strtolower($element['#title']));
if(!empty($element['#original_link']['menu_name']) && $element['#original_link']['menu_name'] == 'main-menu'){
if($element['#original_link']['has_children'] == 1){
$element['#attributes']['data-target'] = "jquery_updates_this";
$element['#attributes']['data-toggle'] = "collapse";
}
// add class parent and remove leaf
$classes_count = count($element['#attributes']['class']);
for($i=0;$i<$classes_count;++$i){
if($element['#attributes']['class'][$i] == 'expanded'){
//$element['#attributes']['class'][$i] = 'collapse';
}
if($element['#original_link']['plid'] == 0){
if($element['#attributes']['class'][$i] == 'leaf'){
unset($element['#attributes']['class'][$i]);
}
}
else{
if($element['#attributes']['class'][$i] == 'leaf'){
$element['#attributes']['class'][$i] = '';
}
}
}
}
// code to add a span item for the glythicons
$switch = $element['#original_link']['has_children'];
$element['#localized_options']['html'] = TRUE;
if($switch == 1) {
$linktext = $element['#title'] . '<span class="arrow"></span>';
} else {
$linktext = $element['#title'];
}
// if there's a submenu, send the parsing to the custom function instead of the main one to wrap different classes
if ($element['#below']) {
foreach ($element['#below'] as $key => $val) {
if (is_numeric($key)) {
$element['#below'][$key]['#theme'] = 'menu_link__main_menu_inner'; // 2 lavel
}
}
$element['#below']['#theme_wrappers'][0] = 'menu_tree__main_menu_inner'; // 2 lavel
$sub_menu = drupal_render($element['#below']);
$element['#attributes']['class'][] = 'menu-toggle';
}
//$sub_menu = $element['#below'] ? drupal_render($element['#below']) : '';
$output = l($linktext, $element['#href'], $element['#localized_options']);
return '<li' . drupal_attributes($element['#attributes']) . '>' . $output . $sub_menu . '</li>'."\n";
}
function _bstheme_menu_views_menu_link(&$variables) {
// Only intercept if this menu link is a view.
$view = _menu_views_replace_menu_item($variables['element']);// <<< MENU VIEWS PARSING
if ($view !== FALSE) {
if (!empty($view)) {
$sub_menu = '';
if ($variables['element']['#below']) {
$sub_menu = render($variables['element']['#below']);
}
return '' . $view . $sub_menu . "\n"; // <<< RETURN PATH
}
return '';
}
return theme('menu_views_menu_link_default', $variables);
}
Any pointers on how to troubleshoot something like this, or if someone has encountered this problem before and has a solution, would be greatly helpful!
From your code, it's apparent you're using Drupal 7.
First things first, you may want to enable theme debug mode. This allows for you to see where the theming function that caused your
You can do so by putting the following line in your settings.php file
$conf['theme_debug'] = TRUE;
Flush your caches after you make this change.
You will now have debug code output to your Drupal HTML source, when you view the site's source. An example of the type of output is shown below:
<!-- THEME DEBUG -->
<!-- CALL: theme('page') -->
<!-- FILE NAME SUGGESTIONS:
x page--front.tpl.php
* page--node.tpl.php
* page.tpl.php
-->
With this debug, you should be able to see exactly which theme functions run, in which order, and by working through them from start to finish, you should be able to determine between which theme is responsible.
At this point, if you want to keep Drupal-best-practices, copy the file name suggestion from the debug output to a folder inside your theme folder. I usually put all template overrides in a sub-directory inside it.
In the case above, if it was page.tpl.php, I'd copy it to /themes/mytheme/templates/, and go hack on it to see whether the offending div is being generated there.
Best of luck, and if you hit a stuck end, I'd be happy to help point you in a direction more specific to your specific user case.
Best,
Karl

UI-grid grouping auto expand

Does anybody know how to automatically expand a UI-grid that is performing a grouping? I need the grid to open up and start up with it being completely expanded.
Their API and Tutorial reference doesn't explain explicitly enough for me to understand.
My HTML div
<code>
<div id="grid1" ui-grid="resultsGrid" class="myGrid" ui-grid-grouping></div>
</code>
My Javascript
$scope.resultsGrid = {
,columnDefs: [
{ field:'PhoneNum', name:'Phone'},
{ field:'Extension', name:'Extension'},
{ name:'FirstName'},
{ field:'DeptDesc', grouping: {groupPriority: 0}}
]
,onRegisterApi: function(gridApi)
{
$scope.gridApi = gridApi;
}
}
you just need to add
//expand all rows when loading the grid, otherwise it will only display the totals only
$scope.gridApi.grid.registerDataChangeCallback(function() {
$scope.gridApi.treeBase.expandAllRows();
});
in your onRegisterApi: function(gridApi)that should be updated like this onRegisterApi: function(gridApi) so your function will be like this
$scope.resultsGrid.onRegisterApi = function(gridApi) {
//set gridApi on scope
$scope.gridApi = gridApi;
//expand all rows when loading the grid, otherwise it will only display the totals only
$scope.gridApi.grid.registerDataChangeCallback(function() {
$scope.gridApi.treeBase.expandAllRows();
});
};
or you can add botton to expand data like shown in this plunker
My Module - I had to add ui.gridl.selection
<pre>
<code>
angular.module('ddApp',['ngRoute','ngSanitize','ngCookies','ngResource','ui.grid.selection'])
</code>
</pre>
My Controller - Amongh the other Dependency Injected items, I also had to add $timeout
<pre>
<code>
.controller('myCtrl', function(`$`timeout)){}
</code>
</pre>
<pre>
<code>
$timeout(function(){
if($scope.gridApi.grouping.expandAllRows){
$scope.gridApi.grouping.expandAllRows();
}
});
</code>
</pre>
The closest analogy would the selection tutorial, in which we select the first row after the data finishes loading: http://ui-grid.info/docs/#/tutorial/210_selection
$http.get('/data/500_complex.json')
.success(function(data) {
$scope.gridOptions.data = data;
$timeout(function() {
if($scope.gridApi.selection.selectRow){
$scope.gridApi.selection.selectRow($scope.gridOptions.data[0]);
}
});
});
The key understanding is that you can't select (or expand) data that hasn't been loaded yet. So you wait for the data to return from $http, then you give it to the grid, and you wait for 1 digest cycle for the grid to ingest the data and render it - this is what the $timeout does. Then you can call the api to select (or in your case, expand) the data.
So for you, you'd probably have:
$http.get('/data/500_complex.json')
.success(function(data) {
$scope.gridOptions.data = data;
$timeout(function() {
if($scope.gridApi.grouping.expandAllRows){
$scope.gridApi.grouping.expandAllRows();
}
});
});
If you're on the latest unstable, that call will change to $scope.gridApi.treeBase.expandAllRows.

Customise Sitecore RichTextEditor to add default wrapper

The front end (html and css) is set up such a way that for the description text from a Sitecore content field needs to have a <p> tag wrapped around it.
So by default the RTE wraps texts in a <p> tag = TRUE. BUT the catch is you will need to hit Enter or copy/paste multiple paragraphs.
How can we force Sitecore to add a P tag if it's just one line?
Fortunately, From the dll, one particular function caught my eye:
protected virtual void SetupScripts()
{
foreach (XmlNode node in Factory.GetConfigNodes("clientscripts/htmleditor/script"))
this.Result.Scripts.AppendFormat("<script src=\"{0}\" language=\"{1}\"></script>\n", (object) XmlUtil.GetAttribute("src", node), (object) XmlUtil.GetAttribute("language", node));
}
NICE, eh? The developers of SITECORE are clever after all.
So I did this in the web.config,
<!— CLIENT SCRIPTS
These script files are included in the client, e.g. '<script src="/myscript.js" language="JavaScript"/>'
—>
<clientscripts>
<everypage />
<htmleditor>
<script src=”/assets/js/CustomRTE.js” language=”javascript”/>
</htmleditor>
</clientscripts>
And overrode scSendRequest function from EditorWindow.aspx.
window.scSendRequest = function(evt, command) {
var editor = scRichText.getEditor();
if (editor.get_mode() == 2) { //If in HTML edit mode
editor.set_mode(1); //Set mode to Design
}
var htmls = editor.get_html(true);
var regex = /<p[^>]*>.*?<\/p>/i;
var match = regex.exec(htmls);
if(match == null && htmls != null) {
htmls = "<p>" + htmls + "</p>";
}
//$("EditorValue").value = editor.get_html(true);
$("EditorValue").value = htmls;
scForm.browser.clearEvent(evt);
scForm.postRequest("", "", "", command);
return false;
}
AND YAY .. double rainbow and unicorn.
You could create your own custom solution for this requirement as well.
You could create a new pipeline event in the
<saveRichTextContent> pipeline - This could enable you to append the tag when you hit save on the rich text editor in sitecore
<renderField> pipeline - This could on the fly wrap your text into <p></p> tags while rendering the page, if the tag was not there in the original rtf text.
If you go for method 1: <saveRichTextContent>
You could add to the pipeline in web.config:
<processor type="Sitecore72.Classes.WrapRichTextInParagraphOnSave, Sitecore72" />
And you could use the following corresponding code:
namespace Sitecore72.Classes
{
public class WrapRichTextInParagraphOnSave
{
public void Process(SaveRichTextContentArgs args)
{
if (!(args.Content.Trim().StartsWith("<p>") && args.Content.Trim().EndsWith("</p>")))
args.Content = "<p>" + args.Content + "</p>";
}
}
}
Please note, that this pipeline gets triggered only when you use the Show Editor buttong of a rich text field:
If you go for method 2: <renderField>
To append to this pipeline you would use this config:
<processor type="Sitecore72.Classes.WrapRichTextInParagraphOnRender, Sitecore72" />
And you could use the following corresponding code:
namespace Sitecore72.Classes
{
public class WrapRichTextInParagraphOnRender
{
public void Process(RenderFieldArgs args)
{
if (args.FieldTypeKey == "rich text" && !(args.Result.FirstPart.Trim().StartsWith("<p>") && args.Result.FirstPart.Trim().EndsWith("</p>")))
args.Result.FirstPart = "<p>" + args.Result.FirstPart + "</p>";
}
}
}
For both these, ensure you add reference to Sitecore.Kernel.dll and HtmlAgilityPack.dll. Both of these are available with the sitecore package solution.