Suggestion: Option to pop up the raw content text editor

Beta
#1

it would be great to have an option to pop up the text editor of raw content element, something that looks like the Headline element Edit Text button:

image

But instead of a Rich Text tab, just the HTML, or even better, a CSS and a JS tab exclusive for the element, because usually I have to use a Div element as a container of raw content so I can add CSS to it (an then save the element later to use in other projects).

With something like this and the new components feature, this would be a powerful tool to create your custom elements.

1 Like
#2

Couldn’t you just add element css in the customize tab?

1 Like
#3

It sounds like you want to get a little custom. I think a great solution for you could be as follows, using parameters on a raw content element. I like the idea, It reminds of a thought I had of how I would get svelte to render in Cornerstone.

See these parameters.

{
  "cssCode" : {
    "label"   : "Styles",
    "type"    : "code",
    "initial" : "",
    "height"  : 2,
    "lint"    : "css"
  },
  "htmlCode" : {
    "label"   : "HTML",
    "type"    : "code",
    "initial" : "",
    "height"  : 2,
    "lint"    : "html"
  },
  "jsCode" : {
    "label"   : "JS",
    "type"    : "code",
    "initial" : "",
    "height"  : 2,
    "lint"    : "js"
  }
}

And then this is the raw content “content”.

<style>
{{dc:p:cssCode}}
</style>

{{dc:p:htmlCode}}

<script>
{{dc:p:jsCode}}
</script>
#4

Raw Content element doesn’t have customize tab, that’s why I usually make then contained by a div element. And I like them plug n’ play if I what to copy them to another project and have a preset for the element, so using Global or Page CSS to input the element selector wouldn’t be the best solution, yet it still works.

#5

Yeah, that would do the trick too, but still, it’s hard to code directly in the text input because of it’s size with an option to pop up the text editor. I usually have to work with the code in a local text editor and then just paste it to the raw content

#6

Sorry, you are right.

My solution is often to use the text element, but you could also create a div (with the element css) with the raw element inside it. then save the div as a template/element

#7

I will add a popup action for regular text inputs to our feature list. If not for all then at least raw content. Thanks!

#8

It would be amazing if we had a more native way to output custom CSS for a Raw element.

For example, I can easily make a parameter to create a custom expandable Raw element, like this:

image
image358Ă—590 8.27 KB

I can also add the <style> tag into the output and then use the Styles parameter. That is all great, but the problem is that $el is not working in this case, forcing us to write classes and targeting them inside the same element.

If we cannot have a Customize tab with styles on the Raw element, would there be a way to make the $el working, so we can target locally within the same element?

Thanks!

1 Like
#9

That’s an interesting thought Misho. I think the main problem is that raw content differs from all elements where it doesn’t actually have a wrapping div where we could use $el predictably. I think a good solution could be a “Styled Raw Content” element which does wrap the content in a div where you could use the customize tab normally.

It begs the question how could you do something like purely through parameters and I’m reminded of this request Pro 6.x Accessing Component ID . With element attribute access that could open up more possibilities like this, however even with that I think “Styled Raw Content” is a good element.

1 Like
#10

Styled Raw Content would be good, I usually wrap my raw content in a DIV for styling (and $el function), that would “reduce” the number of elements that I’d add in this case.

1 Like