CKEditor config doesn't change text to right-to-left - ckeditor

I have edited config.js to
CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here. For example:
config.language = 'ar';
config.contentsLangDirection = 'rtl';
contentsLanguage:'ar';
config.dialog_buttonsOrder = 'rtl';
};
But I still get the editor to be left-to-right in my Question2Answer platform. What should I do else to make my editor right-to-left?

Following HTML and Script worked for me, instead of using the global configuration file for application i used inline configuration as below -
HTML
<textarea id="editor" name="editor1"><p>Initial value.</p></textarea>
Script
<script type="text/javascript">
CKEDITOR.on('dialogDefinition', function (ev) {
// Take the dialog name and its definition from the event data.
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
// Check if the definition is from the dialog we're
// interested in (the 'image' dialog).
if (dialogName == 'image') {
// Get a reference to the 'Image Info' tab.
var infoTab = dialogDefinition.getContents('info');
// Remove unnecessary widgets/elements from the 'Image Info' tab.
infoTab.remove('browse');
infoTab.remove('txtHSpace');
infoTab.remove('txtVSpace');
infoTab.remove('txtBorder');
infoTab.remove('txtAlt');
infoTab.remove('txtWidth');
infoTab.remove('txtHeight');
infoTab.remove('htmlPreview');
infoTab.remove('cmbAlign');
infoTab.remove('ratioLock');
}
});
CKEDITOR.config.contentsLangDirection = 'rtl';
CKEDITOR.replace('editor');
</script>

Related

Rich Text Editor (WYSIWYG) in CRM 2013

Sometimes it is useful to have the HTML editor in CRM interface. It is possible to implement the editor directly to CRM 2013. As editor we will use ckeditor which allows to use it without installation on the server.
Identify the field where you would like to use the rich text editor.
Create html-webresource which will define ckeditor. Go to Settings-Customizations-Customize the System-Web Resources.
In html editor of web resource, select the Source tab and insert the following code:
<html>
<head>
<title></title>
<script src="//cdn.ckeditor.com/4.4.7/standard/ckeditor.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
function getTextFieldName()
{
var vals = new Array();
if (location.search != "")
{
vals = location.search.substr(1).split("&");
for (var i in vals)
{
vals[i] = vals[i].replace(/\+/g, " ").split("=");
}
//look for the parameter named 'data'
for (var i in vals)
{
if (vals[i][0].toLowerCase() == "data")
{
var datavalue = vals[i][2];
var vals2 = new Array();
var textFieldName = "";
vals2 = decodeURIComponent(datavalue).split("&");
for (var i in vals2)
{
var queryParam = vals2[i].replace(/\+/g, " ").split("=");
if (queryParam[0] != null && queryParam[0].toLowerCase() == "datafieldname")
{
textFieldName = queryParam[1];
}
}
if (textFieldName == "")
{
alert('No "dataFieldName" parameter has been passed to Rich Text Box Editor.');
return null;
}
else
{
return textFieldName;
}
}
else
{
alert('No data parameter has been passed to Rich Text Box Editor.');
}
}
}
else
{
alert('No data parameter has been passed to Rich Text Box Editor.');
}
return null;
}
CKEDITOR.timestamp = null;
​// Maximize the editor window, i.e. it will be stretched to target field
CKEDITOR.on('instanceReady',
function( evt )
{
var editor = evt.editor;
editor.execCommand('maximize');
});
var Xrm;
$(document).ready(function ()
{
​ // Get the target field name from query string
var fieldName = getTextFieldName();
var Xrm = parent.Xrm;
var data = Xrm.Page.getAttribute(fieldName).getValue();
document.getElementById('editor1').value = data;
/*
// Uncomment only if you would like to update original field on lost focus instead of property change in editor
//Update textbox on lost focus
CKEDITOR.instances.editor1.on('blur', function ()
{
var value = CKEDITOR.instances.editor1.getData();
Xrm.Page.getAttribute(fieldName).setValue(value);
});
*/
// Update textbox on change in editor
CKEDITOR.instances.editor1.on('change', function ()
{
var value = CKEDITOR.instances.editor1.getData();
Xrm.Page.getAttribute(fieldName).setValue(value);
});
// Following settings define that the editor allows whole HTML content without removing tags like head, style etc.
CKEDITOR.config.allowedContent = true;
CKEDITOR.config.fullPage = true;
});
</script>
<meta>
</head>
<body style="word-wrap: break-word;">
<textarea class="ckeditor" cols="80" id="editor1" name="editor1" rows="10"></textarea>
</body>
</html>
Note:
As you can see, there are a few important sections
a) The following code loads the ckeditor and jquery from web so that they don't have to be installed on server.
<script src="//cdn.ckeditor.com/4.4.7/standard/ckeditor.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
b) Function getTextFieldName() which gets the name of target field where should be rich text editor placed. This information is obtained from query string. This will allow to use this web resource on multiple forms.
c) Initialization of ckeditor itself - setting the target field and properties of ckeditor. Also binding the editor with predefined textarea on the page.
Open the form designer on the form where you would like to use ​WYSIWYG editor. Create a text field with sufficient length (e.g. 100 000 chars) which will hold the html source code.
Insert the iframe on the form. As a webresource use the resource created in previous steps. Also define Custom Parameter(data) where you should define the name of the text field defined in step 4. In our situation we created new_bodyhtml text field so the parameter holds this value. This value is returned by the getTextFieldName() of the web resource.
Do not forget to save and publish all changes in CRM customization otherwise added webresources and updated form are not available.
That's all, here is example how it looks like:
Yes, you can use CKEditor, but when I implemented the CKEditor on a form, it turns out it is quite limited in the functionality in provides. Also, the HTML it generates leaves much to be desired. So, I tried a similar idea to Pavel's but using a backing field to store the actual HTML using TinyMCE. You can find the code here:
Javascript
HTML
Documentation
I have package my solution as a managed and unmanaged CRM solution that can be imported and utilised on any form. Moreover, it works on both CRM 2013 and CRM 2015

