working with xml snippets in CKEditor - ckeditor

I am Using CKEditor in my application where the users can write blogs, create pages etc..,
Source mode is disabled for the editor. Writing xml in the editor's text area is not retained after saving the content. I clearly see that the content got HTML Encoded and the same is supplied as input to the CKEditor's textarea.

Works as designed. Whatever you enter into the WYSIWYG area, will get HTML encoded. How would you want to behave it differently?
If you want a text editor for writing XML, maybe the answers to this question are useful: Textarea that can do syntax highlighting on the fly?

I too want CKEditor to support XML tags, but I understand that you can't just type them into the main window - anything typed here is assumed to be actual content, not tagging, and therefore gets encoded.
What I'd like to do is define a list of styles that cause a tag of my choosing to be used, e.g. if the user chooses the 'example' style, CKEDitor does <x>content</x>. Unfortunately I haven't had much success with this, despite hacking the dtd.js file.
My current solution is to define a list of styles but map them to a standard HTML tag, then put my desired XML tag name in as an attribute. I'll then need to write some XSLT that transforms the data later.
CKEDITOR.stylesSet.add('myStyles',
[{
name: 'Example sentence',
element: 'span',
attributes: {'class': 'example', 'data-xmlTag': 'x'}
}];
config.stylesSet = 'myStyles';
element specifies a standard HTML tag – I use <span> if I want the XML to be inline and <div> if I want it to be block level. The data-xmlTag attribute says what XML tag I actually wanted to use (x in this case). The class allows me to define some styles in CSS and means I can group several XML tags under one class name. To define some CSS:
config.contentsCss = CKEDITOR.basePath+'tagStyles.css';

Related

How do I tell CKEditor 5 to use inline styling on the elements which it creates instead of them being class-based?

I'm using CKEditor 5 on my website in order to allow users to generate PDF templates for their company.
My issues is, that once I take the data out of the ckEditor, every styled element has a class="CSS-Class-Here", which is problematic due to the fact that when I convert the HTML contents of the CKEditor to PDF, the PDF doesnt know any of these classes.
Is there any way to get CKEditor to save these classes as inline styles?
I know that its possible to create a plugin for a specific element for a specific style, but I want everything to act this way, not something specific.
Also, It's impossible to just inject the styles into the PDF itself, due to the fact that ckEditor keeps their styles in javascript functions and creates them on demand.
For example:
Yellow highlighted text comes out as:
<mark class="" marker-yellow "">Random Text</mark>
I would like it to come out as:
<mark style="background: yellow">Random Text</mark>
Meaning that the style that's present in the marker-yellow class should be applied inline directly to the element itself.

Allow only phrasing content in CKEditor textarea mode

With HTML editors such as ckeditor, there seems to be a convention to distinguish between editing HTML inside <textarea/> content, and »inline« editing via contenteditable.
When doing the latter, the editor automatically recognizes the difference between elements that allow flow content (i.e. <div/>) and such ones that only allow phrasing content (i.e. <p/>) and allows only valid elements inside the respective contenteditable.
I need a way to edit HTML inside of a <textarea/> with ckeditor, while allowing only phrasing content. Is there a way to achieve this?
I found a bit of a hack way of doing this. I looked up CKEDITOR.inline() in the source tree in ckeditor-dev/core/creators/inline.js. The existing code automatically creates a <div/> tag if you want to inline-edit a <textarea/>
Then I monkey patched it to accept an additional string argument, which determines the name of the automatically created contenteditable element, which is otherwise hardcoded to be a <div/>.

How to apply formatting to content of a span

With CkEditor, When I create an A tag and later apply some custom formatting (like color text for instance), the resulting source looks like this:
<p><span style="color:#1abc9c;">some text</span></p>
As you can see, the formatting is around the text but INSIDE the A tag.
I have a personal plugin that outputs a SPAN tag with a specific class. In the wysiwyg editor, when I select the text and apply the same formatting, I get this:
<p><span style="color:#1abc9c;"><span class="command3d">Some text</span></span></p>
This time, the formatting is not simply around the text. It is applied around the SPAN tag.
How can I control this behaviour? I would like to get this result instead:
<p><span class="command3d"><span style="color:#1abc9c;">Some text</span></span></p>
Thanks
Unfortunately there is no ability to control the order of inline styles (based on span tags) inside editor's instance. The only sensible way to achieve desired result is to start with applying text color and then apply your custom style.
However there are two methods to convert output of the editor to the correct format. The first is to add custom handler to editor's data processor via toDataFormat event to check ancestors of span.command3d and swap them in places if necessary. However it's a little bit troublesome as you must traverse through all content, therefore it's easier way: add element callback to editor's filter. Example.

Allow copy / paste in a text_area field form but remove formatting

I have a text_area field in a form which allows some text formatting through a very simple WYSIWYG (bold / underline / bullet points). This was aimed at having a consistent formatting in the description profile of the users.
<%= l.text_area :access, value: "#{t('.access_placeholder_html')}" %>
Nevertheless, some users usually filled the text_area by copy / pasting directly from their website. And their specific formatting "hypertext links", font size, etc. is after reflected on my website, which makes it a bit dirty.
How can I solve this problem. Ideally I would love that when saving the form it gets rid of all the HTML code that is not allowed instead of not allowing copy / paste. Is this possible? Was wondering if should use Sanitize but if so how? (Sorry new to code, I guess you would have understood).
You didn't say which version of Rails, but you could use #sanitize from ActionView::Helpers::SanitizeHelper module to strip all the HTML formatting. It scrubs HTML from text with a scrubber. The default scrubber allows optional whitelisting of attributes. You can even build your own custom scrubber to modify the string if you need more control over what is output. The module also contains #strip_tags and #strip_links, which are very simple scrubbers that remove all HTML tags and all HTML link tags (leaving the link text).
Note that you can wind up with malformed text if the user's input wasn't valid HTML.
Quick examples from the docs:
// remove all HTML tags except <strong> <em> <a> and the
// <href> attributes from #text
nomarkup_text = sanitize #text, tags: %w(strong em a), attributes: %w(href)
// remove all HTML markup
strip_tags("<b>Bold</b> no more! <a href='more.html'>See more here</a>...")
returns the string Bold no more! See more here...
// remove just the link markup
strip_links('Please e-mail me at me#email.com.')
returns the string Please e-mail me at me#email.com.
More detail at the API page for SantizeHelper

Can't insert html with <object> tag

I'm struggling with ckeditor 4.5, as I'm creating plugins to insert specific tags in current document after having uploaded a file on my server.
For some specific file types, I want to embed the element. I can add <audio> or <video> tags (by using allowContent=true in my config file), but when I insert an <object> tag (to embed a pdf file), the tag is just ignored.
I already tested adding config.extraAllowedContent = 'object[id, name, width, height, data, type] to the config file, with no avail.
I found some workarounds by adding a <div> around the <object>, but the pdf viewer is not displayed in the editor (but the <object> tag is there).
I think I'm doing something wrong with ACF, but I really don't see what.
only wrapped the tag with or , and if you use wordpress , or drupal try to disable Advanced content filter from cms
<object> is not recommended for PDF and should not be a part of an editable area. There is no way it can be editable like text or paragraph. However, it can be a non-editable element inside the editor, with some editable parts. This is what CKEditor call widget, here is a tutorial how to create it: https://ckeditor.com/docs/ckeditor4/latest/guide/widget_sdk_intro.html
Note PDF format is not normally classed as "Media" more generally "Document" but there are two ways to embed. One is to use the allMedia plugin that does include PDF as a media format ;-) the other is to include content via google docs. So review the various "Demonstrations" on the website.

Resources