how to change the format of snippets placeholder variable in ace editor
if (${1:condition_name}) {
${2:body}
}
the above snippet code will be displayed in the editor as
if(condition_name){
body
}
but i want it as
if(<condition_name>){
<body>
}
i want placeholder variable inside this <>
i have tried the below one but it is not working
if (${1:<condition_name>}) {
${2:<body>}
}
Related
On my current project, users can type text in English and Hebrew languages.
Would be great to define direction automatically, according to the current text. For example, if the text contains Hebrew symbols, the direction should be RTL. But if the text doesn't contain Hebrew, then the direction is LTR.
Text can be changed at any moment, and I think that the best solution is to switch the direction dynamically like it works in the Google Translate service.
I didn't find already done solution and I want to propose my own.
It works pretty simply. Each time, when text has been changed, I'm checking it for Hebrew symbols and I change the text direction if need. To apply changes in config (in my case it's direction of the text), I should destroy and init CKEditor with updated config.
How you can test it:
Try to type something in English
Try to type something in Hebrew, for example, "שם"
Try to remove Hebrew symbols
You will see how the direction in editor will be changed according to current text
Here is the code:
var CKEditorConfig = {
contentsLangDirection: 'ltr',
forcePasteAsPlainText: true
},
editorInstance;
(function () {
// Initialise editor.
function initEditor() {
editorInstance = CKEDITOR.replace('editor', CKEditorConfig);
editorInstance.on('contentDom', function () {
var body = this.document.getBody();
// These listeners will be deactivated once editor dies.
// Input event to track any changes of the content
this.editable().attachListener(body, 'input', function () {
editorOnChange();
});
});
}
// On change callback.
function editorOnChange() {
var text = CKEDITOR.instances['editor'].getData(),
direction = isHebrew(text) ? 'rtl' : 'ltr',
currentDirection = CKEditorConfig.contentsLangDirection;
// Direction was changed -> reinit CKEditor.
if (currentDirection && currentDirection != direction) {
CKEditorConfig.contentsLangDirection = direction;
CKEDITOR.instances['editor'].destroy();
editorInstance = initEditor();
}
}
// Checks is current text uses hebrew language or not.
function isHebrew (text) {
const HebrewChars = new RegExp("[\u05D0-\u05FF]+");
if (!HebrewChars.test(text)) {
return false;
}
return true;
}
// Init editor.
initEditor();
})();
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdn.ckeditor.com/4.7.1/basic/ckeditor.js"></script>
<body>
<textarea id="editor" cols="50" rows="20"></textarea>
</body>
Seems CKEditor cannot be launched here. I see some error.
You can try to launch it right on JSFiddle
One problem: strange but event "input" is not launched for operations like copy-paste in this example, but work in my current application. Seems versions of libraries are the same. But it's not very important for this example.
I hope it will be useful for somebody.
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
I'm trying to separate some contents in the body section of my layout.tpl. For instance, I have carousel slider in my index.tpl, but it's not necessary to include it inside the login.tpl. Moreover, I need to add another page specific contents too. So, layout.tpl, and index.tpl are like in the following:
layout.tpl
body {
headerContents()
div(class:'container') {
div(class:'row') {
div(class:'col-lg-12') {
content()
}
}
}
}
index.tpl
layout 'layouts/layout.tpl',
title:'Home',
headerContents: contents {
h1('Test Header')
}
content: contents {
h1('Test Content')
}
But h1('Test Content) cannot be rendered. I checked the docs but I couldn't find anything about how to render two different contents. Does template engine support to do this or not?
I want to use KendoUI editor to basically only allow users to format text into paragraphs. Possibly allow bold and underline.
I'm struggling with 2 things:
I want to strip all html formatting from text when pasting
I want to disable keyboard shortcuts for bold, underline etc - they seem to work even when toolbar element is not there.
Thanks!
For pasting the only the text you might define a paste handler that remove all but text. This is as simple as:
$("#editor").kendoEditor({
paste: function (ev) {
ev.html = $(ev.html).text();
}
});
The paste handler receives as argument an event that has in html the text being parsed. We can use jQuery for getting only the text using $(ev.html).text()
For removing the shortcuts, and as far as I could test it with latest Kendo UI version, if you define only the tools that you want, only those shortcut are active. So if you say something like:
$("#editor").kendoEditor({
tools: [
"italic"
],
paste: function (ev) {
ev.html = $(ev.html).text();
}
});
Only italic shortcut <ctrl>+i is available. If you leave tools array empty then you do not have any.
This can be easily achieved now with pasteCleanup option.
See here: http://docs.telerik.com/kendo-ui/controls/editors/editor/pasting
Kendo MVC has also extension for this purpose. Example of usage:
.PasteCleanup(x => x.KeepNewLines(false))
false in this case means that you want to clear everything except new lines.
for me this is the complete solution
pasteCleanup: {
custom: function (html)
{
html = html.replace(/<\s*br\/*>/gi, '');
html = html.replace(/<\s*a.*href="(.*?)".*>(.*?)<\/a>/gi, " $2 (Link - $1) ");
html = html.replace(/<\s*\/*.+?>/ig, '');
html = html.replace(/ {2,}/gi, '');
html = html.replace(/\n+\s*/gi, '');
html = html.replace(" ", '');
html = html.replace(/<.*?>/g, '');
return html;
}
}
Do you know how to add watermark in CKEditor (visual word processor)?
I want the behavior like this: When the CKEditor is loaded, it has text by default. When I click on it, text must disappear.
Below are the steps to add water mark in CKEditor
Generally when you set default text in Ck Editor through java script on page load. JavaScript event get fired before the control actually load so if possible set the text for code behind.
Attaching Events in Javascript for OnFocus and OnBlur
$(document).ready(function() {
var myeditor = CKEDITOR.instances['EditorId'];
myeditor.on("focus", function(e) {
RemoveDefaultText();
});
myeditor.on("blur", function(e) {
setDefaultText();
});
});
Define your default text in this function
function setDefaultText() {
if (CKEDITOR.instances['EditorId'].getData() == '') {
CKEDITOR.instances['EditorId'].setData('Your Message Here');
}
}
function RemoveDefaultText() {
if (CKEDITOR.instances['EditorId'].getData().indexOf('Your Mesage Here') >= 0) {
CKEDITOR.instances['EditorId'].setData('');
CKEDITOR.instances['EditorId'].focus();
}
}
You can also define styles to the water mark by adding classes to the default text and place the class into you ck editor content css otherwise it will not work
A ready to use plugin can be tested here. It allows to customize the default text and it takes into acount, dialogs as well as reading the data from an external script.
You might want to try this jQuery plugin:
https://github.com/antoineleclair/ckwatermark