CKEditor: Disable the textarea and not the buttons - javascript

Can anyone tell me how to disable the textarea/content area without disabling the buttons?

It's not clear to me what you'd like to accomplish, so perhaps you could explain that in a bit more detail.
In any case, you can make CKEditor read-only by using the setReadOnly() method. This will disable both the toolbar and the content area. Making just the content area disabled with buttons enabled would create a really confusing UX, with the users not really understanding what's going on so perhaps you can re-think your idea?
You can see the Read-only Mode demo and read more about this feature in the Read-Only Mode documentation.

You can try using below hack but please note that you will only be able to style existing content but you won't be able to insert anything (e.g. you won't insert table but you will be able to bold or link your text).
var editor = CKEDITOR.replace( 'editor1', {
language: 'en',
on : {
contentDom : function( event ) {
CKEDITOR.instances.editor1.document.getBody().setAttribute( 'contenteditable', false );
}
}
});

Related

Ace Editor with TinyMCE textarea

I am trying to extend a "code view" and a "design view" within an application of mine. I am able to use either the code view (Ace Editor) or the design view (tinymce) with no issues. However I would want the two to work together and update the code on either side when developing. This would make me only have to POST one tag rather than doing two and may have issues down the road.
I created this fiddle to show what problem I am having.
In my fiddle I show a tinymce textarea, a regular textarea and a ace editor textarea. The tinymce and regular textarea share the same name and it's being called by Ace editor to update as I am typing. You can see the regular textarea works perfectly however, the tinymce textarea is not.
I believe the issue may be coming from the fact that TinyMCE is using an iFrame and updating the textarea behind the scenes but I am not exactly sure the best way to call that iframe in javascript.
I've tried to sync both, but due to some missing callbacks/events on tinyMCE, this is best I get. The content in ACE is only updating after blur on tinyMCE. There's currently no direct input event:
Fiddle forked
Code:
var editor = ace.edit("edit");
var textarea = $('textarea[name="test"]');
editor.getSession().setValue(textarea.val());
editor.getSession().on('change', function(){
textarea.val(editor.getSession().getValue());
// copy ace to tinyMCE
tinymce.get('test').setContent(editor.getSession().getValue());
});
editor.setTheme("https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.2/theme-terminal.js");
editor.getSession().setMode("https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.2/mode-html.js");
tinymce.init({
selector: ".test",
relative_urls: false,
apply_source_formatting : true,
setup : function(ed) {
ed.on('change', function(e) {
// copy tinyMCE to textarea
textarea.val(tinymce.activeEditor.getContent({format : 'raw'}));
// copy tinyMCE to ace
editor.getSession().setValue(
tinymce.activeEditor.getContent({format : 'raw'})
);
});
}
});
You should be setting ACE theme and mode this way:
editor.setTheme("ace/theme/terminal");
editor.getSession().setMode("ace/mode/html");

Bing translator widget without original text popup and show the translation button text automatically

I used Bing Language converter in my website. It work successfully. But I need to disable annoying popups attached to hover event on translated texts that shows original text.
I used the below code in onComplete callback :
Microsoft.Translator.Widget.domTranslator.showHighlight = false;
Microsoft.Translator.Widget.domTranslator.showTooltips = false;
But it did not work. I searched every where. But not get any solution. Please give me a solution. Thanks in advance.
use below style that will hide one div:
#MSTCImprove {
display: none;
}
and change ui=true to ui=false

How to get the id attribute of textarea that replaced by TinyMCE editor

I am using TinyMCE in my project.I want to get the id attribute of the textarea that is replaced by TinyMCE.Once I get the id of that textarea, then how can I use that id for my jquery functionality like focus,blur,keyup etc. Please give me an example for focus event for that textarea (editor) just by alert something when someone press a key inside the textarea (editor)
I have been stuck with this issue for the last 4 days. So any help in this Please.
Thanks.
Not a final answer, but too many advices for a comment.
There's a jQuery package that "Contains special jQuery build of TinyMCE and a jQuery integration plugin".
Some information about event-handling: e.g. the focus event. Notice the tinymce.activeEditor-snippet.
If you've just one init for one textarea, you should know the selector:
tinymce.init({
// your textarea has the class "myeditor"
// access with jQuery: $('textarea.myeditor').anyFunction();
selector: "textarea.myeditor"
});
Maybe it helps you a little. Good luck!

Displaying a FireFox toolbar from within that toolbar's JavaScript

