I would like to limit the design options in the ckeditor that Mailchimp offers in editable content area's. For instance I would like to disable Text Color, Background Color, Alignment, etc.
See in this screenshot the default CKeditor that Mailchimp offers.
My question: does anyone know if this is possible at all within Mailchimp? And if so, how could it be achieved?
I think calling mailchimp support would likely be the best way to get this info - but I am going to guess that it is a no.
Your best bet is instead of disabling, setting an "!important" declarative to whatever style you want displayed so it overwrites whatever is chosen in the editor. This would need to be done in a style tag and then also inline on the p or td or span or whatever tag you inline your styles on in the template.
It is a lot of extra code and is not guaranteed to work 100% but is really only solution I can think of.
In the editor screen it will likely still show whatever they input but once it goes into the template the CSS should override it.
Related
Until now I have used
<Label Text="Some Text"</Label>
to present text for the user. However, I was wondering if this is the correct way to render big premade text strings with bullets etc. or if there is another, more neat way to do it?
I have used a WebView in the past with a transparent background. That allows as much markup as needed and is fairly easy to do. Though I have also just used a simple Label and added a bunch of \n's and \t's to make it look like a formatted document. I think it depends on your preference, the layout you are putting the element in, and if the text will be dynamically pulled or not.
There are also markdown plugins you can add that will format mark down text so thats another option. Something like this (I have not tried this plugin myself btw).
This is the closest I've seen to that, and even it doesn't do a particularly good job; it certainly doesn't integrate (if it can even be said to do so) as well as the the highlight.js blocks reveal.js supports by default (which aren't responsive and lack a bunch of the other nice features of ACE).
I tried naively embedding an ACE textbox in a slide myself, and it didn't work out well. Reveal changed the size of the thing, but even after fixing that (and setting "text-align:left") the visual cursor didn't align with the actual cursor, and the editor warning icon was tiny.
The problem with ACE and reveal.js is the are the css attributes zoom or transform: scale() which reveal uses to fit the content to the screen. ACE requires pixel fonts and does not use the scaling in calculating mouse cursor positions.
I made a small fork and added a reval.js specific check for the editor.
see https://github.com/waywaaard/ace
https://github.com/waywaaard/ace/commit/e4e3da28515ef7a58fe85378dd4dd557918fc4a6
This fixes the problem for my use cases.
My way of solving those issues is embedding ACE in an iframe instead of using it directly. I wrote a reveal.js plugin that makes embedding an ACE editor easy:
https://github.com/Gottox/reveal.js-ace
So I've been creating a custom responsive theme in Wordpress and I've hit a wall when it comes to image management. I'd like to style images in a way that wordpress doesn't seem to inherently support - I'm looking for something like this:
with the images added via the regular wordpress media management pane, and inserted into posts/pages. The images should be out of the flow of the content but accurately placed next to the correct headers/text blocks. Most importantly, the images ought to collapse into a column with the rest of the content at the correct media query breakpoints.
Here's what I've tried, from worst to best:
Hard coded images in template files
Obviously the worst option. Not portable, requires a lot of meddling, and would be almost impossible to align the images with the correct content. Also, no real way of making the images responsive with the content.
Use the default image styling and abandon the idea of pulling the images out of the regular flow
Non optimal, but it would allow anyone to change/edit images easily.
Remove images from the results of the_content(), then place and style them separate.
Portable, but has the same problems as #1 - difficult to align the images with content and keep responsiveness.
Use the featured image on pages that only require one image
Pretty good option for pages that need ONLY one image, but there is no easy way to make the featured image an arbitrary size/aspect ratio.
Use markup in the editor to correctly layout the images
Requires anyone editing the posts/pages to have some knowledge of the underlying theme. This seems to work the best, but it isn't portable (might break stuff on theme change).
While I've had the best results with this option, it seems sort of antithetical to using a cms/wysiwyg editor in the first place.
My question is whether or not the last option really is the best to get the result I want?
In the end, the answer was clearly custom fields, and none of the other options I listed. With the advanced custom fields plugin, it becomes a breeze to do what I wanted. You don't need the plugin, but it makes image management a whole lot easier, as it fully integrates the wordpress media library with the custom field (which you would have to do manually otherwise). With the plugin, custom fields meet all of my needs (responsiveness, portability, and ease of use for the technically challenged).
I've been searching through a large number of CKEditor posts and have yet to find a targeted answer to this question. I know CKEditor is very configurable (which I haven't leveraged yet.)
For every formatting action performed, CKEditor wraps it in a separate span tag. So if I 1) change the font to Arial 2) change the size to 36px 3) change the color, I end up with this HTML which seems unnecessarily verbose.
<p><span style="color:#DAA520"><span style="font-size:36px"><span style="font-family:arial,helvetica,sans-serif">Hi</span></span></span></p>
I would rather it just did something like <p style="..styles list">Hi</p>
My question: Is this configurable (and how), and/or is there a rationale for them doing it this way where I should just accept the behavior?
It certainly seems like a relatively clean means of implementation on CK Editor's part, and would help it avoid conflicting logic for different styles applied to dissimilar spans.
If you as the user want consistent differences with multiple variables like size, color, or font, you should really be using classes, I would think. A WYSIWYG editor like CK is designed to implement HTML code that is readable, not pretty. If you want more elegant code, you probably need to write it yourself.
Since other adaptations from WYSIWYG editors/ word processors generate obscene looking code, e.g. Microsoft Word/ Outlook, or Adobe's new CSS from layout feature, this span output isn't actually too bad.
I've been looking for a solution for this for a while now and the only fixes I found only affect the way the text is displayed in the editor itself and not how the generated text will look when sent/saved somewhere else. I'm talking CSS fixes and stuff like that.
I'm using CKEditor to compose and send emails trough our web application and while the css fixes change the font shown in the editor itself, the recieved emails are still displayed in TNR or whatever is inherited from the email client. Unless, of course, I change the font and size from the plugin for each paragraph.
From what I've noticed whenever you set the font and size from within the plugin, CKEditor creates a span (well, actually two, one with the font and one with the size) with the newly changed style (for example <span style="font: Arial"><span style="font-size: 12"></span></span>) and I figure I could just wrap the whole result in a span or div with my desired font and size styling, but that might interfere the users' templates and styles.
Is there any way to set the default text styles (as seen by the recipient of the emails) from the plugin itself or will I have to come up with a hack to it.
This is the only way I have found to force ck editor to create a default font. IE it wraps entered text in a (default) font span even if no font has been selected, and therefore will output formatted text. If you want the changes to be universal, add the following to config.js. Otherwise, it should be possible to add it to just one instance as well. Though I haven't tried that.
config.font_defaultLabel = 'Arial';
This will make the drop down default to 'Arial'. Though even this doesn't work the way I would hope. First, the editor must be activated (not just loaded) for the drop down to default. Then unlike a manual selection the value is not highlighted in the drop down box. It just displays.
Then add this below your default configuration options:
CKEDITOR.on( 'instanceReady', function( ev ) {
ev.editor.setData('<span style="font-family:Arial, Verdana, sans-serif;"></span>');
});
This will pre-populate the text area with the span you need. However you must include some character(s) in the span tag to force this 'hack' to work. So you're going to be stuck with something in your output you don't really want.The original version of this I found somewhere on the web used:
Which seems relatively innocuous.
I have looked and looked for a better way (and would love if someone knew one). Most people simply say capture the output and reformat it. That really wasn't an option for me. It may also be possible to accomplish this with a custom plugin. That too wasn't really viable for me.
Hope this helps someone save some time at least.
P.S. The original came from the support board at CK editor. Here is the link: forum
If you want to change style of text outside editor, then you have to style it... outside editor :). AFAIK in email stylesheets can't be used, so the thing that left you is wrapping with div having inline styles.
To have the same result in CKEditor you should edit contents.css and set the same styles for body as for div wrapper.
Next step would be to remove format combo from toolbar, because it's based on markup. For emails it'll be better to use styles combo, because you can define inline styles, tags and attributes that are applied with each style. Check styles.js.
Add this into your config.js File
CKEDITOR.config.font_defaultLabel = 'Arial';
CKEDITOR.config.fontSize_defaultLabel = '20';
Then it will be changed when your CKEditor was triggered.