I am using rails 3.1 and I am facing a problem with attaching codemirror editor to my form textarea.
//----- code (application.js)------//
$(document).ready(function() {
$('#comment_body').each(function() {
var editor = CodeMirror.fromTextArea(this, {
lineNumbers : true,
matchBrackets : true
});
})
})
//------end------//
The problem is that the textarea becomes uneditable. Can you tell me the way to use this?
You have to add the scripts and the css of codemirror in your application.js for the scripts and application.css for the stylesheets.
application.js should have this:
//=require codemirror
And your application.css should have:
/*
*= require codemirror
*/
Related
I would like my CKEditor text area to be styled based on the UIkit framework in order to have a direct overview of the display without having to click on proview.
I have already added the css in the config.js using
/* uikit.css */
config.contentsCss = '/css/uikit.min.css';
However, UIkit also need its JS file to properly dynamic content such as tab or accordion for example.
How can I add the uikit.js into CKEditor?
By adding the following in the config.js, it works as expect:
CKEDITOR.on('instanceReady', function(ev) {
var uikitScript = document.createElement('script');
uikitScript.src = 'https://cdn.jsdelivr.net/npm/uikit#3.3.7/dist/js/uikit.min.js';
var editorHead = ev.editor.document.$.head;
editorHead.appendChild(uikitScript);
});
Since I am using webpack with babel, I enabled ES6 Features for my solution.
This works fine for Javascript Modules.
However, in my Razor Views I am using some inline scripts:
<script>
var foo = function() {
var bar = 'baz';
alert(bar);
}
</script>
Now since I have enabled Ecmascript 2015, if I reformat my Code (CTRL+EF), the following happens:
<script>
var foo = function() {
const bar = 'baz';
alert(bar);
}
</script>
Of course some browser from a company named Microsoft immediatelly complains about const.
So is it possible to enable ES6 Features only in JS files?
This doesn't seem to be supported at the moment.
As workaround to the direct problem, I have created a custom Code Cleanup setting:
I also created an Issue here:
https://youtrack.jetbrains.com/issue/RSRP-469231
Is there a way to dynamically change the skin of the editor (CKEditor 4.1 (revision 80c139aa))?
The only way I could do that is from the config.js (which means that my skins are working ok)
The editor is loaded when a jDialog is opened. On open of the dialog i want to run a command that will change the skin according to user preferences.
I tried with no luck:
CKEDITOR.config.skin = '/moono-dark';
Also this:
CKEDITOR.editorConfig = function( config ) {
config.skin = '/karma';
};
Also this:
CKEDITOR.replace( 'problem', {
customConfig: '../ckeditor/skins/config_flat.js'; //this path is ok
});
Also tried to load the config file with ajax (after deleting the defaulkt config.js file):
$.getScript( "../ckeditor/skins/config_icy_orange.js", function( data, textStatus, jqxhr ) {
CKEDITOR.replace( 'problem' );
});
It always loads the default config.js file...
How can i do this?
You can choose the skin to use whith CKEDITOR.replace like this:
CKEDITOR.replace( 'ckeditor',{
skin: "kama"
});
If the skin isn't in the default plugin folder you should add the path to the skin folder like this:
// Enable "moonocolor" skin from the /myskins/moonocolor/ folder.
CKEDITOR.replace( 'editor1', {
skin: 'moonocolor,/myskins/moonocolor/'
} );
Here a working fiddle with kama
You can see here ckeditor skin samples
I have a jQuery plugin (jQuery.fn.myJQueryPlugin) that loads on a page that also loads a TinyMCE editor.
Is there a way I can get the plugin to work on the content of the TinyMCE editor (via a TinyMCE plugin)?
I've tried something along the lines of
tinymce.PluginManager.add( 'myTinyMCEPlugin', function( editor ) {
editor.on('PostProcess', function(event){
editor.getWin().parent.jQuery(".trigger-class").myJQueryPlugin();
});
});
but that doesn't seem to work
ok, it turns out, it can be done:
tinymce.PluginManager.add( 'myTinyMCEPlugin', function( editor ) {
editor.on('PostProcess', function(event){
// get jQuery from parent window
$ = editor.getWin().parent.jQuery;
$(".trigger-class", editor.getDoc()).myJQueryPlugin();
});
});
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