<p> tag getting added to inline macro - razor

I am using umbraco 4.7. I have created a razor macro to insert telephone number in my rich text editor. Whenever i add the macro in the RTE, <p> tags are added around the macro automatically. I tried removing the extra <p> tags by editing the html but as soon as I click on save, the <p> tags are added again. I tried installing this package
but it didn't solve my problem. I have tried setting the <TidyEditorContent>False</TidyEditorContent> and checking the forced_root_block : 'p' but none of these could solve the problem.
Any pointers to solve this issue?

This is a common issue, and the RTE causes a number of headaches for maintaining the integrity of your web page. The whole "should we include paragraph tags or not?" question is a difficult one, as it is fine to remove them when only inserting a single paragraph of text, but what if the content editor decides to add more, and you are stripping out the first and last P tags?
Bearing in mind that the CSS for a site will always need to support whatever you choose, the best option is to edit the configuration file to make TinyMCE omit the P tags. To do this, you need to edit the /config/tinyMceConfig.config file. This has two interesting sections at the bottom. contains allowed HTML tags, and the of course contains the opposite.
If you look in the valid elements list of comma separated values, you should see a value #p[id|style|dir|class|align]. Taking note of EXACTLY how this is formatted, you should be able to move it into the invalid elements section. Put it after the default font tag, with a comma preceding it of course.
Restart IIS and try entering your content in the RTE. When you publish, then view the output, you should see that the string in the RTE has had the paragraph tags stripped.
One final option is to strip the paragraph tags from the output. There are many new ways of doing this, but for your Razor version I would use something like:
#Html.Raw(umbraco.library.RemoveFirstParagraphTag(value.ToString()))
This idea is covered in another StackOverflow article.
Good luck, and please let us know if you have any success.

use this jquery .....
$('p').each(function() {
var $this = $(this);
if($this.html().replace(/\s| /g, '').length == 0)
$this.remove();
});

Related

What is the difference between displaying the information using a value attribute and just displaying the information between the two tags?

I am new to HTML and was studying forms when this question struck me. Let me illustrate with the following example:
When we use the label tags, the data between the opening and closing tags is printed as it is in our page. But when we use the nested option tags in datalist element, we have to provide a 'value' attribute whose value is the data that will be eventually printed on our page. What is the difference between the two approaches?
I tried reversing the roles, i.e., I used value attribute with label tag, with no data between the opening and closing tags (which removed the label altogether making me realize that value attribute doesn't work with label) and for option tag, I removed the value attribute and instead put the data in between the opening and closing tag (which worked as it is, making me realize that both ways are valid for option tag.)
What we give inside the two tags is a fixed constant value and can't be changed by a user or the website too until we edit the code, while a value attribute is variable means that it can vary throughout the code.
So, let's say the user types in a username or something and we wanna save it and display it on the web-page then we don't already know when we write the code that what he's gonna type so in that case we can store it through PHP, JavaScript or something to the value attribute through which we can then print it onto the web-page!
Hope this was helpful :)
And yeah good-luck learning HTML and all it's very good way to start your journey! :)

Ckeditor 4 is removing the <img> tag if the HTML is not correct. How to stop this behaviour

we are using CKEditor in our project. We recently upgraded the version from 3.X to 4.x. After the update, we are not able to see <img> tags in the old saved documents. When we click on the source, we see
<p> <p> in place of a <p><img ......><p>.
On further debugging, we found that many documents which had the <img> tag were also having a junk attribute in the <img> tag like <img /="/" src="/folder/11801321/112267100.neck.png" height="308" width="467">.
By junk, I mean this part of tag /="/". This was a bug introduced while we were processing the user's input. We reverted old CKEditor version to 3.X and the editor was internally taking care of the junk values. it was trimming it off. so the users never complained.
But now the CKEditor 4 is not handling the HTML in the same way. It is actually stripping the whole <img> tag.
We have two options to fix this issue.
1. Remove the junk characters in all the documents. This is huge data. Needs approval from the user to do it.
2. Change CKEditor 4 config settings to get the same behavior as the CKEditor 3.X.
We are in favor of point 2. I have been searching and trying couple of config settings but haven't been able to nail it.
Let me know if any one has faced the same issue and have resolved it.
If you really want you can set all the code inside the img tag as "protected" and this way the editor will not strip this code:
CKEDITOR.config.protectedSource.push(/<img \/="\/" .*?>/g)
Remember that your final html will not be valid.
Since that part of the code is "protected" you will not see these images in the editor.
Here is a working example for that:
https://jsfiddle.net/oLb4Lmdb/
However - I really think it will be best to replace the string <img \/="\/" with <img in the source once the ckeditor instance is ready:
CKEDITOR.instances.editor1.on('instanceReady', function() {
this.setData(this.getData().replace("<img /=\"/\"", "<img"))
})
This way you don't need to go over all the data in the "backround", and the replacement will be done "on the fly" for every document that you need to edit.
You can check this jsfiddle:
https://jsfiddle.net/k1ewc29p/

