Draft JS linkify/mentions plugin on convertToRaw removes anchor tag - draftjs

I am using the draft js editor and its linkify and mentions plugin.
Adding link and mentions with link work fine on editor but when I try to get the html, anchor tags are removed from the content.
My editor rendor
return (
<div
className={editorStyles.editor}
style={{ height: '150px', padding: '10px' }}
onClick={() => {
ref.current.focus();
}}>
<Editor
editorKey={'editor'}
editorState={editorState}
onChange={onChange}
plugins={plugins}
placeholder={"What's on your mind"}
ref={ref}
/>
<MentionSuggestions
open={open}
onOpenChange={onOpenChange}
suggestions={mentions}
onSearchChange={onSearchChange}
onAddMention={(e) => {
}}
/>
</div>
);
This is how I am trying to get the HTML
draftToHtml(convertToRaw(_editorState.getCurrentContent()));
If the editor has a link say google.com, the above code returns the plain text instead of the anchor tag though it shows the anchor tag in the editor. Same for the mention, I am adding the link for the mention, but there as well anchor tag getting removed.
If I copy paste a link say Wikipedia, then this anchor tag isn't removed.
How to get these html with anchor tags for linkify and mentions? Need help. I am not a pro here.
Edit 1:
I further checked and found out
Linkify on convertToRaw returns as plain text
Mentions works fine for convertToRaw, but draftToHtml not working here as its not supported.
I will have to manipulate the Raw data to achieve necessary result.

The rendered link is part of the mention/linkify component and not part of the text. That's why it is missing in the export.
If you want to have the links in the output from draftToHtml you need to use the customEntityTransform parameter.
As from the documentation:
customEntityTransform can be used for transformation of a custom entity block to html. If present its call to generate html for entity. It can take 2 parameter:
entity ( object with { type, mutalibity, data})
text text present in the block.

Related

TinyMCE - preserve style and function of selected element

