CKeditor v4 with RTL and LTR on the same page - javascript

I have multiple instances of CKeditor 4 on a page. One with an English translation, one with French and one with Arabic. I have tried tweaking to config file upon each firing of the editor instance. However, it always displays the last configuration used and applies to all the textareas. I have been using:
CKEDITOR.config.contentsLangDirection = 'rtl';
What I really need to do is use something that manipulates just that instance rather than the global config.

You can create a custom config file for each instance of CKEditor you have in the page.
Then reference the custom config file like this:
CKEDITOR.replace( 'editor1', {
customConfig: '/custom/ckeditor_config_ltr.js'
});
CKEDITOR.replace( 'editor2', {
customConfig: '/custom/ckeditor_config_rtl.js'
});
Then you can define your language direction in the different config files.
You can find more here: CKEditor support

Related

CKEditor5 react component - add plugins problems

In adding the CKEditor5 component to my React application, I discovered that I need to add more plugins - which I have done, adding and rebuilding editor per docs, specifically adding:
import Alignment from '#ckeditor/ckeditor5-alignment/src/alignment';
import Font from '#ckeditor/ckeditor5-font/src/font';
import Highlight from '#ckeditor/ckeditor5-highlight/src/highlight';
and rebuilding. First issue:
I have seen a few places where this:
Array.from( editor.ui.componentFactory.names() );
should give me a list of the toolbar items so I can verify that I have what I need.. I updated to use the name of the editor that I am using, so:
Array.from( ClassicEditor.ui.componentFactory.names() );
Which fails because there is no "ui" in ClassicEditor... what am I missing here?
Second - now that I have installed plugins, and rebuild ckeditor.js, I'm trying to make sure that I add this new stuff to my existing React project - there is a public/ckeditor directory in there. I assumed that I should take the ckeditor.js from the "ckeditor5-build-classic/build/" directory, and put it into public/ckeditor. But where do I get the actual plugins? there seems to be a set in ckeditor5-build-classic/node_modules/#ckeditor, but that didn't seem to work. Thoughts?
I have seen a few places where this:
Array.from( editor.ui.componentFactory.names() );
should give me a list of the toolbar items so I can verify that I have what I need.
I updated to use the name of the editor that I am using, so:
Array.from( ClassicEditor.ui.componentFactory.names() );
ClassicEditor is a class, not an instance.
You have to do sth like this:
ClassicEditor.create( el, config ).then( editor => {
console.log( Array.from( editor.ui.componentFactory.names() ) );
} );
to get all available toolbar buttons.
Second - now that I have installed plugins, and rebuild ckeditor.js, I'm trying to make sure that I add this new stuff to my existing React project - there is a public/ckeditor directory in there. I assumed that I should take the ckeditor.js from the "ckeditor5-build-classic/build/" directory, and put it into public/ckeditor. But where do I get the actual plugins? there seems to be a set in ckeditor5-build-classic/node_modules/#ckeditor, but that didn't seem to work. Thought
When you build an editor outside of the React component, all plugins you require should be bundled to the build so all you need is to copy the built editor to the React project. It's described here.

Magnolia 5.5.5 Custom Content Editor App (Stories) Custom CKEditor Config

I have got the following problem:
I want to add a customConfig to the ckeditor of the RichTextBlock.
Therefore I want to overwrite the content_editor_config.js which is a static final in TextBlockWidget.java. How can I do this?
I can see two options:
Extend the class and change the references to the new one (don't forget to compile the widgetset since it's client side code)
Directly modify the content_editor_config.js file which seems to be the easier option if you want to modify all TextBlocks
Hope that helps,
Cheers,

How to display check mark character in jQuery datatables PDF export