Regex match and delete everything before string (opening html tag)

I'm using Dreamweaver and Notepad++ and have searched high and low but nothing seems to work from what I've found.
I've got a whole stack of html pages and I need to remove from all of them everything above but not including the first tag in the document. Specifically, everything before the string "<h1" (no quotes). I've tried various examples in Notepad++ and it finds the first h1 tag but doesn't replace everthing before it.
Assuming you want to lose everything in your file before the "<h1" text
then specify ".*<[hH]1" as search tag and "<h1" as replacement and check
the box marked ". matches newline". Works for me.
You can do this from the Command Line or a text editor that allows you to search-replace multiple files. However, are you sure the content is the same in every html file?

How to skip <p> tag in HTML?

I'm trying to use CKeditor as Wysiwyg editor for my blog posts. It works fine, all my contents get inserted fine in DB.
However I have one problem. CKeditor inserts automatic <p> tag in the begining, which mess up my code while returning from DB.(I loose CSS stylings).
Therefore, I'm wondering is there a way to tell HTML to ignore(skip) that tag (and closing one in the end).
Thank you...
You need to change the configuration file (plugin.js) to this: config.autoParagraph = false;
Whether automatically create wrapping blocks around inline contents inside document body, this helps to ensure the integrality of the block enter mode.
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.autoParagraph

WP removing all br tags from my pages when I try to edit them

WordPress 3.7.1, one of the pages contains a lot of code looking like this:
...
<td>
<strong>Text</strong><br/>
Text<br/>
Text
</td>
I know, not the best HTML, however, changes of the HTML structure are not possible due to various reasons. I can save the page and it works fine, however, when I try to edit the page again (no TinyMCE or similar installed) WP stripped all the br tags without even asking (no, I've not even switched to the visual editor, HTML edit only).
I've searched the WWW, but couldn't find a working solution yet. Most fixes are TinyMCE-related.
Also the very high voted Removing <p> and <br/> tags in WordPress posts didn't change a thing.
Anyone knows a solution or on which part of WP I have to look to find the problem? I'm unfortunately far away from being a WP expert.
Edit: Installing the Text Control plugin and setting everything to "No Formatting" didn't help either,.
It seems that we destroyed it by using the Visual Editor in a previous version of the document which generated some invalid HTML which in turn confused the HTML editor thus removing all br tags completely.
After making the HTML valid again it does not strip the br tags anymore, still, weird behavior.
Try disabling the 'visual' tab from the editor via your user profile. That would stop it defaulting to 'visual' and overwriting the changes made on the text tab during those subsequent edits, and the text tab accepts html just fine!
Actually, I was also very frustrated trying to find a solution to this problem.
Realised that the solution was a simple one.
The editor.js and editor.js.min files have preg_match and replace functions to replace <p> tags with "".
Separate <div> containing <p>
//content = content.replace( /<div( [^>]*)?>\s*<p>/gi, '<div$1>\n\n' );
comment the above line
Similarly
// Remove <p> and <br />
//content = content.replace( /\s*<p>/gi, '' );
//content = content.replace( /\s*<\/p>\s*/gi, '\n\n' );
The explaination given in the documentation is that it is for Prettying up the source editor, so doesnt look harmful to remove it.
Thanks