javascript - How to get text data from froala editor? - Stack Overflow

admin管理员组

文章数量:1356262

Currently I use $('div#edit').froalaEditor('html.get') to retrieve the html data inside editor, but it sucks when it es to process / store the text data in my backend because of all the p tags and &npsb; symbols in raw html string.

To be honest they do not even pass to the database without losing parts of the data. Is there a way or an api to directly extract the text data as a string with proper symbols like "\n\t" from the froala editor?

Currently I use $('div#edit').froalaEditor('html.get') to retrieve the html data inside editor, but it sucks when it es to process / store the text data in my backend because of all the p tags and &npsb; symbols in raw html string.

To be honest they do not even pass to the database without losing parts of the data. Is there a way or an api to directly extract the text data as a string with proper symbols like "\n\t" from the froala editor?

• javascript
• jquery
• node.js
• wysiwyg
• froala

Share Improve this question Follow edited Oct 4, 2018 at 20:01 Stefan Falk 25.6k6161 gold badges218218 silver badges412412 bronze badges asked Jun 30, 2017 at 20:03 zzlynzzlyn 9511 gold badge33 silver badges1010 bronze badges 1

• Have you tried $('div#edit').innerText? See also stackoverflow./a/5002618/826983 – Stefan Falk Commented Oct 4, 2018 at 20:01

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

1. If you dont like p tags you should use the enter option:

   $('div#froala-editor-br').froalaEditor({
     enter: $.FroalaEditor.ENTER_BR
   });
   

2. If you really would like to remove all tags you could use jQuery text method

   jQuery($('div#edit').froalaEditor('html.get')).text()
   

3. Or you could use HTML options

   var html = $('div#edit').froalaEditor('html.get') ;
   var div = document.createElement("div");
   div.innerHTML = html;
   alert(div.innerText); 
   

Here is the simplestst way to do it.

  <textarea  name="text"></textarea>
  <script>
    new FroalaEditor('textarea',{
      heightMin: 400,  // customize minimum hight
      heightMax: 250   // customize maximum hight
    });
  </script>

  or

  <textarea id="editor"  name="text"></textarea>
  <script>
    new FroalaEditor('#editor',{
      heightMin: 400,  // customize minimum hight
      heightMax: 250   // customize maximum hight
    });
  </script>

if you are using post method or get method put this code into form and you get this data as a request.POST['text'].

There is http://textversionjs./ library which can be used to convert HTML to plain text. It also keeps new lines.

<script src="textversion.js"></script>
<script>
  var html = $('div#edit').froalaEditor('html.get');
  var text = createTextVersion(html);
</script>

Honestly, the easiest way to do this is

var body = $('#body').froalaEditor('html.get');
alert($(body).text());

You can use stringify() method in JSON to convert the HTML form to a text form.

<script>
    var html = $('div#edit').froalaEditor('html.get');
    var text = JSON.stringify(html)     
</script>

And you can store them in any backend and use them later.

本文标签： javascriptHow to get text data from froala editorStack Overflow