CKEditor text alignment toolbar buttons - javascript

Unable to make text alignment buttons show up on CKEDITOR inline implementation. Tried with v4.1.1 and v4.1.2 on p,div but no luck. Inlineall.html sample file works but as soon as CKEDITOR is loaded in our application(node.js), all works but the alignment buttons.
What could be wrong here? What should I be looking at?
thanks in advance

First of all: check whether CKEDITOR.instances.yourInstance.plugins.justify is present. This is the first thing you got to know.
If the plugin is loaded in your instance, then I'm sure that the problem is Advanced Content Filter. For some reason, your instance doesn't allow the content required by the justify plugin to run. In such case, the feature is out. You got to configure config.(extra)allowedContent for your instance to have it working. If you don't use config.indentClasses, most likely something like this would solve your problem:
config.extraAllowedContent = 'p,div{text-align}';

For CKeditor V4 to enable text alignment options in the toolbar add the bellow inside your config.
config={{extraPlugins: ['justify'],}}

Related

How to remove the functionality of printing in the file viewer.js on Prebuilt Pdfjs from mozilla?

How to remove the functionality of printing in the file viewer.js on Prebuilt Pdfjs from mozilla?
In this file, too much code(~10K) and I can not understand, how there it is implemented. Help please, at least explain how it is in this file is implemented. Advance thanks.
Since, removing or commenting out the HTML element throws error, remove or comment the following lines from viewer.js to remove Print, Download, Open features (you can also remove any one of these since you only need to remove print):
eventBus.on('beforeprint', _boundEvents.beforePrint);
eventBus.on('afterprint', _boundEvents.afterPrint);
eventBus.on('openfile', webViewerOpenFile);
eventBus.on('print', webViewerPrint);
eventBus.on('download', webViewerDownload);
And as a precuation I would suggest disabling the document property request by disabling the concerned event too, so remove or comment
eventBus.on('documentproperties', webViewerDocumentProperties);
For being on the safe side, also remove or comment the eventBus.off for each of the events above. For example:
eventBus.off('print', webViewerPrint);
I couldn't tell you the line numbers of these codes exactly since my viewer.js has been modified beyond restoration to it's original form.
Finally, add hidden attribute to the HTML elements or figure out some other way to hide it, but whatever you do, do not remove or comment the HTML elements.

TinyMCE integration - Plugins won't show

I apologize in advance if this is not the right forum for this question, but since I am in desperate need of help I hope you may want to help me out.
I am using TastyIgniter Online Ordering System for a project. The system has a description textbox where you can add information about the product. However, it is only a plain textbox without additional functionality like strong tags and it won't keep the formatting.
I downloaded tinymce, put the script files in the js folder, and added these lines of code into the PHP file:
<script src="http://localhost/assets/js/tinymce/tinymce.min.js"></script>
<script>tinymce.init({ selector:'textarea' });</script>
Hooray, it works partly. The textbox now has some of the functionality. It keeps the formatting and I am able to add bold, italic style to the text. Although, plugins like the image, table, hyperlink 'plugins' won't show at all. Is it possible that the textbox itself is restricted and then keeps the TinyMCE from showing these buttons or is something else wrong?
Thank you in advance.
You need to expand your TinyMCE init to include the plugins and toolbar/menu options you want displayed.
Take a look at this basic example of TinyMCE:
https://www.tinymce.com/docs/demo/full-featured/
If you look at the JS tab of the example you will see there are many options available for TinyMCE in the init.

How to add code tags in aloha editor...?

