Use BoC within RTE fields

[fnagel]

Taken from https://forge.typo3.org/issues/13907

--

Integration could be adopted from: http://typo3.org/extensions/repository/view/vjrtecodesnippets/current/i

[fnagel]

Comment by Michiel Roos:

Here is an example extension that is an adaptation of vjrtecodesnippets.

TypoScript Setup:

include library includeLibs.rtecodehighlighter = EXT:rtecodehighlighter/class.user_rtecodehighlighter.php

configure parsing of the pre tag if you like to change the tag name make sure to change the PageTSConfig as well

lib.parseFunc_RTE.tags.pre = TEXT
lib.parseFunc_RTE.tags.pre.current = 1

set the user function lib.parseFunc_RTE.tags.pre.postUserFunc = user_rtecodehighlighter->highlight

page TSConfig:

// We need this to know where the linebreaks are. We can replace
with

RTE.default {
    disableEnterParagraphs = 1
}

// Custom code wrapping for the user menu button to make our life easier

RTE.default {
    userElements.10 = Syntax Highlighting tags
    userElements.10 {
        6 = JavaScript Code
        6.description = Wrap in JavaScript Code-Tags
        6.mode = wrap
        6.content = <pre class="brush: js">|</pre>

        7 = PHP Code
        7.description = Wrap in PHP Code-Tags
        7.mode = wrap
        7.content = <pre class="brush: php">|</pre>

        8 = TypoScript Code
        8.description = Wrap in TypoScript Code-Tags
        8.mode = wrap
        8.content = <pre class="brush: ts">|</pre>
    }
}

Please find the ext attached

An example can be found here: http://www.michielroos.com/test/

[fnagel]

Comment by Thomas Mayer:

I'm looking for this feature for a long time. In most cases I need to

• write few lines of code, then few lines of text and so on
• write code in the same line together with the text (e.g. a function name in a paragraph)

Pretty much the way we do it in the Typo3 forge. In both cases, it's not realistic to alternate between text and code content elements every time.

There has been an approach for RTE editing in the meantime (which also adds user elements to rte): http://typo3.cms-jack.ch/de/blog/blog-post/2012/04/24/jquery-beautyofcode-als-rte-funktion/

I did not test it yet, but it looks promising. Would it be possible to integrate that into the official extension?

If necessary and/or possible,

<.code> and <samp>

could be used.

[fnagel]

Comment by Felix Nagel:

This would be a nice new feature but needs contribution or sponsoring as I won't find any time soon to implement this myself.

Anyway, the described approach sounds nice and definitely is worth a deeper look.

[fnagel]

Comment by Thomas Mayer:

With some additional Typoscript, I was able to

• surround code snippets in RTE with new "tags"
• render the code with pre or code tag (whereas pre is for complete lines and code is for snippets in normal text, rendered in the same p tag)

In RTE, the text of a normal text content element looks like this:

blabla [code.bash]uname -r[/code] blabla. The next tag goes into two separate lines

[pre.bash]dpkg -l linux dpkg -l linux | grep ii | grep 3.16[/pre]

blabla.

With that concept applied, I can toggle languages for the highlighting, as well as pre/code tags (see attached screen shot).

Please let me know if you think that this could be applied to the extension itself. I could at least provide the TypoScript code I have written so far.

Result: https://www.slicewise.net/debian/hardware-enablement-stack-fuer-ubuntu-1404-lts-trusty-tahr/

[fnagel]

FYI: @thomaszbz