It has been hours already trying to find out if jQuery (or any javascript) can actually work inside the TinyMCE editor as it's the most powerful and customizable utility in its class. Search by search i understood what's the deal with .tinymce({ cleanup: false, extended_valid_elements: 'script[type|src]' });
but instead of CDATA sections around the code i now get and still no success.
Is that possible or it's a restriction in order to prevent conflicts with TinyMCE interface.
Use this modal code to access element inside tinymce using jquery
tinymce.activeEditor.$("#element_id").attr({'alt' : alternate , 'align' : align , 'title' : title});
Related
I'm working with Canvas and I'm trying to add centered text dynamically on a picture.
I read on this topic (How to add text on image using Javascript and Canvas), that I have to put some jQuery in my code. I tried but I did not succeed because I don't have a lot experience in jQuery.
You can find the example I made on the JSFiddle link below.
https://jsfiddle.net/ParkerIndustries/t3rao9hL/14/
If you have to add in jQuery to your code ( besides having the jquery.min file loaded ), you precursor any code with the "$" symbol and then the element you are identifying ( wrapped in parenthesis ). In your case:
$(context)
since you've already identified your element. Then after that there are a couple ways to change css using jQuery.
$(context).css({ 'display', 'none' });
$(context).addClass('changed');
If you don't have an identifier, just put it in quotes:
$('#context').addClass('changed');
For JavaScript, Clarity answered that in the comment above.
I'm testing out CKEditor
I'm trying to get the display in the editor, to match my sites css style for displaying the end result.
What I'm trying to do is style the "wrap code" button to match the css of my site, by adding in a class.
I've seen on this page of the manual, that you can do stuff like this:
config.format_pre = { element: 'pre', attributes: { 'class': 'editorCode' } };
However, doing the same for a code block like so:
config.format_code = { element: 'code', attributes: { 'class': 'someclass' } };
Doesn't actually do anything. Anyone got a pointer on what I might be missing?
I've tested it working on other elements, so I know the config file changes are being picked up.
The one important thing is that every tag which is formatted via config.format_tagname should be also included in config.format_tags. However, this two settings (config.format_tagname and config.format_tags) works only form Block-Level elements (as stated in the manual page you referenced ).
As code element is considered as an inline one by CKEditor (see DTD), it is not possible to use this config here.
However, the easiest way to modify the elements added via Style dropdown is to edit styles.js file which is present in CKEditor directory. The dropdown styles are based on this file, so you can easily modify code element there. You can also define your custom stylesSet.
I have been using CKEditor for some time and it has worked great. I've pretty much gotten rid of any problems that ive had but this one i cant seem to figure out. When i add inline attributes to elements for instance style = "color: #ff0;" on a <p></p> tag they are stripped out when i switch from wysiwyg to source view. No saving or submission is done and ckeditor is has been added to my site which is my own script. Any ideas as to what would cause this. All of the search results i can find correspond to this happening in Drupal but Drupal seems to be the problem not the editor in all instances. Thanks again!
It feels like you're using CKEditor 4.1+ that comes with Advanced Content Filter (ACF). If so, you need to specify config.allowedContent and configure it to get your things working. You may also be interested in config.extraAllowedContent.
See this answer for more details.
For anyone looking for a simple sample on how to enabled additional markup in CKEditor without disabling ACF completely, here is a short snippet:
CKEDITOR.replace( 'editor1', {
extraAllowedContent: 'style;*[id,rel](*){*}'
} );
extraAllowedContent here enables the <style> element, allows two additional attributes (in square brackets) for all (* is a wildcard) already allowed elements, allows usage of any class names (*) for them and allows usage of any inline styles {*}
hi you can stop ACF easily . by default your configaration is---
function ckeditor($name,$value='',$height=300){
return '<textarea name="'.addslashes($name).'">'.htmlspecialchars($value).'</textarea>
<script>$(function(){CKEDITOR.replace("'.addslashes($name).'",{});});</script>';
}
just add this in the curly brackets:
allowedContent: true
now your configuration will be:
function ckeditor($name,$value='',$height=300){
return '<textarea name="'.addslashes($name).'">'.htmlspecialchars($value).'</textarea>
<script>$(function(){CKEDITOR.replace("'.addslashes($name).'",{allowedContent: true});});</script>';
}
I faced the same issue and below answer solved my problem:
config.allowedContent = true;
config.extraAllowedContent = '*(*);*{*}';
config.extraAllowedContent = 'span;ul;li;table;td;style;*[id];*(*);*{*}';
I had the same problem, that ck was stripping not only some attributes, but whole elements when pasting a block element, inside a block element (div with some attributes pasted inside a p) while using this method:
editor.insertHtml(html);
what solved the problem was using this workaround instead:
editor.insertElement(CKEDITOR.dom.element.createFromHtml(html));
I am using Tiny MCE editor version : 3.5.7
I am using multiple instances of text editor on same page with unique IDs and I have wrapped these editors in a div to show and hide these editors. Everything was working fine. Now I want to clear the contents of the editor when user hide it (so that when it is displayed again the previous contents are removed). I tried to do it using tinyMCE.get('editorId').setContent(''), it works fine only once.... I mean once I have used the above function than I am unable to set or even get the contents of that editor instance. The structure that I have used is as follows:
<div id="parentDIV">
<div id="1_editor">
</div>
</div>
tinyMCE.init({
mode: "exact",
max_char: "2000",
elements: "1_editor",
// Setting up ToolBar
theme: "advanced",
theme_advanced_layout_manager: "SimpleLayout",
theme_advanced_buttons1: "bold,italic,underline, strikethrough, separator,justifyleft, justifycenter,justifyright, justifyfull, separator,bullist,numlist,separator,fontselect ,fontsizeselect",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
});
To show and hide the editor I doing something like this:
$('#parentDIV').hide();
$('#parentDIV').show();
Can anyone help please?
I am not totally sure why this happens. One option is if an editor gets moved around the dom. For you it might be a better way to shut down your editors explicitly then to just hide them.
To shut down an edtor instance use:
tinymce.execCommand('mceRemoveControl',true,'editor_id');
To reinitialize use
tinymce.execCommand('mceAddControl',true,'editor_id');
How can I work with TinyMCE in source code only? TinyMCE converts any data to HTML and shows it. I need to use BBCode without converting, source code only. I couldn't find any info about it in Google.
I suppose you want to use TinyMCE like phpBB post form. i.e. click on Bold and it shows [b]text[/b] and not the formatted text in bold.
As far as I know, you can't do this with TinyMCE through settings. You will need to write your own functions.
tinyMCE.init({
theme_advanced_buttons1 : "mybold",
setup : function(ed) {
ed.addButton('mybold', {
title : 'bold',
image : 'img/example.gif',
onclick : function() {
// Add you own code to execute something on click
ed.focus();
ed.selection.setContent("[b]" + ed.selection.getContent() + '[/b]');
}
});
}
});
Cool for two or three codes. A pain in the ass and long code if you are going to do it for every bbcode.
If you are not going to use none of TinyMCE advantages, you are better off writing your own code to manipulate <textarea> and avoid loading TinyMCE JS. It would be lighter.