I have cms block in magento where one div element have style property with backgroud-image and value is magento style URL
<div class="contain-wide" style="background-image: url('{{media url="wysiwyg/spare-parts.jpg"}}')">
problem is when I turn on wysiwyg editor this line gets edited to
<div class="contain-wide" wysiwyg="" spare-parts="" jpg="">
and no longer is valid inline css.
things I tried are adding these settings to /js/mage/adminhtml/wysiwyg/tiny_mce/setup.js
cleanup_on_startup: false,
trim_span_elements: false,
verify_html: false,
cleanup: false,
valid_elements: '*[*]',
unfortunately that only disables html verification, css is still edited auto by tinyMCE.
You should be able, via the wysiwyg, to select part of the page then click on insert/edit attributes (on the last line of tinymce tools, there is a hand on top of a little box) in which you should be able to edit attributes and maybe make what you need.
This will in fact crate a div for you and in this pop-up box you can select which style you want on this div.
Edit : but as #GCyrillus commented on your question I would recommend you to do it via style, because that would means an admin only wanting to edit the content could break the site visual layout.
instead of using the MCE use a direct path. ie. src="http(s)://yourimage.jpg">
Related
I'm using CKEditor to allow users to edit HTML documents. I need to allow the users to be able to place any kind of CSS or HTML into their documents. When the user's document CSS has !important rules they change the styling of the CKEditor toolbar.
This can be seen here: https://jsfiddle.net/hqpfjzyr/1/
Click on the "Link Preview" and you'll see the buttons of the toolbar are also red.
This behavior is described by the CKEditor docs here (https://docs.ckeditor.com/ckeditor4/latest/guide/skin_sdk_reset.html) but I can't seem to figure out how to apply it. My skin stylesheet includes a reset.css but it doesn't seem to affect the styling.
The only thing that I can think of is to add more CSS targeting the toolbar and explicitly setting every attribute to the correct value with !important rules but that seems like a daunting task.
What am I missing here?
This behavior is described by the CKEditor docs here (https://docs.ckeditor.com/ckeditor4/latest/guide/skin_sdk_reset.html) but I can't seem to figure out how to apply it. My skin stylesheet includes a reset.css but it doesn't seem to affect the styling.
What is described on CKEditor docs doesn't include case with !important flag, because it can't work like you want to. This flag overwrites other css rules including ones in reset file. If you still want to use !important inside editor you might consider to use classic editor instead of inline. Change CKEDITOR.inline( to CKEDITOR.replace. How does that help? Classic editor is rendered inside iframe, which has separate styles that can't affect anything outside it.
I am trying to contenteditable attribute of summernote html editor pluging making false on page loading , but it doesnt affect.
Here My JS Code:
<script>
$(function(){
$('div#son_durum').children('.note-editor')
.children('.note-editing-area')
.children('.note-editable')
.attr('contenteditable',false);
});
</script>
What Can I Do Achive This?
Thanks
Why did you try to set contenteditable as false? Just leave it and don't initiate summernote on div#son_durum when your page is loading.
Or, do you want to toggle enable/disable state of summernote? A similar issue was already reported. See https://github.com/summernote/summernote/issues/1109
Using v0.8.2.
Here's my solution, though it's not perfect, especially if the developers change the html and or class names, but it works for what I need.
My MVC application has many summernote controls being dynamically added to a page, and each has an ID assigned to it. Some controls only display the image (upload) button, while others only display the text style buttons. For my image-only summernote controls I don't want the user to have the ability to type text, so I have to only disable the text-entry/image panel, not the whole control. This way I still allow the buttons to be used.
Here is my solution, and this works! Make sure this fires after the summernote control initialization.
var container = $('#summernote2').nextAll('div.note-editor:first').find('.panel-body');
if ($(container).length)
{
$(container).prop('contenteditable', 'false');
}
What's Happening?
Within my specific summernote control (id = summernote2), I locate the first div immediately below it with the specific class ('note-editor'). All of these are added dynamically to the page when the control is initialized. See the image below:
Then, using FIND, continue to work down the tree looking for the class 'panel-body', which is where the text is actually placed, highlighted in the image above.
Assuming I find it, then I change the contenteditable property to false. BAM!
There is probably more chaining that could be done, and perhaps more efficient methods but this works pretty neatly.
Why this way?
Because I have multiple controls on the page, and nothing directly linking my ID'd summernote DIV to all those other DIVs that are created as part of the initialization, I thought this was a good solution. Otherwise, how could I guarantee getting the correct panel-body class?
Good luck and let me know what you think! If this answers your question sufficiently, remember to check it as answered!
In a perfect world you'd think the developers would have made it easier. This should be all it takes, but no it doesn't work...:
$('#summernote2').summernote('contenteditable','false');
Im looking to use CKEditor for a tool that will let users assemble html content from a set of predefined plugin widgets that put placeholder content onto the page. This seems very doable, however I want my html source to contain comments that I will embed flags that I will use to process and replace placeholder content with the needed actual content. It seems that the ACF filter will likely remove any elements that are not configured as allowedContent if the user were to go back and forth with the source button. And I'm not certain it won't remove it as it is added to the current content and moved around. http://docs.ckeditor.com/#!/guide/plugin_sdk_integration_with_acf
I'm I correct that this would become an issue and if so
can anyone show me an example of how I can configure the ACF allowedContent to keep a html comments in a block like this:
<hr><!-- this is my comment -->
<b>test</b>
<!-- this is my end comment --><hr>
with out losing the comment in the finial html output? I also do not want to disable filtering with the CKEDITOR.config.allowedContent = true; even if that would work.
Thanks
I've got 2 CKEditor instances. One editor (A) supporting a number of widgets, another editor B has an Advanced Content Filter with these settings to make sure only <p>, <br>, <em> and <strong> tags are allowed in the second editor:
config.allowedContent = 'p br em strong';
My widget contains an image and some other tags and this filter setting:
config.allowedContent = 'img div figure figcaption';
When text containing this kind of widget from editor A is pasted into editor B, I would like the editor to strip out the widget but it doesn't. This makes sense because the allowedContent setting of the widget makes sure that the image is not removed.
However, my second editor does not know anything about this widget and I would like to configure the filter to strip out all widgets pasted in.
I've tried adding the Disallowed Content setting to editor B:
config.disallowedContent = 'img div span figure figcaption';
But without succes, I keep getting the widget div's in editor B.
Same goes for pasting the widget into editor 4 of the sample editors provided by CKEditor. The widget is inserted even if the ACF does not allow it.
Is there another filter option to prevent widgets from sneaking into the body?
Unfortunately there's no easy way to filter pasted events with the ACF at the moment - see http://dev.ckeditor.com/ticket/11115. It has the 4.5.0 milestone assigned, but I don't feel that we'll manage to make this change in this version. There are architectural limitations which make this ticket very complex.
What you could try to do is to intercept pasted content on the editor#paste, parse the content and filter pasted widgets manually. The hard thing (the actual #11115 blocker) is that in the pasted content you'll find upcasted versions of widgets, with all wrappers, all internal attributes etc. ACF cannot be applied to this content directly because ACF is supposed to filter downcasted versions of widgets. Therefore you need to filter this more manually or with a special CKEDITOR.filter instance.
You can find this question useful - Apply CKEditor Advanced Content Filter to a string.
I am new to TinyMCE. I wanted to customize the HTML generated by the Rich Text Editor (RTE) to be saved with tags without 'style' attribute.
For example, here is what I want to achieve:-
If i change the font of text in RTE to color red (#ff0000), the HTML generated is:-
<p><font style="color: #ff0000;">Some text to format</font></p>
But I want the HTML to be stored as :-
<p><font color="#ff0000">Some text to format</font></p>
I am aware that <font> tag is deprecated, but I need to render this HTML in a Flex application which supports naive HTML.
I tried the following configuration:-
inline_styles : true
I also tried setting it to false, just in case I was comprehending the semantic, opposite.
But no success so far.
Any pointers shall be appreciated.
Thanks,
Mangirish
TinyMCE tries to stay away from deprecated things (at least it did when I was a little more engaged in it, many months ago), so you may expect a lot of troubles.
The option inline_styles (when set to false) is expected to do what you want, so it may be a bug. You may ask about this problem on their forums. (The main creator of TinyMCE, Spocke, is a friendly man, who often answers this type of questions.) Just be sure to show them the full configuration you have.