Pasting HTML into CKEDITOR - ckeditor

How can you paste HTML directly into a CKEDITOR without clicking source? I can test that the settings support the tags I paste because it works if I paste after clicking "source." I've tried "full html" input type and my custom text input type.
But if I paste directly the code gets cleaned/converted.
For example this:
<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Louisiana has a chance to have a really great Governor in #EddieRispone. Auto insurance costs and taxes will be coming way down with Eddie, and your 2nd Amendment will be protected. Current Democrat governor has done a really poor job! VOTE EARLY FOR EDDIE!</p>— Donald J. Trump (#realDonaldTrump) November 2, 2019</blockquote>
renders as this (unless pasted into source):

You have to use the source button to EDIT the source code.
The code you're trying to put is only usable in html. So your script is going to read this as TEXT and not as HTML like you cant. You have to put it via the source code button.
Or you can use PHP to parse your document but it's not the easiest way to do this.

Related

CKEditor and HTML in Xpages

I am understanding this better but still not there yet.
I have a notes document with a rich text field. I want to edit it in Xpages, so that the user can enter text for an email that an agent will generate. The idea is that the user should be able to enter styled text, hopefully including pasted graphics, and this is saved to the rich text field in such a way that a later agent can copy that field to the body of an email.
On the form I have checked the field "Store contents as HTML and MIME.
In the Xpage I have bound the CKEditor directly to the field (can bind it to a scope variable if necessary).
The code in my agent is as follows:
Set rtItmFrm = emlDoc.getFirstItem("Body")
Set rtItmTo = New NotesRichTextItem(mail,"Body")
Set rtItmTo = rtItmFrm.Copyitemtodocument(mail,"Body")
Any further suggestions on reading up on MIME/CKEditor etc would also be much appreciated.
Bryan
=========================================================================
I just discovered how to modify the CKEditor in Xpages (the Rich Text Control). I have the full menu and one or two more things turned out. However, I am really puzzled by how it treats HTML. I would like to put a template for a nice HTML email (like a newsletter). Anything even a little complicated it munges and the output is messed up.
I read enough online to understand that it is not supposed to be a HTML editor, but I am really having trouble getting the results I want. I would love to put some basic skeleton HTML in there, but everything but the simplest code doesn't work.
Is there anyway to import HTML and it not get messed up using this editor?
as Per and Stephan said, Have a look at ACF filtering that is 'server side' (This is not related to CKEditor itself, but it is related to XPages).
If you have a look at the inputRichText control you will see 2 properties.
htmlFilter
htmlFilterIn
These properties determine how to filter Html on the way in to your data, and also on the way out.
This can be used to strip styling out, and also to prevent dangerous tags like some bad code here etc.
By Default the htmlFilter is set ACF (Active Content Filtering) if you look at the default rules, you will see it strips things like 'margin' out.
see /properties/acf-config.xml-sample
There is a filter called 'identity' which means don't filter anything, however beware if you use this you are not protected from and maliciously entered html.
You should look into defining your own set of rules for your ACF filter, this way you can choose which elements to remove. There is a section in Mastering XPages book about this.
If you still have any trouble, then there are some settings in CKEditor config which also control ACF (totally separate to XPages server side)
I don't think CKE changes the HTML, it is the writing back to a RT field.
Try and bind your RichText Editor to a scoped variable instead of a RichText field. This way you have access to the raw HTML and can use that to generate a MIME email. You might want to have a look at Mustache for mail merge.
Use this article series as starter how to prepare CK editor to make this possible.
And as Per mentioned: check the filtering.

CKEditor with HTML content stores, displays but cannot display for edit