I have decided to 'enhance' a textarea in a form with TinyMCE... however, doing so has interrupted the styling and jQuery functionality of the original element, as TinyMCE wraps that element in an iframe and a few divs. What I'd love to be able to do is to get the TinyMCE functionality (preserving text formatting, etc.) but not lose the styling and functions that I had associated with the original textarea. I looked through the TinyMCE documentation, but couldn't seem to find anything about this. Does anyone have any thoughts on how to accomplish this?
My form features the textarea like so:
<head>
<script>tinymce.init( { selector: 'textarea' } );</script>
</head>
<div class="form-element">
<div class="label-container">
<label for="body">Post</label><span class="warning">Please fill out this field</span>
</div>
<textarea id="body" class="input-field" name="body"></textarea>
</div>
but adding TinyMCE breaks the label/textarea relationship.
Also, jQuery functionality is broken, such as this validation script:
$("form").submit(function(e){
tinyMCE.triggerSave();
var inputFields = $(".input-field");
var proceed = true;
for(var i = 0; i < inputFields.length; i++){
if($(inputFields[i]).val() == ""){
$(inputFields[i]).css("border", "solid 3px #E86F3A");
$(inputFields[i]).prev().find(".warning").show();
var proceed = false;
e.preventDefault();
}
else{
$(inputFields[i]).css("border", "none");
$(inputFields[i]).prev().find(".warning").hide();
};
};
//OTHER STUFF...
});
since the textarea.input-field is no longer picked up in the inputFields variable.
So, in a nutshell, I'm looking for the TinyMCE wrapper to 'inherit' the styling and functionality of the element that it is attached to. Possible?
As you have correctly surmised when you invoke TinyMCE on a <textarea> the original <textarea> is no longer visible on the page and its replaced by an <iframe> and series of <div> elements.
If you want to keep the underlying <textarea> in sync you can use the tinymce.triggerSave() method. This will update all of the underlying <textarea> elements with the current value of the appropriate instance of TinyMCE.
You can do this when someone tries to save/submit the content or you can try to perform this when certain editor events happen (https://www.tinymce.com/docs/advanced/events/#editorevents). Unless you need real time accuracy of the contents of the <textarea> its far easier to call the triggerSave() method right before you perform you jQuery validation.
Note: Putting a border on the <textarea> won't have any impact on TinyMCE as you no longer see the underlying <textarea>. You can certainly try to add CSS to the editor's HTML in real time. The outer border of TinyMCE 4.4 has these classes attached:
class="mce-tinymce mce-container mce-panel"
...but do note that these classes could change over time so if you upgrade TinyMCE check to make sure your CSS still works before upgrading.

Is wicket:label needed with wicket:for?

In the past I have built labels for my form like this:
<label wicket:for="name"><wicket:label><wicket:message key="name"></wicket:message></wicket:label>:</label><input wicket:id="name" type="text"/>
Do I still need to use the wicket:label tag? I am not using wicket:label in wicket 7 and it seems to work fine. I may not be understanding the purpose of using wicket:label. It seems like wicket:label is just additional markup. Below is what I am doing now. Is this correct?:
<label wicket:for="name"><wicket:message key="name"></wicket:message>:</label><input wicket:id="name" type="text"/>
This example is related to Wicket XHTML tags
Have a look at the JavaDoc of AutoLabelResolver and AutoLabelTextResolver.
The <label wicket:for="name"> is handled by AutoLabelResolver. It links the HTML label tag to the HTML form component (in your case the input tag) by filling in the correct ID in the HTML for attribute of the label. It also adds css classes to the label tag for for example errors, so you can style the text in the label tag in case of an error.
The <wicket:label> has two purposes. If you give it a value either by the key attribute (as you did) or by having some text between the tags, the text is set as the label model of the Java FormComponent, which then is used in validation messages like this '${label}' is required. (see LabeledWebMarkupContainer#setLabel and LabeledWebMarkupContainer#getLabel).
If you don't assign any text to the <wicket:label> tag, then it is used as output. That means the value of the label model of your Java FormComponent is used to replace the tag.
If you have no <wicket:label> in the HTML markup and no label model set in your Java code, then your Java FormComponent will have an empty label model and Wicket falls back to using the Wicket ID as label. So depending on how your Wicket IDs look, you will get validator messages like 'user_name' is required. instead of something nice looking like 'User name' is required.

CKEditor strips <i> Tag

I'm trying to find a solution to avoid CKEditor, but also the older FCKeditor strips out any
<i> tag from previously inserted content to the db.
Case:
I insert html content to the db, some content contain the <i> elements.
I do this with the CKEditor.
Everything works perfect and the content shows up on the webpage.
But when i want to edit the previously inserted content, the <i> elements are missing.
In my specific case i use:
<i class="fa-icon-fullscreen fa-icon-xxlarge main-color"></i>
Of course if i disable the editor, the content shows up just fine in the textarea.
When the protectedSource solution is used, i tags are no longer stripped, but img tags stop showing up in the WYSIWIG mode of CKEditor (I'm using 4.3.1). The solution that worked better for me is to disable removing empty i tags using CKEDITOR.dtd.$removeEmpty
For example, I added the following to the config.js
// allow i tags to be empty (for font awesome)
CKEDITOR.dtd.$removeEmpty['i'] = false;
Note: This should be placed outside the CKEDITOR.editorConfig = function( config ) function.
I found the solution for this specific problem i ran into with the <i> tag
The original answer i got from drupal forum
The fix or tweak (you name it) for it is to set the following into the ckeditors config.js:
// ALLOW <i></i>
config.protectedSource.push(/<i[^>]*><\/i>/g);
Thanks to Spasticdonkey for pointing me to the link.
Here is what works for me
add the 3 lines of code below in the same order in the drupal ckeditor profile setting
admin/config/content/ckeditor/edit/Full
ADVANCED OPTIONS >> Custom JavaScript configuration
config.allowedContent = true;
config.extraAllowedContent = 'p(*)[*]{*};div(*)[*]{*};li(*)[*]{*};ul(*)[*]{*}';
CKEDITOR.dtd.$removeEmpty.i = 0;
First line is pretty much turning off the advanced filtering
Second line is allowing ALL class (), any style {} and any attribute [*] for the p,div, li and ul.
The last line is for the empty tag...this line works with images...I have found that if you use
config.protectedSource.push(/]*></i>/g);
it strips out the tag while editing.
for 4.3 version ckeditor
in config.js (after config section) paste
CKEDITOR.dtd.$removeEmpty['b'] = false;
and write widget with code
CKEDITOR.plugins.add( 'bwcaret', {
requires: ['widget'/*, 'richcombo'*/],
icons: 'bwcaret',
init: function( editor ) {
editor.widgets.add( 'bwcaret', {
button: 'Create a caret',
template: '<b class="caret"></b>',
allowedContent: 'b(!caret)',
requiredContent: 'b(!caret)',
upcast: function( element ) {
return element.name == 'b' && element.hasClass( 'caret' );
},
});
}
});
There are two possible problems:
Read about Advanced Content Filter. CKEditor is removing elements which are not allowed, but you can extend filter's rules.
However, if the problem is that CKEditor removes empty <i> elements, then you need to find other way of using it. CKEditor is not a WYSIWYG website builder. It is a document editor, so the loaded content must have a meaning. Empty inline element does not have any meaning, therefore it is removed, because otherwise editor would not know what to do with it.
One of the possible solutions in the (near) future, will be to use Widgets system, to handle those empty elements. But for now I advice you to check the CKEDITOR.htmlDataProcessor and short guide how to use it.
i found a permanent solution for it.actually what happened ckeditor removing only blank tag.whatever the tag is, may b <i> tag or <span> tag
if you are using any icon like font-awesome,maeterlize icon etc ...
you can stop it by using below code in your config.js file
CKEDITOR.dtd.$removeEmpty.span = false;
CKEDITOR.dtd.$removeEmpty.i = false;
if you are using more blank tag then you need to add the tag name after $removeEmpty
CKEditor 4 removes emtpy tags, so here you can do trick without changing any config settings.
Replace
<i class="fa-icon-fullscreen fa-icon-xxlarge main-color"></i>
With
<i class="fa-icon-fullscreen fa-icon-xxlarge main-color"> </i>
Now <i></i> tag have content i.e. so CKEditor will not remove that tag.

Add attributes to Insert Image dialogue of Umbraco RTE or Create Custom Data type

How can I add attributes to the current Insert Image dialogue box on umbraco Richtext Editor?
What I really want is to let content editor choose images and set their class, and maybe choose if this is lightbox image or not. If user choose lighbox option, then a hyper link is added with some extra attributes, like data-rel. I even want to be able to modify the image url added by the content editor, if possible.
The output should look like this
<a href="/media/2813/DSC_2615.JPG" data-rel="prettyPhoto[gal-3-col]" >
<img src="http://domain.com/imageGen.ashx?
image=%2fmedia%2f2813%2fDSC_2615.JPG&width=420" alt="DSC_2615" title="DSC_2615"
class="alignright">
</a>
I found this very useful link http://forum.umbraco.org/yaf_postst8163_TinyMCE--insert-image-dialog.aspx which solve half of my issue, but I can't figure out how to continue
Default umbraco tinymce add image interface is
<plugin loadOnFrontend="false">umbracoimg</plugin>
I was able to modify it to show additional field in the image selection interface, then render markup I want.
I edited \umbraco\plugins\tinymce3\insertImage.aspx, added my field there and some jquery logic:
<ui:PropertyPanel id="pp_desc" runat="server" Text="Description">
<input type="text" id="title" style="width: 300px"/>
</ui:PropertyPanel>
...
Then if you are adding custom attributes, you might want to add them to \config\umbracoSettings.config
<!-- what attributes that are allowed in the editor on an img tag -->
<allowedAttributes>src,alt,title,border,class,style,align,id,name,onclick,usemap</allowedAttributes>
and \config\tinyMceConfig.config
<validElements>
<![CDATA[+a[id|style|rel|rev|charset|hreflang|dir|lang|tabindex|accesskey|type|name|href|target|title|class|onfocus|onblur|onclick|
ondblclick|onmousedown|onmouseup|onmouseover|onmousemove|onmouseout|onkeypress|onkeydown|onkeyup],-strong/-b[class|style],-em/-i[class|style],
-strike[class|style],-u[class|style],#p[id|style|dir|class|align],-ol[class|reversed|start|style|type],-ul[class|style],-li[class|style],br[class],
img[id|dir|lang|longdesc|usemap|style|class|src|onmouseover|onmouseout|border|alt=|title|hspace|vspace|width|height|align|umbracoorgwidth|umbracoorgheight|onresize|onresizestart|onresizeend|rel],
-sub[style|class],-sup[style|class],-blockquote[dir|style|class],-table[border=0|cellspacing|cellpadding|width|height|class|align|summary|style|dir|id|lang|bgcolor|background|bordercolor],
-tr[id|lang|dir|class|rowspan|width|height|align|valign|style|bgcolor|background|bordercolor],tbody[id|class],
thead[id|class],tfoot[id|class],#td[id|lang|dir|class|colspan|rowspan|width|height|align|valign|style|bgcolor|background|bordercolor|scope],
-th[id|lang|dir|class|colspan|rowspan|width|height|align|valign|style|scope],caption[id|lang|dir|class|style],-div[id|dir|class|align|style],
-span[class|align|style],-pre[class|align|style],address[class|align|style],-h1[id|dir|class|align],-h2[id|dir|class|align],
-h3[id|dir|class|align],-h4[id|dir|class|align],-h5[id|dir|class|align],-h6[id|style|dir|class|align],hr[class|style],
dd[id|class|title|style|dir|lang],dl[id|class|title|style|dir|lang],dt[id|class|title|style|dir|lang],object[class|id|width|height|codebase|*],
param[name|value|_value|class],embed[type|width|height|src|class|*],map[name|class],area[shape|coords|href|alt|target|class],bdo[class],button[class],iframe[*],code[*]]]>
</validElements>
Then I modified the .js that is in charge of rendering html that will be added to tinymce editor:
\umbraco_client\tinymce3\plugins\umbracoimg\js\image.js
ed.execCommand('mceInsertContent', false, '<div id="__dimps_width" class="img-with-text"><img id="__mce_tmp" /><p id="__dimps_desc">description</p></div>', { skip_undo: 1 });
ed.dom.setAttribs('__mce_tmp', args);
ed.dom.setAttrib('__mce_tmp', 'id', '');
ed.dom.setAttribs('__dimps_width', {style: 'width: ' + nl.width.value + 'px;'});
...
One important thing: everything is cached and bundled, so to make sure your changes was applied remove all files from \app_data\TEMP\ClientDependency\ and use new instance of incognito browser. You probably can disable it somewhere, but I just removed the cache.
There is no magic in Umbraco TinyMCE. Just a bunch of .aspx and .js code. Modify it to your needs.

Prevent EPiServer from wrapping content in <p> tags

I'm working on a site in EPiServer, and whenever I create a page property with the type set to "XHTML string" (which uses the WYSIWYG content editor in Edit mode), it wraps all content in <p> tags.
Is there any way to prevent this from happening? I can't remove the paragraph margins universally through my CSS (e.g. p {margin: 0 !important;}) since I do need the margins for actual paragraphs of text. I've even tried going to the HTML source view in the editor and manually deleting the <p> tags that it generates, but it immediately adds them back in when I save!
It doesn't happen when the property type is either a long or short string, but that's not always an option since the content might contain images, dynamic controls, etc.
This is becoming a real nuisance since it's very hard to achieve the layout I need when basically every element on the page has extra margins applied to it.
As Johan is saying, they are there for a reason - see more info here. That being said, it's not impossible to remove them. It can be done in one of two ways (taken from world.episerver.com:
protected override void OnLoad(EventArgs e)
{
base.OnLoad(e);
myEditor.InitOptions["force_p_newlines"] = "false";
}
or
<script type="text/javascript">
tinyMCE.init({
force_p_newlines: false
});
</script>
You can add your own custom TinyMCE-config that removes P-elements or strip them out using regular expressions either when saving the page or when rendering the property/page.
I think it's a bad idea though. P-elements are what the editors generate the most and in most cases their content is also semantically correct. Better to wrap your property in a div with a class and adjust margins using CSS like you mention.
If you're using a version of EPiServer with TinyMCE editors, you can insert <br /> elements instead of <p> elements if you type shift-enter instead of enter. This should eliminate your margin problems.
More info at the link below:
http://www.tinymce.com/wiki.php/TinyMCE_FAQ#TinyMCE_produce_P_elements_on_enter.2Freturn_instead_of_BR_elements.3F
EDIT: My comment below answers his question better.
I discovered that while I can't remove the <p> tags from the source view (because it adds them back in automatically), if I replace them with <div> tags, it'll leave things alone. It does mean that I've got an extra <div> wrapping some elements that I don't really need, but at least a <div> doesn't add margins like a <p> does, so...good enough!