I'm currently creating html template designs in Laravel which are outputted as PDF documents and would like to use the font-awesome icons within the PDF documents.
I have tried the following syntax:
$fontname = TCPDF_FONTS::addTTFfont('fontawesome-webfont.ttf', 'TrueTypeUnicode', '', 96);
$bod = '<span style="font-family:FontAwesome;font-size: 2em;"></span>';
PDF::writeHTML(nl2br($bod), true, false, true, false);
However when viewing the PDF document regardless of which hex code is used to display the icon its just displays a question mark. How can this issue be resolved?
Instead of inline styles, try setting the font with setFont() before displaying $bod:
PDF::setFont('FontAwesome','',20);
PDF::writeHTML(nl2br($bod), true, false, true, false);
Possible, you will need to open the font definition file, generated by your addTTFFont and check it for the proper font name to use with setFont() (in my example, i assumed it to be FontAwesome).
Also, pay attention to the difference between addTTFFont and addFont methods. You only need to call addTTFFont once — it will create needed files from your TTF. After that, you can add them with addFont method, using proper name (see the generated font definition file for it).
Related
I'm struggling with ckeditor 4.5, as I'm creating plugins to insert specific tags in current document after having uploaded a file on my server.
For some specific file types, I want to embed the element. I can add <audio> or <video> tags (by using allowContent=true in my config file), but when I insert an <object> tag (to embed a pdf file), the tag is just ignored.
I already tested adding config.extraAllowedContent = 'object[id, name, width, height, data, type] to the config file, with no avail.
I found some workarounds by adding a <div> around the <object>, but the pdf viewer is not displayed in the editor (but the <object> tag is there).
I think I'm doing something wrong with ACF, but I really don't see what.
only wrapped the tag with or , and if you use wordpress , or drupal try to disable Advanced content filter from cms
<object> is not recommended for PDF and should not be a part of an editable area. There is no way it can be editable like text or paragraph. However, it can be a non-editable element inside the editor, with some editable parts. This is what CKEditor call widget, here is a tutorial how to create it: https://ckeditor.com/docs/ckeditor4/latest/guide/widget_sdk_intro.html
Note PDF format is not normally classed as "Media" more generally "Document" but there are two ways to embed. One is to use the allMedia plugin that does include PDF as a media format ;-) the other is to include content via google docs. So review the various "Demonstrations" on the website.
whether it be ckeditor themes, or codesnippet themes, where are the actual string values to pass as arguments to the config options? I'm having trouble finding the actual string values, or something pointing to the convention/pattern the value follows.
The ckeditor documentation is huge, and the links send you around in circles, referring you to generic documentation pages, but either the actual string values for possible arguments are not available.
the one example for plugins follows all lower case, no separation between words.
the highlight js themes that ckeditor requires seems to be snake case, but some are inconsistent and not working.
For instance, I'm looking to find values for
<script>
CKEDITOR.replace( 'editor1', {
skin: 'kama',
codeSnippet_theme:'tomorrow_night_dark'
} );
</script>
http://cdn.ckeditor.com/4.4.7/full-all/plugins/codesnippet/lib/highlight/styles/
A link to to this in the ckeditor documentation would help, with a short liner saying to copy the file name excluding the paths and the file type suffixes.
reference the file name without the .css suffix to get the correct string format for the codeSnippet_theme,
the files are named inconsistently.
you might think you need
'atelier_forest_dark', since 'school_book' works, but it's actually
'atelier-forest.dark'
It's also
'tomorrow-night-bright'
hybrid, which is available from the demos is not available from this list of CDN files hosted by ckeditor.
I'm using Uploadcare for uploading and storing images, which is working.
However, it appears CKEditor 4.1.1 is choking on these images.
Adding an image via CKEditor.
The initial placement of the image is as expected. However, when the data is saved, CKEditor is clearly doing something weird, prior to committing the data.
In several tests, during the formatting and rearrangement of the HTML, CKEditor is stripping out the "style" image attribute and the first opening double quote, which I can see in the text data on the database itself.
This behavior is entirely reproducible.
Editing an image via CKEditor.
Initially, the image looks fine. But when I view the source, the HTML for the image is sanitized to render as text, and not to render as an image object.
Disabling 3rd party Plugins.
As mentioned previously, I'm using Uploadcare, in addition to Word Count & Char Count. I disabled both Plugins, but this didn't change anything.
Thoughts.
During the saving process, I merely cleanse the data via the $this->db->escape() function in CodeIgniter, which cannot to circumvented, or the data won't commit and I receive an error.
Just to be clear, during testing, the errors occured with any type of image object; either added manually, or via Uploadcare.
In my view page, I have:
<script type="text/javascript">
CKEDITOR.replace('note', {
allowedContent: true
});
</script>
Which — according to the documentation — "will disable the filter (data will not be filtered, all features will be activated)."
However, it doesn't work and it's doing exactly the same as before; stripping out the style attribute by name and converting the HTML to their regular textual equivalents.
If I chose to define something specifically, that turns almost everything off, including the plugins, and — strangely enough — the very thing I've written a rule for:
<script type="text/javascript">
CKEDITOR.replace('note', {
allowedContent: {
'img': {
styles: 'height, width'
}
}
});
</script>
So I have no idea what's going on.
I've also tried the advice in a thread on their forums where someone is experiencing exactly the same problem as me, but neither methods work, which leads me to believe this is a problem particular to the CKEditor itself, and not the treatment of data in and of itself.
If anyone has any advice as to how I can coax CKEditor into handing images, I'd be happy for any advice.
Setting allowedContent: true for 99.9% would stop CKEditor from stripping images if you did that correctly.
Your allowedContent setting (2nd code sample) is incorrect. It does not allow src and alt attributes. Image without src will be stripped by CKEditor as invalid. So you should have at least:
allowedContent: {
img: {
attributes: '!src, alt', // src is required
styles: 'height, width'
}
}
So point 1. or 2. should work - I did that a lot of times, so I'm pretty sure of that. Thus, I think that you have a 2nd issue with your server breaking something.
The problem here (on top of needing allowedContent: true or properly set up rules) is CodeIgniter's XSS filtering. Before we get access to $_POST (or $_GET/$_REQUEST) CI has already ran filtering over this data and in this case ruined it. This setting can't be overridden on a per-controller basis as it's already run before the controller is loaded.
So you can either disable it altogether in /application/config/config.php (not recommended)
$config['global_xss_filtering'] = FALSE;
Or a less heavy handed approach (but still not ideal) manually disabling it on certain pages (i.e. my example turning it off on all pages under /admin/help). Also in /application/config/config.php.
$config['global_xss_filtering'] = TRUE;
# Override the XSS filtering on /admin/help
if (preg_match("/^\/admin\/help/", $_SERVER["QUERY_STRING"])) {
$config['global_xss_filtering'] = FALSE;
}
I had the exact issues you were having, and this has solved the issue for me.
While creating and learning bootstrap page. I came across the content attribute of css I read few articles and I got how it works. But following code snippet shows me an image icon but the content attribute value really isn't the image url but a code. I'm not clear as how we can show the image without the url and where is the image coming from?
.test.glass i:before {
content: "\e001";
}
Following is the html element to show an image icon using above css:
<span class="test glass"><i></i></span>
But what is "\e001" is that an image code or something else?
they are utf8 codes. there are plenty of sites describing the glyphs for different standard fonts but you can also define your own font set with whatever images you choose as whatever character.
if you use a webfont, from fontello for example but are plenty of sites like that one, you can define what image to use as character \e0001 and whenever you want to use that image, you must make sure you use that font-face for the element and use the utf8 code to display the image. in html it would be someting like <span class="iconfont"></span>. if you add the image with css then is like in your example.
I am Using CKEditor in my application where the users can write blogs, create pages etc..,
Source mode is disabled for the editor. Writing xml in the editor's text area is not retained after saving the content. I clearly see that the content got HTML Encoded and the same is supplied as input to the CKEditor's textarea.
Works as designed. Whatever you enter into the WYSIWYG area, will get HTML encoded. How would you want to behave it differently?
If you want a text editor for writing XML, maybe the answers to this question are useful: Textarea that can do syntax highlighting on the fly?
I too want CKEditor to support XML tags, but I understand that you can't just type them into the main window - anything typed here is assumed to be actual content, not tagging, and therefore gets encoded.
What I'd like to do is define a list of styles that cause a tag of my choosing to be used, e.g. if the user chooses the 'example' style, CKEDitor does <x>content</x>. Unfortunately I haven't had much success with this, despite hacking the dtd.js file.
My current solution is to define a list of styles but map them to a standard HTML tag, then put my desired XML tag name in as an attribute. I'll then need to write some XSLT that transforms the data later.
CKEDITOR.stylesSet.add('myStyles',
[{
name: 'Example sentence',
element: 'span',
attributes: {'class': 'example', 'data-xmlTag': 'x'}
}];
config.stylesSet = 'myStyles';
element specifies a standard HTML tag – I use <span> if I want the XML to be inline and <div> if I want it to be block level. The data-xmlTag attribute says what XML tag I actually wanted to use (x in this case). The class allows me to define some styles in CSS and means I can group several XML tags under one class name. To define some CSS:
config.contentsCss = CKEDITOR.basePath+'tagStyles.css';