I would like to add code tag to my aloha editor. can any one please tell me how to add the 'code' to aloha editor
According to the documentation it should be possible with the format-plugin http://aloha-editor.org/guides/plugin_format.html, but activating "code" in the settings does not work. Looking at the current sources the support for the "code"-element seems to be missing or still a todo. (https://github.com/alohaeditor/Aloha-Editor/blob/alohaeditor-0.25.4/src/plugins/common/format/lib/format-plugin.js)
Either you write your own Aloha-Plugin for this functionality (http://aloha-editor.org/guides/writing_plugins.html) or you can open an issue on the Aloha-Editor Github page (https://github.com/alohaeditor/Aloha-Editor/issues) and wait until it is fixed.

resize images using NicEdit

I am testing and looking for a wysiwyg editor and I found a pretty functional one called nicEdit. Problem is that using firefox all functions are working properly but using chrome, when image is placed, resize option frame doesn't work! How to solve it? If not, any other similar one? Some functions of Tiny MCE are not working with chrome too. Thank you.
Use nicEdit and alter code this way in nicEdit.js:
var nicImageButton=nicEditorAdvancedButton.extend({addPane:function(){this.im=this.ne.selectedInstance.selElm().parentTag("IMG");this.addForm({"":{type:"title",txt:"Add/Edit Immagine"},width:{type:"text",txt:"Width",style:{width:"150px"}},src:{type:"text",txt:"URL",value:"http://",style:{width:"150px"}},alt:{type:"text",txt:"Alt Text",style:{width:"100px"}},align:{type:"select",txt:"Align",options:{none:"Default",left:"Left",right:"Right"}}},this.im)},submit:function(B){var C=this.inputs.src.value;if(C==""||C=="http://"){alert("You must enter a Image URL to insert");return false}this.removePane();if(!this.im){var A="javascript:nicImTemp();";this.ne.nicCommand("insertImage",A);this.im=this.findElm("IMG","src",A)}if(this.im){this.im.setAttributes({width:this.inputs.width.value,src:this.inputs.src.value,alt:this.inputs.alt.value,align:this.inputs.align.value})}}});nicEditors.registerPlugin(nicPlugin,nicImageOptions);
you have to add simply
,width:{type:"text",txt:"Width",style:{width:"150px"}}
and
width:this.inputs.width.value,
to add the option to insert width parameter.
Here is a full code with height edit option, in addition to the width
based on what Yuri Refolo explained
var nicImageButton=nicEditorAdvancedButton.extend({addPane:function(){this.im=this.ne.selectedInstance.selElm().parentTag("IMG");this.addForm({"":{type:"title",txt:"Add/Edit Image"},width:{type:"text",txt:"Width",style:{width:"150px"}},height:{type:"text",txt:"Height",style:{width:"150px"}},src:{type:"text",txt:"URL",value:"http://",style:{width:"150px"}},alt:{type:"text",txt:"Alt Text",style:{width:"100px"}},align:{type:"select",txt:"Align",options:{none:"Default",left:"Left",right:"Right"}}},this.im)},submit:function(B){var C=this.inputs.src.value;if(C==""||C=="http://"){alert("You must enter a Image URL to insert");return false}this.removePane();if(!this.im){var A="javascript:nicImTemp();";this.ne.nicCommand("insertImage",A);this.im=this.findElm("IMG","src",A)}if(this.im){this.im.setAttributes({width:this.inputs.width.value,height:this.inputs.height.value,src:this.inputs.src.value,alt:this.inputs.alt.value,align:this.inputs.align.value})}}});nicEditors.registerPlugin(nicPlugin,nicImageOptions);

TinyMCE link tool - how to add CSS styles to links dynamicaly?

I have searched around but wasn't able to find a solution.
What I want to find out is a way to edit the tinyMce link plugin (or make an edited copy of it) to work in a way that adds specific styling within the link tag, and the ability to specify in the initialization of the plugin what style to add, so that it can be done dynamically. So that I can have result like this(for example):
<a style="color:#00FFFF" href="www.google.com">Google</a>
Any solutions for this? Or a point in the best general direction?
Thanks
In this case i think the best is to wait until the link has been inserted and then do the following action assuming your color has been set in the tinymce init like my_link_color: 'green',
$(ed.getBody()).find('a').attr('style','color:'+ed.getParam("my_link_color"));

Categories

Resources