Jump to content
ARG

Use Ckeditor to populate an HTML block

Recommended Posts

Hello everyone. I am in the process to understand how to build HTML blocks ( like cards, for example) with de possibility to edit/populate them with the confort and ease of use of Ckeditor. I built a template with 3 fields: 
-Title: page title
-ckeditor1: textarea (the editor)
-card_html: textarea (the html code)
The template is associated to a page. The output will look to something like: 

echo "<h3>{$page->card_html}</h3>";

Until there, no problem. 
The question is about the card_html code: if I want to use ckeditor to populate my card, I must output the content  generated by the editor, in the HTML code of the card_html field.
I tryed something like: 
 

<div class="uk-child-width-1-2@s uk-grid-match" uk-grid>
    <div>
        <div class="uk-card uk-card-hover uk-card-body">
        <h3 class="uk-card-title">My title</h3>
<?php echo $pages->get("/page-1/")->ckeditor1; ?>

The output shows:    get("/page-1/")->ckeditor1; ?>

So : Or I am trying something impossible. Or I am doing it wrong.
Can anybody help ? 

Thank you.

Share this post


Link to post
Share on other sites

Hello @ARG

By design CKEditor is for generating valid and "preferable" HTML stripping out any unwanted markup/code, including PHP. It is configurable, meaning it is possible to specify what gets stripped out and what not, but I do not recommend using it the way you wanted to.

You might have better luck with this one: https://modules.processwire.com/modules/inputfield-ace-extended/

An alternative way is to directly edit files in the admin: 

 

However, keep in mind that letting users directly edit code is a huge security hole/risk. Only trusted superusers should be allowed to do that. Non superusers should only use Hanna Code (similar to WordPress short codes): https://modules.processwire.com/modules/process-hanna-code/

  • Like 1

Share this post


Link to post
Share on other sites
Hello szabesz, thank you for your advices.
But....
I don't want to build an HTML element structure inside Ckeditor. This part is built (or, I would like it to be built) in the other field ''card_html'' (textarea  field)
I just want to use Ckeditor like it is supposed to be: for the ease to write content, and manage things related to content. Nothing else.
(In my actual website, the editor (old version of TinyMCE) allows the mix of content and HTML tags. I don't fear for security, as I am the only user/admin/redactor/designer/builder... name it... But as soon as the page/block is a little bit complex, the edition of the content becomes cumbersome.)
I am trying to find a way to separate HTML structure from content.
And my question is about ''how to include the content (ckeditor1  file) in the structure (card_html file)'' ?
(if possible) 

Share this post


Link to post
Share on other sites
6 hours ago, ARG said:

I am trying to find a way to separate HTML structure from content.

In general, you should do this by putting your HTML structure into your template files. Only content should come from your fields.

So this...

On 01/08/2017 at 1:34 PM, ARG said:

I tryed something like: 
 


<div class="uk-child-width-1-2@s uk-grid-match" uk-grid>
    <div>
        <div class="uk-card uk-card-hover uk-card-body">
        <h3 class="uk-card-title">My title</h3>
<?php echo $pages->get("/page-1/")->ckeditor1; ?>

 

...should be in your template file, not in a textarea field.

Once you've got the hang of "normal" template files you can explore field template files too - these are more of an optional extra than a must have.

  • Like 2

Share this post


Link to post
Share on other sites
17 hours ago, Robin S said:

Once you've got the hang of "normal" template files you can explore field template files too - these are more of an optional extra than a must have

Yes, I had a look into, 2 days ago. And...well... I am not ready :-)
I will follow your advice: understand  the ''normal'' logic of PW, instead of trying to apply another (CMS) logic, just to stay in the confort zone.
Thank you !

  • Like 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By prestoav
      Hi all and thanks for the great work on PW!

      One thing I find I have to do on any new site is add the Justify plugin to textarea fields as it is such a widely required feature for text headings in content.

      ANy chance this could be added to the core an automatically be installed on new textarea fields using CKEditor?

      Thank you!
    • By AndréPortuga
      Does anyone knows if there is a way of selecting a iframe inside a textfield(using ckEditor)? 
      I mean I have a Iframe with this code:
      <iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" scrolling="no" src="https://www.youtube.com/embed/PMaFJjZDrYM" width="100%"></iframe></p>
       
      but it's not getting responsive in iPhones.. So anyone know how can I select it via code for making it responsive?
       
      Thank you,
    • By dragan
      On one particular site, CKEditor behaves rather weird:
      When I copy and paste "normally", i.e. CTRL + V, there is an alert popping up "do you really want to leave this page?". If you cancel, the text is pasted into the field. If not, you get redirected to the frontend of the page you just edited, and the changes are lost.
      The "paste from Word" button doesn't work. CTRL + SHIFT + V works, but all formatting is lost (apart from paragraphs).
      I'm using inline editor mode, ACF + Purifier are activated. I know that if I disable those two, CTRL + V works, but I won't do that, since CKE then saves all the garbage code from MS-Office.
      Has anyone ever come across this issue? I tried with Chrome + FF. No JS errors.
    • By AndZyk
      Hello,
      I am currently building a intranet which will be hosted on the local network of a company. This intranet has many links to files on their fileserver with the protocol file://.
      So for example the links look like this file://domain.tld/filename.ext
      When I try to insert such a link into a URL field, I get the error, that only the protocol http:// is allowed. When I try to insert such a link into a CKEeditor link, it gets stripped out. Is it possible to insert such links into the FieldType URL and CKEditor.
      I know that I could use a FieldType Text or insert a RewriteRule in the .htaccess file, but I am looking for a more elegant solution. 😉
      Regards, Andreas
    • By prestoav
      Hi folks.
      I'm building a Formbuilder form to create new advert pages in a marketplace. Formbuilder is ideal for this. I need to add a description field that allows text to be added with line breaks etc. so showing a CKEditor field would be ideal (i.e. exactly like the field I'm typing into right now)!.
      Does anyone know if it's possible to add a CKEditor field to the front end presentation fo a Formbuilder field, maybe via a module or such?
      Many thanks!
×
×
  • Create New...