I have the following table which uses the datatables plugin for pagination, sorting and exporting.
Everything works great except the check mark in my html is not exported with the pdf, yet it is with excel. I want to get this working because I am going to remove the checkbox element in favour of clicking the table cell and toggling whether the check mark is present. I really want to avoid using 'Y'/'N' as indicators in any part of the table/exports.
Has anyone come across this issue before or can offer any light, my instinct tells me it's something to do with the character encoding in PDF export library, but I don't want to go just go in and start editing library files because this issue (may)will be repeated if I ever need to upgrade the lib. In addition, I'm not totally sure what to look for.
HTML
Excel
PDF
While writing a PDF, use unicode string for check mark exactly as below:
&#10003 followed by ;
like
<table border="2"><tr><td><Check mark: </td><td>✓</td></tr></table>
PROBLEM:
jQuery's Datatables uses pdfmake library for its eporting in PDF.
pdfmake uses only one font 'Roboto' as it's text font and as it so happens its char-set doesn't support the '✓' symbol.
You can have a look at all the characters 'Roboto' , pdfmake and subsequently Datatables supports here: https://www.fontspace.com/font-charmap/21071
This information was found at: https://github.com/bpampuch/pdfmake/issues/1478
SOLUTION:
You can change the font that Datatables uses when exporting to pdf using pdfmake to something that support the character symbol '✓'
create a new vfs_fonts.js file containing your font files
Create the examples/fonts subdirectory in your pdfMake code directory, if it doesn’t already exist.
Copy your fonts (and other files you wish to embed) into the examples/fonts subdirectory.
Run npm install (from the pdfMake directory) to ensure all prerequisites modules are installed.
Run gulp buildFonts to create a new build/vfs_fonts.js (you can update gulpfile.js to change the base directory path or to add an alternative config for the buildFonts task).
Include your new build/vfs_fonts.js file in your code (in the same way you include pdfmake.js or pdfmake.min.js).
The above buildFonts action embeds all files from examples/fonts (into a local key/value variable pdfMake.vfs) - not only fonts. Which means you could put images in there, run gulp buildFonts, and reference them by filename in your doc-definition object.
include this newly created font file in your document
<script type="text/javascript" src="./pdfmake-0.1.37/vfs_fonts.js"></script>
add your fonts to pdfmake
pdfMake.fonts = {
Arial: {
normal: 'arial.ttf',
bold: 'arialbd.ttf',
italics: 'ariali.ttf',
bolditalics: 'arialbi.ttf'
}
};
Add your font to the Datatable
buttons = [
{
customize: function (doc) {
doc.defaultStyle =
{
font: 'Arial'
}
}
}
]
Some helpful links:
DataTables & PDFmake - question on how to set a new font to the datatable
https://datatables.net/forums/discussion/51827/how-i-change-font-family-in-pdf-export - datatable community question on how to change the font family.

Dynamically load Web Components / HTML Imports?

How would you go about dynamically loading a web component - in response to a url route change for example?
I won't know the requested component ahead of time, so could you simply use JavaScript to write the HTML import and then add the code to the page, or are there implications with this? Perhaps Google Polymer helps?
Considering just Custom Elements, you can call document.registerElement whenever you want. So from that standpoint, you can dynamically load script using any well known method and have dynamic custom elements.
Now, with respect to HTML Imports:
could you simply use JavaScript to write the HTML import and then add
the code to the page
Yes, that's the basic idea.
Recent versions of the HTML Imports polyfill support dynamic link tags. IOW, you can do
var link = document.createElement('link');
link.setAttribute('rel', 'import');
link.setAttribute('href', some_href);
link.onload = function() {
// do stuff with import content
};
document.body.appendChild(link);
Also, Polymer has enhanced support for this feature, namely an imperative api like this:
Polymer.import([some_href], function() {
// called back when some_href is completely loaded, including
// external CSS from templates
});
The first argument is an array, so you can ask for multiple hrefs.
Hi I asked this question over at the polymer google groups.
https://groups.google.com/forum/#!topic/polymer-dev/uarVrxBK7XU
and was directed to this article
http://www.html5rocks.com/en/tutorials/webcomponents/customelements/#instantiating
This makes it clear you can instantiate an element on the fly by either adding the element to the dom or programatically. However this appears to imply that you've loaded the html imports at runtime. What I think we both want to achieve is loading the html imports (with additional css and js includes) using ajax and then add our element. I'm going to link back to the polymer support forum to see if I can get an answer over here.

ckeditor and codemirror, conflicts with plugin with same name

I am trying to use both ckeditor and codemirror
The problem is because ckeditor has a plugin also called codemirrow
Is there anyway to make them work together?
Basically... rename one of the plugins. Change directory name and the name of registered plugin in the line:
CKEDITOR.plugins.add( someNewName, { ... } );
Then check whether the plugin refers to itself somewhere inside of own body via editor.plugins. Correct it if necessary (most likely there's nothing like that).
If there are some dialogs with redundant names, repeat the process by changing:
CKEDITOR.dialog.add( someNewName, function( editor ) { ... } );
Finally, change your configuration file so it loads the renamed plugin. That's all. That was easy, wasn't it? ;)

Categories

Resources