Cannot add inline image/picture to a Rich Text control - ckeditor

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.

Related

Pasting HTML into 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.

Laravel Save Markdown to Database - Don't Understand

I am reluctant to post this, but I am having trouble understanding how markdown actually "saves" to a database.
When I'm creating a migration, I will add columns and specify the type of value (i.e. integer, text, string, etc.) and in the course of operation on the website, users will input different information that is then saved in the DB. No problem there.
I just can't seem to wrap my head around the process for markdown. I've read about saving the HTML or saving the markdown file, rendering at runtime, pros and cons all that.
So, say I use an editor like Tiny MCE which attaches itself to a textarea. When I click "Submit" on the form, how does that operate? How does validation work? Feel free to answer my question directly or offer some resource to help further my understanding. I have an app built on Laravel so I'm guessing I'll need to use a package like https://github.com/GrahamCampbell/Laravel-Markdown along with an editor (i.e. Tiny MCE).
Thanks!
Let's start with a more basic example: StackOverflow. When you are writing/editing a question or answer, you are typing Markdown text into a textarea field. And below that textarea is a preview, which displays the Markdown text converted to HTML.
The way this works (simplified a little) is that StackOverflow uses a JavaScript library to parse the Markdown into HTML. This parsing happens entirely client side (in the browser) and nothing is sent to the server. With each key press in the textarea the preview is updated quickly because there is no back-and-forth with the server.
However, when you submit your question/answer, the HTML in the preview is discarded and the Markdown text from the textarea is forwarded to the StackOverflow server where is is saved to the database. At some point the server also converts the Markdown to HTML so that when another user comes alone and requests to view that question/answer, the document is sent to the user as HTML by the server. I say "at some point" because this is where you have to decide when the conversion happens. You have two options:
If the server converts the HTML when is saves it to the Database, then it will save to two columns, one for the Markdown and one of for the HTML. Later, when a user requests to view the document, the HTML document will be retrieved from the database and returned to the user. However, if a user requests to edit the document, then the Markdown document will be retrieved from the database and returned to the user so that she can edit it.
If the server only stores the Markdown text to the database, then when a user requests to view the document, the Markdown document will be retrieved from the database, converted to HTML and then returned to the user. However, if a user requests to edit the document, then the Markdown document will be retrieved from the database and returned to the user (skipping the conversion step) so that she can edit it.
Note that in either option, the server is doing the conversion to HTML. The only time the conversion happens client-side (in the browser) is for preview. But the "preview" conversion is not used to display the document outside of edit mode or to store the document in the database.
The only difference between something like StackOverflow and TinyMCE is that in TinyMCE the preview is also the editor. Behind the scenes the same process is still happening and when you submit, it is the Markdown which is sent to the server. The HTML used for preview is still discarded.
The primary concern when implementing such a system is that if the Markdown implementation used for preview is dissimilar from the implementation used by the server, the preview may not be very accurate. Therefore, it is generally best to choose two implementations that are very similar or, if available, use the same implementations for both.
It is actually very simple.
Historally, in forums, there used be BBCodes, which are basically pseudo-tags that allow you to format your text in some say. For example [b][/b] used to mean "make this text bold". In Markdown, it happens the exact same thing, but with other characters like *text* or **text**.
This happens so that you only allow your users to use a specific formatting, otherwise if you'd allow to write pure HTML, XSS (cross-site scripting) issues would arise and it's not really a good idea.
You should then save the HTML on the database. You can use, for example, markdown-js which is a Markdown parser that parses Markdown to HTML.
I have seen TinyMCE does not make use of Markdown by default, since it's simple a WYSIWYG editor, however it seems like it also supports a markdown-like formatting.
Laravel-Markdown is a server-side markdown render helper, you can use this on Laravel Blade views. markdown-js is instead client-side, it can be used, for example, to show a preview of what you're writing in real-time.

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: 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.

Which file should I edit to change the breadcrumbs starting point?

I wanted to change the breadcrumbs starting point from Home to My title. I edited the file /magento/app/code/core/Mage/Catalog/Block/Breadcrumbs.php but it doesn't seem to be working. Is XML playing a role in that?
thanks
Your best option is to use Magento's translate feature. Notice how the text in Breadcrumbs.php is wrapped with ->__('text') which instructs Magento to see if there is a translation for text for the current module. If you turn on Translate Inline in System>Config>Admin>Developer, you will be able to edit the text on the page (after refreshing, click the red box then the little book icon). This will then be entered into the database in the core_translate table and replaced in future page renders.
As a general rule, you should never edit files in app/code/code as you will break future upgrades and patches.
turn on Translate Inline in System>Config>Admin>Developer, you will be able to edit the text on the page (after refreshing, click the red box then the little book icon)

Resources