In input HTML I have the element:
<img id="p_W_1" name="{1234}" class="po" src="../tinymce/plugins/myplugin/img/icon.png" data-mce-src="../tinymce/plugins/myplugin/img/icon.png" style="" data-mce-selected="1">
in editor init function
extended_valid_elements:'img[id|src|class|data-mce-src|data-mce-selected|role|name]',
in otuput HTML no tags id, name
<img src="../tinymce/plugins/myplugin/img/icon.png" class="po" />
When I changed into
extended_valid_elements:'img[id|src|class|data-mce-src|data-mce-selected|role]',
on result still no name
<img id="p_W_1" src="../tinymce/plugins/myplugin/img/icon.png" class="po" />
extended_valid_elements only allows valid HTML5 attributes, and name is not allowed on <img> tags, so name is removed.
Attributes like data-mce-src are internal to tinymce and shouldn't be used, so they are also stripped out.
Please see this example and choose View > Source Code on the editor:
https://fiddle.tiny.cloud/YShaab/5
However, if you add name to extended_valid_elements, you can see that id gets removed too:
https://fiddle.tiny.cloud/YShaab/7
This seems like a bug and I'll report it to the Tiny devs.
Related
I am trying to create an Advanced PDF/HTML template that will display an image using a URL that is in a custom field. The custom field is a hyperlink and the field ID is {custitem_dp_image1}. I am using the image tag and referencing the {custitem_dp_image1} field as the src but I am unable to save the template due to the following error:
java.lang.StringIndexOutOfBoundsException: String index out of range:
0 java.lang.InternalError: java.lang.StringIndexOutOfBoundsException:
String index out of range: 0
I've also tried the following code:
<#if result.custitem_dp_image1?length != 0><img src="${result.custitem_dp_image1}" style="width: 100px; height: 100px;" /> </#if>
But I received the following error when I tried to view the Advanced PDF/HTML template from a Saved Search:
The template cannot be saved due to the following errors:
org.xml.sax.SAXParseException; lineNumber: 53; columnNumber: 28; The value of attribute "src" associated with an element type "img"
must not contain the '<' character.
*The template was stored as invalid.
How can I get this to work and display the image?
The solution is to change the custom field to type = Free-Form Text and use the following freemarker code:
<#if result.custitem_dp_image1?length != 0><img src="${result.custitem_dp_image1}" style="width: 100px; height: 100px;" /> </#if>
Instead of Hyperlink use image datatype for your custom field.
You can also use a workflow to link the Hyperlink custom field to a Free-Form text field with the Store Value field checked.
Look under SuiteAnswers ID: 89195
The Hyperlink field type will return an entire HTML tag when calling for the field like this: ${result.custitem_dp_image1}
image name
So if you add it to the HTML or tag, it would break because it would look something like this:
<img src="image name">
Freemaker has functions to trim data ?keep_after and ?keep_before
So you could use this to bring just the actual URL:
result.custitem_dp_image1?keep_after('href="')?keep_before('"')
In a nutshell, everything after the href=" and everything before the ":
BUT you cant use this inside the "src" tag as it would break the HTML code. You have double quotes inside the Freemaker function and HTML would think the src tag ended at that particular location.
So to circumvent that, I'll insert the code in a variable (either global or assign) and then use just the variable in the SRC tag.
<#global custom_url = result.custitem_dp_image1?keep_after('href="')?keep_before('"')>
<img src="${custom_url}">
Oh, just my 2 cents, Users will likely want to keep the Hyperlink field type as its clickable in the User UI.
In previous versions(3.5) of CKEditor I was able to enter:
<br style="page-break-after: always;" />
However, after upgrading to 4.4.5, I noticed that the RTE no longer shows this HTML source, from the Database column, and so if one resaves the form with this RTE on it, then NULL is saved back to the database. It seems that CKEditor is stripping this HTML out for some reason.
How can I prevent this?
Many thanks.
EDIT 1
Discovered this to be added to config.js:
config.allowedContent = 'br {page-break-after}';
But does not work, although it should do....
EDIT 2
Link for above config setting
EDIT 3
I can try to enter the above HTML, in HTML Source View, but if I toggle the HTML Source button, and go back to Source View, it is now gone. So CKEditor is stripping this HTML out for some reason.
EDIT 4
Removed as now irrelevant
EDIT 5
Looking at the Browser source I see:
<textarea class="RuleRTE" cols="20" id="myCk" rows="2"><br style="page-break-after: always;" /> </textarea>
So clearly the data is there and being retrieved, but being converted which prevents me seeing it in the HTML Source view.
I have now found this is irrelevant as <p>test</p> test fine and it gets converted as well, I guess to prevent it being rendered like normal HTML in the page. So it seems the CKEditor does not like the tag ???
EDIT 6:
Removed as now irrelevant to question.
EDIT 7:
Debug JS:
<script type="text/javascript" language="javascript">
var editor = CKEDITOR.replace('Content', {
allowedContent: 'br[*]'
});
editor.on('instanceReady', function () {
console.log(editor.filter.allowedContent);
});
Results seem to show allowedContent is working fine, but BR element still invisible.
[Object, Object]
0: Object attributes: true
classes: null
elements: Object br: true
I suspect that there's a syntax or usage error with the way you're attempting to modify the allowedContent setting. Try doing something more simple along these lines: (do it in code rather than the config file)
var your_ck_editor = CKEDITOR.replace( 'your_ck_element_id', {
allowedContent: 'br[*]'
} );
The br[*] setting should allow any <br /> element with any attribute.
For troubleshooting purposes try this:
console.log( your_ck_editor.filter.allowedContent );
If this code does not work for you please post all the code that you use to set up your CKEditor as well as the output of your console.log call.
Is there a way to check if the file exists in Twig for an image uploaded in a newly created post?
The way I have my post setup is if an image is not uploaded the Twig template will show an empty box with the proportions of where the image should be, but it's a blank box that's awkward to look at.
Question, is if there is a specific command to use with an if statement to check if a file exists if so, display the image code if not do not display the image code.
Image code: (this is the code I want to hide if no image exists to get rid of the empty box)
<div class="entry-thumbnail">
<img width="230" height="172" src="{{ asset(['images/', post.image]|join) }}" class="" alt=""/>
</div>
you could write a twig extension and use some code like this:
use Symfony\Component\Filesystem\Filesystem;
use Symfony\Component\Filesystem\Exception\IOException;
use Symfony\Component\Finder\Finder;
$this->fs=new Filesystem();
if (!$this->fs->exists($directory)) {
$this->logger->info("there is no ".$directory." ...");
} else {
$this->logger->info("Directory ".$directory." already exists.");
}
but i would rather use javascripz like
in your img tag :
<img ... onError="this.src='imagefound.gif';" />
update:
The image Tag has an onError-Handler that triggers when the image in the src attribute is not found. So instead of using this simple inline syntax you could do the same like :
pseudo jquery code:
$(document).on('error','img',function(){
$(this).attr("src","../path/to/placeholerImage.png");
});
I'm trying to write a docpad plugin that will allow me to insert meta tags unique to each page, for example og:title or og:description. I've been able to accomplish this globally with the populateCollections event for global values, but have not been able to do this per page.
I'd like for this to work without the need for a template function so that the meta tag is inserted automatically based on the document's meta. One way might be to grab the contentRendered value in the writeBefore event and do string manipulation that way, but that seems hacky.
Any ideas?
This worked for what I needed. Basically, I'm getting the rendered content right before the file is written using the writeBefore event, and doing a very simple string replace which adds the meta tags and their unique values, which is pulled from the model in the collection.
writeBefore: (opts) ->
docPad = #docPad
templateData = docpad.getTemplateData()
siteUrl = templateData.site.url
for model in opts.collection.models
if model.get('outExtension') == 'html'
url = #getTag('og:url', siteUrl+model.get('url'))
title = #getTag('og:title', model.get('title'))
content = model.get('contentRendered')
if content
content = content.replace(/<\/title>/, '</title>'+url+title+description)
model.set('contentRendered', content)
# Helper
getTag: (ogName, data) ->
return "\n <meta property=\"#{ogName}\" content=\"#{data}\" />"
Great answer David, leaving this one if someone faced the same issue I did.
Check if meta tag is broken, if it is - don't render:
renderBefore: (opts) ->
for model in opts.collection.models
if model.get('date').toLocaleDateString()=='Invalid Date'
model.set('write', false)
docpad.log model.get('title')+' has broken date format!\n\n\n\n\n'
false
I am using partials in with collections. Adding what is needed in the document like this:
```
title: Meetings and Events
layout: page
description: "This is my custom description."
tags: ['resources']
pageOrder: 3
pageclass: rc-events
```
I needed a custom CSS class by page. Then you can call it in your default template like this.
<div id="main" class="container <%= #document.pageclass %>">
Should be the same for meta
<meta name="description" content="<%= #document.description) %>" />
or check your docpad.coffee file and put together helper function for prepared content based off of a default site value combined with a #document value. Then you can just call something like the default:
<meta name="description" content="<%= #getPreparedDescription() %>" />
Which is built by this helper function:
# Get the prepared site/document description
getPreparedDescription: ->
# if we have a document description, then we should use that, otherwise use the site's description
#document.description or #site.description
i have been working on this problem for hours.
I have a form, with a textarea. I use the nicEdit texteditor. It replaces the textarea and shows a nice text editor, because i want my users to add some style to their content.
I use codeIgniter (PHP), and i use the form_helper to create the form. Also i use the form_validation for ss-validation and jquery validation for cs-validation
When i click submit, the form submits seemingly fine. I say this because i use fiddler (an http logger) and i see my text with the right html tags wrapped around it by the text editor.
but when i get the #_pots data in the view, somehow some part of the tags have been removed.
How fiddler traces the HTTP call and the submitted form data (seems correct)
Hello SO, <br><br>
<span style="font-weight: bold;">the following line should be bold</span><br><br>
<span style="font-style: italic;">the following line should be italic</span><br><br>
<span style="text-decoration: underline;">the following line should be underlined</span><br>
How my html looks in my view and in my print_r result from my #_post data
Hello SO,<br><br>
<span bold;"="">the following line should be bold</span><br><br>
<span italic;"="">the following line should be italic</span><br><br>
<span underline;"="">the following line should be underlined</span><br>
It looks like somehow, when i get my data back, it removes the style="font-weight
Does $_post do anything with special characters?!?! has someone experienced similar issues with this?
all responses are greatly appreciated.
You need extend the CI_Security class from Codeigniter and comment/remove/modify this line:
/*
if(in_array($_SERVER['REQUEST_URI'],$allowed))
{
$evil_attributes = array('on\w*', 'xmlns');
}
else
{
$evil_attributes = array('on\w*', 'style', 'xmlns');
}
*/