Set the focus to the editor after a widget is added in ckeditor

How can I set the focus to the editor in CKEditor after a widget is added?
I don't want that the widget stays in focus
have you added startupFocus : true to your config file?
Look up: http://ckeditor.com/forums/CKEditor-3.x/Set-focus-load
An excerpt from my custom config file looks something like this
CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here. For example:
config.extraPlugins = 'confighelper';
config.autoGrow_onStartup = true;
config.autogrow_minheight = 50;
config.autogrow_maxheight = 200;
config.contentsLangDirection = 'ui';
config.startupFocus = true;
//more options...
};

AngularJS - how to display a custom text in a disabled textbox

I have the following input control:
<input type="ng-model="someValue" ng-disabled="shouldBeDisabled"/>
and a model with following variables:
someValue - the value that should be displayed in INPUT when shouldBeDisabled==fals
shouldBeDisabled - if the INPUT should be disabled
disabledText - the text that should be displays in INPUT instead of someValue when shouldBeDisabled==true
How should I change the above HTML slipet to implement this with AngularJS?
Is it possible to implement this with build-in AngularJS directives with just these three model variables? Or do I need to introduce another variables (such as someValueForInputBox) and take care to synchonizing it with someValue (when not disabled) or disabledText (when disabled)?
You can do this by the following though you might want to put a watch on shouldBeDisabled;
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.shouldBeDisabled = true;
$scope.toggleIt = function() {
$scope.shouldBeDisabled= ! $scope.shouldBeDisabled;
$scope.someValue= $scope.shouldBeDisabled && $scope.disabledText || "true value"; // modify as required or leave off the true part.
}
});
You could also store the value so when the disabled text comes up and then toggles back you can repopulate it. Here it is with a watch.
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.shouldBeDisabled = true;
$scope.disabledText = 'disabled stuff';
$scope.maintainTrueValue = '';
$scope.$watch('shouldBeDisabled', function() {
if ($scope.shouldBeDisabled)
$scope.maintainTrueValue = $scope.someValue;
$scope.someValue= $scope.shouldBeDisabled && $scope.disabledText || $scope.maintainTrueValue;
});
$scope.toggleIt = function() {
$scope.shouldBeDisabled= ! $scope.shouldBeDisabled;
}
});
Demo with watch: http://plnkr.co/edit/8KAJc9JXvi2rffsjPXF5?p=preview
You could use ng-show/ng-hide to swap out the input like so:
<input ng-model="disabledText" ng-show="shouldBeDisabled" disabled/>
<input ng-model="someValue" ng-hide="shouldBeDisabled"/>
Here is a fiddle: http://jsfiddle.net/SVxCe/

CKEDITOR default tabble width

