I'm using django-tinymce together with the no grappelli branch of django-filebrowser running django 1.2.
I use the tinymce HTMLField model definition for the model field that I would like to have WYSIWYG.
I've added the correct javascript to my AdminModel, and the filebrowser works great, adding the image to the textarea with no problem, however, when I save, the textarea does not update (it looks like tinnymce doesn't touch it when it should). When I turn off the filebrowser plugin, everything works fine, so there must be some conflict with it and the TinyMCE onSubmit functionality.
I've been messing with it for while and just can't get anywhere - all of these pieces are pretty new to me, so even some ideas of what to mess with would be helpful.
Thanks in advance.
edit: Added bonus info - the default mode in the config for 'mode' was 'textareas'. When I remove that, everything saves correctly. Sadly, this also removes the image button that I'm doing all of this to have...
update
Here is the TinyMCE configuration I was using (the one included with django-filebrowser - this is broken):
tinyMCE.init({
mode: "textareas",
theme: "advanced",
language: "en",
skin: "o2k7",
browsers: "gecko",
dialog_type: "modal",
object_resizing: true,
cleanup_on_startup: true,
forced_root_block: "p",
remove_trailing_nbsp: true,
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "none",
theme_advanced_buttons1: "formatselect,bold,italic,underline,bullist,numlist,undo,redo,link,unlink,image,code,fullscreen,pasteword,media,charmap",
theme_advanced_buttons2: "",
theme_advanced_buttons3: "",
theme_advanced_path: false,
theme_advanced_blockformats: "p,h2,h3,h4,h5,h6",
width: '700',
height: '200',
plugins: "advimage,advlink,fullscreen,visualchars,paste,media,template,searchreplace",
advimage_styles: "Linksbündig neben Text=img_left;Rechtsbündig neben Text=img_right;Eigener Block=img_block",
advlink_styles: "internal (sehmaschine.net)=internal;external (link to an external site)=external",
advimage_update_dimensions_onchange: true,
file_browser_callback: "CustomFileBrowser",
relative_urls: false,
valid_elements : "" +
"-p," +
"a[href|target=_blank|class]," +
"-strong/-b," +
"-em/-i," +
"-u," +
"-ol," +
"-ul," +
"-li," +
"br," +
"img[class|src|alt=|width|height]," +
"-h2,-h3,-h4," +
"-pre," +
"-code," +
"-div",
extended_valid_elements: "" +
"a[name|class|href|target|title|onclick]," +
img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name]," +
"br[clearfix]," +
"-p[class<clearfix?summary?code]," +
"h2[class<clearfix],h3[class<clearfix],h4[class<clearfix]," +
"ul[class<clearfix],ol[class<clearfix]," +
"div[class],"
});
This was one of two problems I was having - going to post an answer below as well.
The issue was actually two-fold. The first problem was the included default TinyMCE configuration that came with django-filebrowser-no-grappelli (above, in the question). I'm not sure what was wrong with it, but it prevented the actual form fields from being updated when the submit button was pushed.
When I used a custom configuration for TinyMCE, form field saving worked correctly, but the filebrowsing was broken. This was because if django-tinymce sees 'filebrowser' in the installed apps list, it overrides the file_browser_callback and sets it to 'djangoFileBrowser', so even when I correctly set it to 'CustomFileBrowser' in my own config. The solution was to explicitly tell it not to set that value. I added the follwing to my settings.py:
TINYMCE_DEFAULT_CONFIG = {
'theme': 'advanced',
'theme_advanced_toolbar_location': "top",
'theme_advanced_toolbar_align': "left",
'skin': "o2k7",
"file_browser_callback" : "CustomFileBrowser",
}
TINYMCE_FILEBROWSER = False
And everything seems to be working fine. This issue seems to be fairly unique to my combination of versions.
Related
I found out that installing Django 1.0.2 extention on VS code disables the default html.autoClosingTags, meaning that, even if this is set to True, it won't autoclose HTML tags.
Does anyone knows how to fix it?
Or at least another extention highlighting django syntax that does not disable html.autoClosingTags.
UPDATE:
As suggested by #Nadim Al Abdou
In my settings.json (File>Preferences>Settings> settings.json) there was:
{
"python.pythonPath": "C:\\Applicazioni_Tommaso\\Anaconda3\\pythonw.exe",
"workbench.startupEditor": "newUntitledFile",
"workbench.colorTheme": "Atom One Dark",
"workbench.tree.indent": 30,
"terminal.integrated.cwd": "C:\\users\\tommaso",
"window.zoomLevel": 0,
"workbench.editor.enablePreview": false,
},
I turn it into:
{
"python.pythonPath": "C:\\Applicazioni_Tommaso\\Anaconda3\\pythonw.exe",
"workbench.startupEditor": "newUntitledFile",
"workbench.colorTheme": "Atom One Dark",
"workbench.tree.indent": 30,
"terminal.integrated.cwd": "C:\\users\\tommaso",
"window.zoomLevel": 0,
"workbench.editor.enablePreview": false,
"files.associations": {
"**/*.html": "html",
"**/templates/**/*.html": "django-html",
"**/templates/**/*": "django-txt",
"**/requirements{/**,*}.{txt,in}": "pip-requirements"
},
"emmet.includeLanguages": {"django-html": "html"},
},
close and re-open vs code, but it does not work.
Update:
This does not work because I am editing the User settings
press ctrl+p
insert >open settings in the search bar
select preferences: Open User Settings (JSON)
while it is now clear that I should edit the Default settings
press ctrl+p
insert >open settings in the search bar
select preferences: Open Default Settings (JSON)
where I actually found the "files.associations": { line.
The problem is I cannot edit the file, beacuse as I try to, vscode shows the message: "cannot edit in read only editor".
What can I do to insert the line "emmet.includeLanguages": {"django-html": "html"}, ?
you need to edit your global settings.json file like so
1.
"files.associations": {
"**/*.html": "html",
"**/templates/**/*.html": "django-html",
"**/templates/**/*": "django-txt",
"**/requirements{/**,*}.{txt,in}": "pip-requirements"
},
2.
"emmet.includeLanguages": {"django-html": "html"},
I created this extension in one day, I'm adding more features, I saw you are adding:
"emmet.includeLanguages": { "django-html" : "html" }
I tried adding it and is working for me. To be honest I'm not sure Why this is not working for you, Did you resolve it?
Can you try updating VSCode please? This info is helpful for me.
Another way is moving up the line, exactly before:
"files.associations": {
Thanks,
Roberth.
I'm trying to use SlickGrid in a Rails 4 application and having a problem with getting some of the SlickGrid assets to load up properly.
Initially, I tried to use the SlickGrid-Rails gem, which loads the SlickGrid stuff into the Assets pipeline for you. However, it turns out that the gem isn't compatible with Rails 4 at this time.
So I went and downloaded the SlickGrid source and began manually placing the files in my app. Below is the setup I've performed.
My File Setup
Placed all of the JavaScript files into vendor/assets/javascripts
Placed all of the CSS files into vendor/assets/stylesheets
Placed all of the image files (.gif, .png, etc) in assets/images.
Assets Setup
In my application.js file, I added the line ::
//= require_tree ../../../vendor/assets/javascripts
In my application.css file, I added the line ::
*= require_tree ../../../vendor/assets/stylesheets
In my application.rb file, I added the line ::
config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif)
Building the SlickGrid
In my view file I have a single element ::
#my-slick-grid
My JavaScript file
$(document).ready(function(){
var rows = [
{
field_1: "value1",
field_2: "value2"
}, {
field_1: "value3",
field_2: "value4"
}
];
var columns = [
{
name: "Address",
field: "address",
id: "address",
sortable: true
},
{
name: "Rating, in %",
field: "rating",
id: "rating_percent",
resizable: false
}
];
var options = [];
var slickgrid = new Slick.Grid($("#my-slick-grid"), rows, columns, options);
});
The Results
When the view loads, I get "most" of the table, but it's not complete.
The Errors
Also, when I view the Chrome Console, I see the 2 following errors ::
GET http://localhost:3000/assets/images/header-columns-bg.gif 404 (Not Found)
GET http://localhost:3000/assets/images/ui-bg_glass_75_e6e6e6_1x400.png 404 (Not Found)
So, obviously Rails is having a problem either loading or knowing where to get the image files from. Does anyone see what I'm doing wrong? I suspect that perhaps I'm not placing the SlickGrid files in the appropriate locations. Perhaps someone can see what I'm doing wrong and correct me?
Thanks for your time!
So I figured it out.
I had to place all the SlickGrid image files into the public dir of my app.
Then I had to add the .scss extension onto each of the SlickGrid .css files.
Then, inside all of the SlickGrid .css.scss files, I had to replace all the
url('/assets/images/blahblah.gif')
with
url(asset-path('blahblah.gif'))
Now when I run the application, the table is fully drawn and there are no more 404 errors.
In the upgrade guide it states
Rails 4.0 removed the ActionController::Base.asset_path option. Use the assets pipeline feature.
I am currently in the process of upgrading from Rails 3.2 to Rails 4.1. In my app I use the select2-rails gem and in my js I add an image for the select menu options:
//mycode.js.erb
function format(image) {
var image_path = "<%= asset_path('" + image.id.toLowerCase() +"') %>"
return "<img class='flag' src='" + image_path + "' />";
}
The above worked in my Rails 3.2 app but I seemed to have broken it with my upgrade to 4.1 and now receive the following error:
Sprockets::FileNotFound - couldn't find file '" + image.id.toLowerCase() +"'
Is the asset_path helper still available in Rails 4.1? If yes, any ideas on where I may have gone wrong?
Update
The code above is in my .js.erb file which allows me to have Ruby code within my js file. This currently works well in my Rails 3.2 project. I am doing this as select2 allows us to format the display of our select menu items as per the below example:
//sample.js
function format(state) {
if (!state.id) return state.text; // optgroup
return "<img class='flag' src='images/flags/" + state.id.toLowerCase() + ".png'/>" + state.text;
}
My understanding was that it is correct usage to use the asset pipeline paths rather than manually adding something like 'assets/images/icons/small'
I have an existing tinymce set up working well, using tinymce version 3.4.9 but for some reason the spellchecker is not showing, in fact when I add the spellchecker to the plugins list, the tinymce disapers alltogether.
Below is the cffunction code...
<cffunction name="adminEditTinyMCEJS" output="true">
<cfif listLen(tinyMCE_list) gt 0>
<script language="javascript" type="text/javascript">
tinyMCE.init({
mode : "exact",
elements : "#tinyMCE_list#",
content_css : "css/tinyMCE.css",
plugins : "style,table,searchreplace,paste,spellchecker",
visual : "true",
external_image_list_url : "js/tinyMCE_image_list.js",
trim_span_elements : "false",
valid_elements : "+a[id|style|rel|rev|charset|hreflang|dir|lang|tabindex|accesskey|type|name|href|target|title|class|]" +
",-strong/-b[class|style],-em/-i[class|style]," +
"-strike[class|style],-u[class|style],##p[id|style|dir|class|align],-ol[class|style],-ul[class|style],-li[class|style],br," +
"img[id|dir|lang|longdesc|usemap|style|class|src|onmouseover|onmouseout|border|alt=|title|hspace|vspace|width|height|align]," +
"-sub[style|class],-sup[style|class],-blockquote[dir|style],-table[border=0|cellspacing|cellpadding|width|height|class|align|summary|style|dir|id|lang|bgcolor|background|bordercolor]," +
"-tr[id|lang|dir|class|rowspan|width|height|align|valign|style|bgcolor|background|bordercolor],tbody[id|class]," +
"thead[id|class],tfoot[id|class],-td[id|lang|dir|class|colspan|rowspan|width|height|align|valign|style|bgcolor|background|bordercolor|scope]," +
"-th[id|lang|dir|class|colspan|rowspan|width|height|align|valign|style|scope],caption[id|lang|dir|class|style],-div[id|dir|class|align|style]," +
"-span[style|class|align],-pre[class|align|style],address[class|align|style],-h1[id|style|dir|class|align],-h2[id|style|dir|class|align]," +
"-h3[id|style|dir|class|align],-h4[id|style|dir|class|align],-h5[id|style|dir|class|align],-h6[id|style|dir|class|align],hr[class|style]," +
"-font[face|size|style|id|class|dir|color],dd[id|class|title|style|dir|lang],dl[id|class|title|style|dir|lang],dt[id|class|title|style|dir|lang]",
theme : "advanced",
force_p_newlines : true,
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_resize_horizontal : false,
theme_advanced_resizing : false,
nonbreaking_force_tab : true,
apply_source_formatting : true,
theme_advanced_buttons1 : "bold,italic,underline,separator,spellchecker",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
spellchecker_rpc_url : "tinymce/jscripts/tiny_mce/plugins/spellchecker/rpc.cfm"
});
</script>
</cfif>
I have implimented the Plugin spellchecker (for ColdFusion) by Richard Davies - Version: 2.0.4. but this does not have any effect. download here
Any help would be much apriciated.
Not sure I have an "answer" for you. But the reasons that it might not show up are:
case sensitivity
Bad pathing (plugin in the wrong place).
Wrong Idendifier (paste,spellchecker... instead of "spellchek" for example).
Open Firebug or Charles and take a look at resources that are being called but failing. I'm guessing you will get a clue from that.
You have a small error in your valid_elements option. On the first line of that value, the +a element rule ends with a pipe character after the class attribute:
valid_elements : "+a[id|style|rel|rev|charset|hreflang|dir|lang|tabindex|accesskey|type|name|href|target|title|class|]" +
Try removing it so it ends class] and not class|]. This seems to be enough to stop the SpellChecker from working, although for me the TinyMce instance still loads ok, so I'm not sure this is the issue for you.
Otherwise I'm finding the SpellChecker plugin you're using works fine with Adobe ColdFusion 9.0.1 - it is written specifically for CF, but the docs don't say which versions are supported.
I used pip to install it, and followed the usage directions found here: http://django-tinymce.googlecode.com/svn/tags/release-1.5/docs/.build/html/usage.html under the section "The HTMLField model field type". I re-synced the db (not even sure that was needed), restarted apache2, and yet the text field is still just a textarea.
Any suggestions on what I am missing? Do I need to somehow link the django-tinymce templates into my media directory?
EDIT: Initialization code for the texarea, as requested:
<script type="text/javascript">tinyMCE.init({"relative_urls": false, "spellchecker_languages": "Arabic=ar,Bulgarian=bg,Bengali=bn,Bosnian=bs,Catalan=ca,Czech=cs,Welsh=cy,Danish=da,German=de,Greek=el,+English / British English=en,Spanish / Argentinean
Spanish=es,Estonian=et,Basque=eu,Persian=fa,Finnish=fi,French=fr,Frisian=fy,Irish=ga,Galician=gl,Hebrew=he,Hindi=hi,Croatian=hr,Hungarian=hu,Indonesian=id,Icelandic=is,Italian=it,Japanese=ja,Georgian=ka,Khmer=km,Kannada=kn,Korean=ko,Lithuanian=lt,Latvian=lv,Macedonian=mk,Mongolian=mn,Dutch=nl,Norwegian=no,Norwegian Bokmal=nb,Norwegian Nynorsk=nn,Polish=pl,Portuguese / Brazilian Portuguese=pt,Romanian=ro,Russian=ru,Slovak=sk,Slovenian=sl,Albanian=sq,Serbian / Serbian Latin=sr,Swedish=sv,Tamil=ta,Telugu=te,Thai=th,Turkish=tr,Ukrainian=uk,Vietnamese=vi,Simplified Chinese / Traditional Chinese=zh", "elements": "id_Body", "language": "en", "directionality": "ltr", "theme": "simple", "strict_loading_mode": 1, "mode": "exact"})</script>
Your config:
tinyMCE.init({"relative_urls": false,
"spellchecker_languages": "Arabic=ar,Bulgarian=bg,Bengali=bn,Bosnian=bs,Catalan=ca,Czech=cs,Welsh=cy,Danish=da,German=de,Greek=el,+English / British English=en,Spanish / Argentinean Spanish=es,Estonian=et,Basque=eu,Persian=fa,Finnish=fi,French=fr,Frisian=fy,Irish=ga,Galician=gl,Hebrew=he,Hindi=hi,Croatian=hr,Hungarian=hu,Indonesian=id,Icelandic=is,Italian=it,Japanese=ja,Georgian=ka,Khmer=km,Kannada=kn,Korean=ko,Lithuanian=lt,Latvian=lv,Macedonian=mk,Mongolian=mn,Dutch=nl,Norwegian=no,Norwegian Bokmal=nb,Norwegian Nynorsk=nn,Polish=pl,Portuguese / Brazilian Portuguese=pt,Romanian=ro,Russian=ru,Slovak=sk,Slovenian=sl,Albanian=sq,Serbian / Serbian Latin=sr,Swedish=sv,Tamil=ta,Telugu=te,Thai=th,Turkish=tr,Ukrainian=uk,Vietnamese=vi,Simplified Chinese / Traditional Chinese=zh",
"elements": "id_Body",
"language": "en",
"directionality": "ltr",
"theme": "simple",
"strict_loading_mode": 1,
"mode": "exact"
})
works fine for me when i change the parameter "elements" to the name of one of my textareas on my page. I suppose you do not have a html element with the name "id_Body", right? If so, change the parameter to the name of one of your html-elements on your page.