I have used CKEditor for a few years without really understanding it. I now want to use it to display text which will include HTML, CSS, JavaScript and PHP example code. None of that needs to execute it is just to show the code to others.
Currently I used the textarea replace method to edit content and I need to carry on that way. When I add the content first time it is sanitised (mysqli_real_escape_string) and stored in a MySQL database correctly. It also then displays correctly with the CKEditor markup working as markup and the HTML/PHP showing as a code example. However, when I edit the content a second time the HTML examples become "real" HTML and are no longer visible as examples.
For example this:
<?php echo "hello"; ?>
<p>Hello</p>
is correctly (?) stored as:
<p><?php echo "me"; ?></p>
<p><p>Hello</p></p>
and displays on the page as shown in the first code snippet (which is what I want). When I then hit edit again the code examples vanish into the background as real HTML (part of the page). If I put the code examples in as code snippets (which I would rather not have to do because of the intended users) the result in the editor (second edit) looks like this:
<!--?php echo "me"; ?-->
Hello
I am sure i am missing a basic understanding of what is going on behind the scenes but can anyone explain how to allow users to type in text which includes HTML, CSS, JavaScript, PHP and MySQL code examples which must then appear as examples and not markup (and be editable as examples).
I have played with config.entities and config.protectedSource after some research but they do not seem to be relevant (or to work). Weirdly a couple of times it seemed to work fine and I thought I had cracked it but then stopped with no further changes to the config. That means I now have less idea what I am doing than when I started!
You don't mention which version you are using, but if it's relatively new (4.4+) you can use the Code Snippets plugin that was designed exactly for this. See the demo at http://ckeditor.com/demo#widgets. It might help with the encoding issues too. There's docs on it too.
Th help with the current encoding issue, it would help a LOT if you showed us how you output the data and load it into CKEditor. For example "When I then hit edit again" doesn't really describe anything without context. For example, do you use setData() with AJAX? Do you use an inline editor? Code examples would be the best.

Cannot add inline image/picture to a Rich Text control

I have a Rich Text control bound to a Body field in my Domino Document data source ... all is good for formatting text , :) emoticons and the usual stuff. The problem is when I try to paste or upload an inline image I get the following error shown in the inline image (hmmmm, works here) ...
Most likely a mis-understanding of the steps:
Select the file
Click on upload image (<-- that one gets lost on lots of users)
Click OK
For a more advanced user experience:
Use the RichText Editor Evolution from OpenNTF. That makes your life much easier.

I am using HTML snippet in to Highlight HTML and Javascript code in blog Joomla. but it's executed after saving it

while creating a article I want to show some HTML code as part of content, but after saving that article that particular snippet of HTML code get executed.
I am using joomla 1.5 | code citation extension for insert code in article. Is there any solution?
You should turn off HTML stripping, or include it as a Custom HTML Module, and writing the position in the article with load position. to load the custom HTML you've put in the Module. i.e.
{loadposition YourModulePosition}
Will load anything you place within a Custom HTML Module.
The correct way should be to paste the code into the wysiwyg (design view, not raw code view) - as long as you have a decent editor the angle brackets should be converted to html entities and it should just work.
The built-in Geshi plugin - though a little dated - is usually all that is needed to make add colored highlighting. The plugin is a little dated but after inserting your code all you need to do to make it work is add:
<pre class="html"> ... </pre>
around your html. Chenge HTML to js, css, etc depending upon the code to be shown.

CKEditor: insert HTML from clip-board at current insertion point in WYSIWYG mode?

It seems that to insert HTML into the source code in CKEditor one must view source, then scan down through the code to find the appropriate insertion point.
I have a situation where the user will have HTML in their clipboard, but will not be HTML proficient, and will have a tough time understanding where in the source they need to insert the clip of HTML
SO: Is there a way to get CKEditor to paste, into the source code, whatever is in the user's clipboard at the current insertion point while in WYSIWYG mode?
Would this require developing a plugin? If so, could anyone someone provide a high-level overview of how that would be done?
use the Embed Media plugin which is available.
Just add that plugin. Using that the user can paste the html code in a dialog box and that will be pasted in the editor wherever the cursor was.

Resources