Giter VIP home page Giter VIP logo

Comments (1)

i-just avatar i-just commented on July 4, 2024

Hi, thanks for getting in touch!

A bit of explanation:

By default, the CKEditor field stores data in the database as HTML. When you import your data via Feed Me, it gets saved in the database as is. So if you import # this is an h1 heading, it is stored as that exact string.

You then load the editor page with the CKEditor field, and the CKEditor converts the data to a model and view. The model is what CKEditor understands and uses to work with the data; the view is the actual HTML you see (and with the HTML data processor, it’s that HTML that gets stored in the database).

So when it loads the # this is an h1 heading string, the model looks like this:

<$root>
  <paragraph>
    # this is an h1 heading
  </paragraph>
</$root>

Which is downcasted to a view of:
<p># this is an h1 heading</p>

When you then manipulate the view in the editor, remove the space after # and add it back in, CKEditor understands that this is Markdown (even without the plugin I mention later on) and upcasts to a model that looks like this:

<$root>
  <heading1>
    this is an h1 heading
  </heading1>
</$root>

With a corresponding view of:
<h1>this is an h1 heading</h1>

Changing data processor:

CKEditor has a Markdown plugin, which isn’t included in the Craft’s implementation of the editor, but you could add it yourself: https://github.com/craftcms/ckeditor#adding-ckeditor-plugins. The field’s content would then be stored in the database as Markdown. Please note that as per the plugin’s page, Markdown doesn’t support all the rich text features, and there are known issues with this plugin. Also, you’ll have to think about rendering the content in the front end. With the Markdown plugin, it will be stored in the database as markdown, so you’d have to parse it (e.g. via the |markdown filter).

I hope this helps!

from ckeditor.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.