How do i change the default width of the tables in CKEditor, without doing it manualy in the dialog?
For example, the default is 500, and i want it to be 400.
Regards,Elkas
I Found the answer.
In the plugins folder, look for the table folder and table.js.
Do a litle search by the number "500" (it will be near a id:txtWidth) and change it to the value you want.
Pay attention because on the top of the file there is a minWidth.
Thanks for you're answer guys.
Regards,Elkas
For CKEditor 4, you can define a default width in your config (this info from the CKEditor forums). Open config.js and paste this at the end of it, replacing '100%' with your desired default width:
// http://ckeditor.com/comment/129258#comment-129258
CKEDITOR.on( 'dialogDefinition', function( ev ) {
// Take the dialog name and its definition from the event data.
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
// Check if the definition is from the dialog we're
// interested in (the "Table" dialog).
if ( dialogName == 'table' ) {
// Get a reference to the "Table Info" tab.
var infoTab = dialogDefinition.getContents( 'info' );
txtWidth = infoTab.get( 'txtWidth' );
txtWidth['default'] = '100%';
}
});
Not sure what you mean by 'the dialog'.
Using javascript code...
config.width = 850;
config.width = '75%';
I found this in the docs.
http://docs.cksource.com/CKEditor_3.x/Howto/Editor_Size
Is this any help?

CKEditor: Customized HTML on inserting an image

I'm using CKEditor 3.5 to provide WYSYWYG editing in a website. When inserting an image you can provide width and height of the image, which results in HTML like follows:
<img alt="" src="/Images/Sample.png" style="width: 62px; height: 30px; " />
Since this does the resizing in the browser and in other places on the same website I use Nathanael Jones' Image Resizing Module, I'd like to get the following output instead:
<img alt="" src="Images/Sample.png?width=62&height=30" />
Is there an easy way to control the generated HTML or have I really to write my own dialog/plugin for CKEditor?
EDIT:
Adding the following lines to config.js was the solution that eventually worked for me:
CKEDITOR.on('dialogDefinition', function (ev) {
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
var dialog = dialogDefinition.dialog;
var editor = ev.editor;
if (dialogName == 'image') {
dialogDefinition.onOk = function (e) {
var imageSrcUrl = e.sender.originalElement.$.src;
var width = e.sender.originalElement.$.width;
var height = e.sender.originalElement.$.height;
var imgHtml = CKEDITOR.dom.element.createFromHtml('<img src=' + imageSrcUrl + '?width=' + width + '&height=' + height + ' alt="" />');
editor.insertElement(imgHtml);
};
}
});
The next problem is then, when editing an image, the width and height naturally are in the URL field and are missing in the dedicated fields for width and height. So I need to come up with a solution for the reverse... :-)
I kind of had the same problem, I needed to remove those attributes from the generated HTML for the image, so what I did was to override the onOK method of the uploader and insert the image element manually using the CKEditor's API, something like this:
CKEDITOR.on('dialogDefinition', function(ev) {
// Take the dialog name and its definition from the event data
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
var editor = ev.editor;
if (dialogName == 'image') {
dialogDefinition.onOk = function(e) {
var imageSrcUrl = e.sender.originalElement.$.src;
var imgHtml = CKEDITOR.dom.element.createFromHtml("<img src=" + imageSrcUrl + " alt='' align='right'/>");
editor.insertElement(imgHtml);
};
}
}
This has worked for us so far.
Look at the "output html" sample, you can find there some code that changes the dimensions in images from styles to attributes, so you can adjust it to rewrite the URL.
I don't have enough points to comment on that previous answer. but in respect to your error: CKEDITOR.currentInstance returns undefined.
That is strange because CKEDITOR is global, but you shouldn't have to resort to that.
Within the OK function invocation, you have access to "editor", you shouldn't have to get the instance.
just a suggestion.
Best bet might be to "recreate" the src (and possibly the style) field's behavior. I've do something similar. (but not as complex)
Start with the original code (from plugins/dialog/image.js) and create setup and commit logic that produces (and parses) the markup you're looking for.
Then during dialog definition
Delete Originals
Add your "custom" fields
style field not sure, maybe just leave it in the dialog, but stub out it's commit logic.
I added my field to the dialog...
var infoTab = dialogDefinition.getContents( 'info' );
// Move the ID field from "advanced" to "info" tab.
infoTab.add( idField_config);
var idField_config = {
type : 'text',
label : 'Name',
id : 'linkId',
setup : function( type, element ) {
//if ( type == IMAGE )
this.setValue( element.getAttribute( 'id' ) );
},
commit : function( type, element ) {
//if ( type == IMAGE ) {
if ( this.getValue() || this.isChanged() )
element.setAttribute( 'id', this.getValue() );
//}
}
};
Issues I faced.
New fields get added to end of
dialog.
Pieces of the original code
( type == IMAGE ) isn't valid (Love to know why but felt comfortable it was safe to comment for my usage)
You might face problems with the markup rules undoing your hard work, but "output html" sample" suggestion should help you weed through that issue.

Resources