How to convert text into HTML entities in a way that is compatible with Ckeditor?

Asked

Viewed 812 times

4

I need to do a textual search on a set of data produced by Ckeditor. This editor converts text into HTML entities such as:

Serviços oferecidos ---> Serviços oferecidos

What I need, short term, is that when the user enters a input with the value "services", I can convert this into serviços in order to use that term in the search. At first I could do this on the client side (Javascript) or server side (Python), but my hope is that Ckeditor itself had some utility to help me in this...

I searched Google for something like this - both specific to Ckeditor and general to Javascript, but I couldn’t find anything (at most code that converts the basics - like < for &lt; - but nothing more complete). There is a simple and "clean" way to do this? (Workaround: create an invisible editor, play the text there and pick up back using the getData)

P.S. I am using Ckeditor 4.4.5, Full package. I suspect that the person responsible for the entity conversion is the plugin "Escape HTML Entities" (default in any installation, provided the Basic package), but I couldn’t find any more detailed documentation of it except the one shown on the download page (i.e. some settings, and only).

javascript ckeditor htmlentities

  • He came to see CKEDITOR.tools.htmlEncode?

  • @bfavaretto Yes, but this method only makes the basic substitutions (at least called as htmlEncode(texto), without any additional parameter).

  • 1

    You are right. It is even this plugin that you cited the responsible for Settings as entities_latin and similar. Its source code is on github: https://github.com/ckeditor/ckeditor-dev/blob/master/plugins/entities/plugin.js

  • @bfavaretto Great, I really wanted to see the fonts of this plugin but I was not finding it! This explains why the htmlEncode did not work: the plugin acts at the editor level, not at the global level (i.e. two editors on the same page may have the plugin enabled and the other disabled). Unfortunately when seeing the fonts I did not find any utilitarian function, but I ended up finding a way to get to the desired function after a lot of trial and error... Thanks!

1 answer

1


The "raw" Ckeditor makes only a basic conversion, the one responsible for converting the vast majority of entities is the plugin "Escape HTML Entities" - included by default in all distributions. Unfortunately this plugin does not offer a utility function to have access to the same conversion rules, but after reading its source code (indicated by @bfavareto in the comments) saw that he adds a rule to the htmlFilter from a specific editor.

The solution then is to create a hidden editor (Argh!) and search for this rule by applying it to the text you want to convert:

$('<textarea id="editor_escondido" style="display:none;"></textarea>').appendTo($("body"));
var editor = CKEDITOR.replace("editor_escondido");
var converter = editor.dataProcessor.htmlFilter.textRules.rules[0].value;
converter("serviços"); // servi&ccedil;os

Note: For the text to be converted exactly as it is done by Ckeditor, the ideal would be to apply all the text rules in the order in which they occur in practice. However, as this is the only rule in the case of the default editor, only it is sufficient in this case

Workaround: instead of creating a hidden editor, create only one mock Object and use it in function afterInit of the plugin:

var converter = (function() {
    var ret;
    var mock = {
        config: CKEDITOR.config,
        dataProcessor: {
            htmlFilter: {
                addRules:function(r) { ret = r.text; }
            }
        }
    };
    CKEDITOR.plugins.get("entities").afterInit(mock);
    return ret;
})();

converter("serviços"); // servi&ccedil;os

Browser other questions tagged javascript ckeditor htmlentities

You are not signed in. Login or sign up in order to post.