Can I use CKEDITOR toolbar but the content is locked/readonly? - javascript

my problem is I need to use the toolbar of ckeditor for text style but I need to restrict the user in changing the content.
Is this possible?

To set as read-only, use the CustomConfig method:
CKEDITOR.replace(id,{customConfig :readOnly:true});
Example:
<textarea id="editor1">Test</textarea>
CKEDITOR.replace('editor1',{width:'700px',readOnly:true});
Js Fiddle Demo

Related

How to give default placeholder text to the textarea in ckeditor?

Searhced a lot for this. I have been trying to add placeholder text in ckeditor using one of its plugins "configuration Helper" plugin for CkEditor.
How to give default placeholder text to the textarea in ckeditor?
Follow the below steps to add placeholder.
1) Add confighelper plugin to your plugin folder.
2) Add this piece of code to your config:
config.extraPlugins='onchange,confighelper';
3) In your html page add place holder attribute to your textarea, its mandatory and add
CKEDITOR.replace( '#editor', {
extraPlugins : 'confighelper',
});
4) Now you can enjoy.
In HTML5 ther is a placeholder attribute
<textarea placeholder="Describe yourself here..."></textarea>
Otherwise you need javscript to do it
To check which browsers are compatible have a look at: http://www.w3schools.com/tags/att_textarea_placeholder.asp

Changing CSS of something using DOM

I am actually trying to develop a Firefox Plugin. And I need to Dynamically Change The CSS of the Icon.
How do I do that for this CSS
#sample-button {list-style-image: url("chrome://sample /skin/sample24.png");}
toolbar[iconsize="small"] #sample-button {list-style-image: url("chrome://sample/skin/sample16.png");}
I want to change the CSS of toolbar[iconsize="small"] #sample button.
I can change the css of sample button by simply doing
document.getElementById("sample-button").style.listStyleImage = url('chrome://sample/skin/sample_change24.png')
But I don't knw how to do it for the second part that is in square brackets [].
Waiting for The Answer,
Thanks
You can use querySelector:
document.querySelector('[iconsize="small"] #sample-button').style.listStyleImage = '...';

TinyMCE Stripping Out All Markup

I'm trying to insert a simple image link in a TinyMCE-wrapped text field, but it's stripping out all of my markup. My markup looks like:
<a class="video-launcher lightbox-video-launcher" href="http://www.youtube.com/watch?v=blah" ><span class="video-launcher-bg"></span><span class="video-launcher-button"></span></a>
My tinymce_config_url_init.html looks like:
{
"theme_advanced_toolbar_align":"left",
"content_css":"/media/css/cms_tinymce.css,/media/css/cms_tinymce_admin.css",
"theme_advanced_blockformats":"p,h2,h3,div,customformat",
"theme_advanced_statusbar_location":"bottom",
"theme_advanced_path":false,
"plugins":"fullscreen,paste",
"valid_elements":"*[*]",
"media_strict":false,
"paste_auto_cleanup_on_paste":true,
"theme_advanced_styles":"Header 1=header1;Header 2=header2;Header 3=header3;Table Row=tableRow1",
"width":"680",
"theme":"advanced",
"theme_advanced_font_sizes":"8px,10px,12px,14px,16px,18px,20px,24px,36px",
"theme_advanced_resizing":true,
"height":"300",
"relative_urls":false,
"theme_advanced_toolbar_location":"top",
"inline_styles":true,
"language":"en",
"theme_advanced_buttons1":"fullscreen,|,undo,redo,|,bullist,numlist,|,anchor,link,unlink,charmap,|,code,|,justifyleft,justifycenter,justifyright,|,image,",
"theme_advanced_buttons3":"",
"theme_advanced_buttons2":"removeformat,styleselect,formatselect,fontselect,fontsizeselect,|,bold,italic,underline,|,forecolor,backcolor",
"removeformat_selector":"span,div,p,h1,h2,h3"
}
I know the problem is with TinyMCE, because without submitting the form, and just clicking the "html" button again, TinyMCE's popup shows no content.
I'm assuming TinyMCE is striping out anything it thinks looks insecurity or invalid. For my app, it's being used in an admin section, so the content can be trusted. How do I disable the TinyMCE config causing this markup from being stripped out?
Add your website's css stylesheet to the "content_css" variable, perhaps?
And also set "paste_auto_cleanup_on_paste" to false, not true.
You should have a closer look at the tinymce configuration paramters valid_elements. You need to set them accoring to your needs and define valid elements and attributes.

Reset TinyMCE box

I am using TinyMCE editor. I want to clear the content inside the editor box with some button click present on my form.
Can you let me know how to do so?
This can be easily done (no need to use the slow jQuery tinymce build) using the following code as onclick-action of your button:
// 'content' is tinymce default,
// but if your textarea got an ID that is the one you need!
var my_editor_id = 'content';
// set the content empty
tinymce.get(my_editor_id).setContent('');
From the TinyMCE jQuery Plugin documentation, can be easily found from the page you linked:
// Will change the contents of an textarea with the ID "someeditor"
$('#someeditor').html('Some contents...');
// Will change the contents all text areas with the class tinymce
$('textarea.tinymce').html('Some contents...');
// Gets the contents from a specific editor
alert($('#someeditor').html());
Try setting it to empty string, might be just what you need.
If you are interested in clearing the content of the editor you can use:
tinymce.get('#editorId').setContent(''); // like others have suggested
However, if you'd like to reset the content and menu buttons etc. - essentially resetting the editor altogether you might consider using:
tinymce.get('#editorId').init();
Sets the specified content to the editor instance, this will cleanup the content before it gets set using
the different cleanup rules options.
tinymce.activeEditor.setContent('');
$('#name_of_your_textarea').val('');

Is there a JQuery tooltip plugin that supports HTML content and automatically positions tooltips?

I am searching for a Tooltip plugin/library for JQuery. It should be able to automaticlly position tooltips, like TipTip, and also support HTML content for the tips.
TipTip does fullfill both conditions, but:
Added HTML support with Tip Tip. You can now add HTML into the Title attribute (though this is not recommended if you want strictly valid code).
I believe this one does. For instance, this demo shows an image. You could easily have a bodyHandler that retrieves the HTML from an attribute on the element. For instance
foo
That's perfectly valid HTML, and the bodyHandler would look something like
return this.attr("data-tooltip"));
I didn't want to leave jquery native plugin and mess with additional libs, so I figured out quite simple solution:
$('.tooltips').tooltip({
content: function(){
return $(this).attr('title');
}
})
This way - your title attribute with HTML may be used successfully.
I like TipTip a lot. The "title" field usage is awkward, but you don't have to do that:
content: string (false by default) - HTML or String to use as the content for TipTip. Will overwrite content from any HTML attribute.
(via http://code.drewwilson.com/entry/tiptip-jquery-plugin)
This tooltip widget included in the jQuery UI library supports different automatic positions and HTML in the title attribute: http://api.jqueryui.com/tooltip/

Categories

Resources