I have a custom module that works with a custom data type and part.
In my edit view I have some textareas but these are no rendered by CKEditor.
Only BodyPart html text areas are rendered (like in pages & blog posts).
How can I do this?
References: https://orchardckeditor.codeplex.com/
CKEditor needs to be initialized, either sneak in somewhere this javascript line
CKEDITOR.replace(textarea);
or append class ckeditor for auto-initialization
<textarea class="ckeditor"></textarea>
If it doesn't work you may also need to add script requirement to your edit view
Script.Require("CKEditor");
Related
I want to automatically load up adverts inside the body of my blog website
For Example:
<div class="dynamic-ads-div"></div>
After loading up ckeditor 5, i want to replace the above element with an advert code from platforms like ezoic, google, etc. I have tried to put the code directly in the blog post body, but ckeditor keeps filtering, after rigorous research, i could only preserve the custom html elements like <ins>, but any form of script tags are filtered out, i want to use the approach of loading up ckeditor before adding the advert code dynamically, I tried editor:
document.querySelectorAll(".dynamic-ads-div").forEach(ads => { ads.innerHTML = '<script src="LINK_TO_ADS_PLATFORM"></script><custom-element></custom-element><script>INIT_ADS_CODE</script>' }).
Ckeditor completely ignores the above code.
Any form of help will be greatly appreciated; If you can help me preserve the script tags, or help me insert content dynamically after loading up ckeditor.
Thanks
Several questions in one here but I suspect will all have the same answer.
Using the CKEditor in a CakePHP project where the content being edited is to make the html part of an email.
Most email applications don't fully support HTML net alone true HTML5.
An example of which is to center text in an email paragraph you use either <p align=center> or <center></center>
In the CKEditor when in source mode editing if do a <p align=center> and save it (or just toggle the source edit mode) it removes the align=center because in HTML5 that's no longer valid.
How can I allow this in the CKEditor?
Can I enable HTML4 validation instead of HTML5?
I also have a table in the template where half of it is edited in a field(textbox) called Header (the header of the email template) and another field called footer.
In the Header I want <table><tr><td>
In the Footer I want </td></tr></table>
Then my message content is placed in the TD cell between the header and footer.
However the CKEditor won't allow me to have an HTML TAG and not its closing TAG.
Any ideas on how to make this happen as well?
Regards
Ian
To change the HTML that it's accepted by CKEditor, adjust its ACF settings. The simplest way is to allow everything:
config.allowedContent = true;
That won't solve the halve tables part.
For that you can try to use config.protectedSource, defining a rule for both the opening and closing parts, but taking care to add also something there that allows you to target only that table and not any other table that might be in the content.
(Of course the best solution would be to but that table outside the editor when you create the mail with all the parts)
How can I show documents created with Ckeditor in read only so that they as much as possible like in the editing mode but without having to create the editor for each message?
In my project users can send messages to each other among many other things and they create the messages using Ckeditor. I would to render message threads in readonly mode without having to create the Ckeditor for each message. Doing that would be slow and would consume a lot of vertical space. Another problem with that approach is that removing the toolbar removes formatting. I would like to just have the messages in div tags and add a class to them and then include Ckeditor css file. Or also acceptable would be to have one element with certain class whose children would get the Ckeditor styles. Before putting the messages in the html response I do whitelisting on the server so the docs are safe to put inside for example a div tag.
I solved this by wrapping the message in an iframe element and added dynamically a style element that links to the Ckeditor style sheet. Now the message gets Ckeditor styles and I don't need to create the editor at all in the read only state and the rest of my page unaffected by the Ckeditor styles.
I'm modifying a website, built with AngularJS, and in one page I have a WYSIWYG editor.
The whole widget that includes the editor, is a div that has 'ng-controller="TextsController"'.
In this div I have a button, clicking on it displays the editor. And the initializing of the editor happens in a directive - "richTextEditor".
So - I'm making a popup in this editor, that has to show some images from the server. I put the code for pulling the images in the controller ... and there I set
$http.get('/url/to/files').success(function(data) {
$scope.imagesFromServer = data;
});
and in the view I have
'ng-repeat="image in imagesFromServer"'
And the problem is that the ngRepeat doesn't see any items.
I have two ideas:
The view, containing the ngRepeat (the HTML for the editor, and the popup with the images as well) loads with AJAX, and at that very moment the scope variable is not set.
I'm initializing the scope variable in the wrong place. (Eventually has to be in the directive instead of the controller? ... but all examples I've seen and done so far - pull every data in the controller, and the view sees it directly.)
Hope I've described the situation clearly.
Thanks in advance.
I am trying to implement CKEditor v4.3.2. The way our product is set up is there are multiple areas of our pages that can be edited - we open an editor in a modal window and use the iframe method for editing. It works great with one exception:
If the page DOM looked something like "body > div#container > div > div#editcontent"
and there was CSS rules targeting that DOM then the CSS does not apply in the editor because the editor DOM is simply "body"
What I would LIKE to do is supply the editor with the HTML DOM Structure of the page that holds the editor so the ContentCSS rules that normally impact the div would still apply (e.g. white background in the div instead of background color from the body tag)
I am at a loss for how to accomplish this.
Thanks!
If you want the content of editor to inherit styles of your page, so a full integration with all the styles applied with every kind of selector, then you would have to use inline editing. Only inline editing offers that.
When using classic editor (the one using iframe) you still have an option though. It's the config.bodyClass setting which lets you assign a class to the body element into which contents is loaded. Then, if all your contents styles selectors starts with that class and a stylesheet is loaded using the config.contentsCss setting, the content inside editor will look similarly to your final page.