Special TextArea Or HtmlEditor For DotLiquid Markup

[Emin Yüce]

I am looking for special textArea or html editor for dotLiquid markup. I am using a textarea right now but it is not so helpful to design 

[Panayiotis Panayiotou]

Did you finally find an html editor that can work well with the dotLiquid tags?

[lpa...@gmail.com]

take a look at ace.js  https://ace.c9.io

[Panayiotis Panayiotou]

Thanks. It seems interesting and this might be very useful for a future project.

I was mostly looking for something like an HTML editor rather than the code

[lpa...@gmail.com]

Ace js supports liquid mode

div where editor would go

<div id="liquidEditor" class="w-ace-editor"></div>

input where html would go after each change

<input type="hidden" id="Template" />

JS to configure editor

<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.4/ace.js" integrity="sha256-MZaOeApl5XlA4GPDxOfs39UUiGJQW6/n2+ZhmIJ7kmo=" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.4/mode-liquid.js" integrity="sha256-xnbbCScw+MkkE96qkUPgUBzUwMYZWEa//6yx7K7PfM0=" crossorigin="anonymous"></script>

<script type="text/javascript">

    $(function () {

        var _liquidEditor = ace.edit("liquidEditor");

        var _template = $("#Template");

        configureLiquidTemplate();

        function configureLiquidTemplate() {

            _liquidEditor.setTheme("ace/theme/chrome");

            _liquidEditor.getSession().setMode("ace/mode/liquid");

            _liquidEditor.renderer.setShowGutter(true);

            _liquidEditor.renderer.setPadding(10);

            _liquidEditor.setHighlightActiveLine(false);

            _liquidEditor.renderer.setScrollMargin(10, 0);

            _liquidEditor.setShowPrintMargin(false);

            _liquidEditor.getSession().on("change", function () {

                _template.val(_liquidEditor.getSession().getValue());

            });

            _liquidEditor.getSession().setValue(_template.val());

        }

    })

</script>

[Hugo Augusto]

Check my answer here:

https://github.com/dotliquid/dotliquid/issues/433#issuecomment-820569014

Ace does not evaluate syntax.