I'm putting together a FireFox toolbar that is only relevent to a small number of websites.
Currently I have code working that checks whether the user is viewing one of those sites and enables and disables the toolbar controls based on that check - that is all good.
I want to extend this, however, so that if the toolbar is not currently being displayed and the user visits one of the relevent sites then the toolbar is automatically displayed.
I've tried inspecting and setting sthe toolbar.hidden property (as set in my XUL) but that seems t be permanently set to 'false' (as per the value in the .xul file) even when the toolbar has been hidden by deselecting it in the View->Toolbars menu.
The code I was using for this is as folows:
checkMyToolBarVisible: function()
{
if ( document.getElementById("MyToolBar-Toolbar").hidden == true )
{
document.getElementById("MyToolBar-Toolbar").hidden = false;
}
},
I added an if satement to this to report the current status of the hidden property/attribute but as I say that always reported back that hidden=false even when the toolbar was not displayed. The function was firing properly, though, so the problem wasn;t that my toolbar code is being ignore when the toolbar is not displayed.
Looking at the documentation toolbar.hidden may not even be a supported property so if this is possible then I guess I'm looking at the wrong property to check and set.
Is this possible? And if so what property should I be working with?
Thanks,
FM
And once again proving that asking a question on a forum means you will find the answer yourself sooner rather than later I found the answer to this is some sample code while looking at a completely different issue!
The parameter is: .collapsed, ie
checkMyToolBarVisible: function()
{
if ( document.getElementById("MyToolBar-Toolbar").collapsed == true )
{
document.getElementById("MyToolBar-Toolbar").collapsed = false;
}
},
So, all sorted then... hope someone finds that useful as I couldn't find any reference to that in that context anywhere.
-FM

Title Attribute on Disabled Elements in Firefox

I am building a very dynamic web-based application using a lot of Javascript to handle user events. I am in the process of making things a little more usable and came across a problem that I've never had before.
I am using jQuery, so factor that in to your answers. Thanks in advance.
I have a set of button elements defined as:
<input type="button" title="My 'useful' text here." disabled="disabled" />
I have these buttons with a default style of:
div#option_buttons input {
cursor: help;
}
Then, using jQuery I run something like this as a click-event on a select box:
window.current_column = '';
$('select.report_option_columns').live('click', function() {
var column = $(this).val();
if ( column == window.current_column ) {
// clear our our previous selections
window.current_column = '';
// make this option no longer selected
$(this).val('');
$('div#option_buttons input').attr('disabled','disabled');
$('div#option_buttons input').attr(
'title',
'You must select a column from this list.'
);
$('div#option_buttons input').css('cursor', 'help');
} else {
window.current_column = column;
$('div#option_buttons input').attr('disabled','');
$('div#option_buttons input').attr(
'title',
'Add this option for the column "' + column + '"'
);
$('div#option_buttons input').css('cursor', 'default');
}
});
So, as you can see, when a column is selected in the select box (not shown here), I want the button to be enabled and behave like a button would (with my own click-events). But when a column is not selected (including the default load), I want the button disabled. The usability developer in me wanted to give the users subtle contextual clues as to what they can do to enable the button through the native rendering of the title attribute as a lightweight tooltip. I do this already in other areas of the application (this is a crazy beast of a project) and our usability tests have shown that the users are at least capable of recognizing that when the cursor changes to "help" that they can hover over the element and get some information about what is going on.
But this is the first time I've ever tried this with a form element. Apparently when I put disabled="disabled" in the element, it completely ignores the title attribute and will never display the tool tip.
Now, I know I have a few options (at least the ones I could think of):
Write my own custom tool tip plug-in that is a little bit more robust.
Don't "disable" the element, but style it as disabled. This was the option I was leaning on the most (in terms of ease to develop) but I hate having to do this.
Leave the button as enabled but don't process the click event. I don't like this option as much because I like to leave things natively styled as they should logically be. A disabled button "feels" the most correct and the look of a disabled button is instantly recognizable as a disabled button.
So, with all that said, am I missing something? Is there something easy that I can do that I just haven't thought of? Google searches have failed me on this topic, so I thought I'd toss this out on StackOverflow to get some fresh eyes on this.
**Edit**
I just found another StackOverflow question on this same topic, though that person used a very different set of terms describing his problem (probably why I didn't find it).
The url to the question is: Firefox does not show tooltips on disabled input fields
Both of the answers on that question are pretty good, though I'd like to see if anyone has any other suggestions. Maybe something more jQuery specific? Thanks again.
I had a similar problem and I just surrounded the disabled element in another element and interacted with that div, i was using tipTip to show tooltip for disabled checkbox
<div style="cursor: pointer;" class="disabled" title="Do something to make it work" >
<input disabled="disabled" type="checkbox">
</div>
There are several validation plugins that are very robust. You can find them in the jQuery plugins area.
Another option for you though which I happen to love and tends to be trending now adays is using the "Tipsy" plugin. You can put little '?' icons to the right of your text fields and people can mouse over them to get a "facebook-like" tool tip. This plugin is very sharp and I highly recommend it.
Good luck!
I haven't tested whether or not that solves the problem with the missing title, but you could also disable the button(s) using jquery on $(document).ready()
regards,
harpax
If that doesn't break your design totally, you can replace your button by a "span", "p",... tag with "My 'useful' text here."
And swap it with the button only when the user makes the correct move.

Categories