CLEditor dynamic adding text

Question

I'm using CLEditor for a website I'm working on. I'm trying to add dynamic text to the textarea with jQuery. Usually I'll be using something like:

$('#myText').val('Here some dynamic text');

But this just doesn't work with CLEditor. When disabling CLEditor it works fine however, enabling it again the text just disappears. I tried looking on the website for a solution, but I can't find any. Anyone had the same problem lately?

Thanks in advance.

`updateTextArea` under options looks like its the callback u need :) — Val, Feb 23 '11 at 15:47
@Val I think I'm doing something wrong. I just tried this: $("#myText").cleditor()[0].updateTextArea('Testing'); Still nothing happens yet. — moonwalker, Feb 23 '11 at 15:55
`$("#input").cleditor({width:500, height:250,updateTextArea:function (){....}})` — Val, Feb 23 '11 at 16:16
Ok...Now I understand what I did wrong. Thanks a million. I can't choose your comment as the answer. Care to post it as an answer so I can give you some points? Thanks again for your help! — moonwalker, Feb 23 '11 at 16:27

verybadbug · Answer 1 · 2011-09-23T08:47:40.343

24

CLEditor update iFrame content when blur method of textarea is called:

//make CLEditor
$(document).ready(function() {
  $('#text').cleditor();
});

//set value
$('#text').val('new text data').blur();

edited Sep 23 '11 at 08:47

answered Sep 22 '11 at 23:30

verybadbug

899
1
9
16

1

+1 I have been looking for this for quite a long time. Thanks. – Larry Morries Nov 02 '11 at 06:13

score 6 · Answer 2 · answered Jan 12 '12 at 07:02

I was having the same issue and finally found something in the comments that was helpful, so here is what I have; hopefully this will come in handy to someone down the road.

// initializing the cleditor on document ready
var $editor = $('#description').cleditor()

Then when I get some html and need to dynamically insert it into the cleditor, here is what I use:

// update the text of the textarea
// just some simple html is used for testing purposes so you can see this working
$('#description').val('<strong>testing</strong>');

// update cleditor with the latest html contents
$editor.updateFrame();

Excellent, worked prefectly, so simple compared to some of the other answers. People should vote this answer up! — Greg Jackman, May 15 '13 at 22:42

score 3 · Accepted Answer · answered Feb 24 '11 at 10:08

3

$("#input").cleditor({width:500, height:250,updateTextArea:function (){....}})

answered Feb 24 '11 at 10:08

Val

17,336
23
95
144

6

In order to get this to work I had to do $("#input).val("testing"); $("#input").cleditor()[0].updateFrame(); before the text would appear – Paul D'Ambra May 17 '11 at 09:32
1

A bit more of an example would be helpful.... is the function returning a string to update the text area with? Should the function handle the updating? – Ben Jun 09 '11 at 21:04
@webnet what do you mean? is it returning a string? you are assigning a function to the updateTextArea, and you can use return this, to remain chainability. – Val Jun 15 '11 at 09:22

score 2 · Answer 4 · answered Jan 17 '13 at 12:38

2

I know it's kind of a late answer, but:

$('#myText').cleditor()[0].execCommand('inserthtml','Here some dynamic text');

is really the simplest answer, if you're asking me. The other simple answer was given by Francis Lewis above.

answered Jan 17 '13 at 12:38

Tamas

326
4
9

score 2 · Answer 5 · answered Apr 15 '11 at 08:18

For example if for someone it will be helpful, you can use it.

Situation, i need on change dropdown field value, to change the content of cleditor.

<script type="text/javascript">
$(document).ready(function() {

// Define and load CLEditor
    $("#input").cleditor({
        width: 800,
        height: 300,
        controls: "bold italic underline subscript superscript | color highlight removeformat | alignleft center alignright justify | table | undo redo | cut copy paste pastetext | print source ",
            useCSS: false
    });


// on change dropdown value
    $('#dropdown').change(function() {
// doing AJAX request by GET
        $.get(
// pushing AJAX request to this file
                'ajax/change_dimmensions_table.php',
// pushing some data, from which to determine, what content I need to get back
                    {'dropdown_value':$('#dropdown').val()},
                function(data, textStatus) {
// Clearing the content of CLEditor, adding new content to CLEditor
                        $("#input").cleditor({width:800, height:300, updateTextArea:function (){}})[0].clear().execCommand("inserthtml", data, null, null);
            },
                    'html'
        );
    });
});
</script>

change_dimmensions_table.php:

<?php 
header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Date in the past

if ( ! empty( $_GET['dropdown_value']))
{
    mysql_connect('localhost', 'username', 'password');
    mysql_select_db('database');
    mysql_query("SET names utf8");

    $sql = "
SELECT
    `html_content`
FROM
    `templates`
WHERE
    `dropdown` = '{$_GET['dropdown_value']}'
LIMIT 1
    ";

    $result = mysql_query( $sql) or die( mysql_error() . " SQL: {$sql}");

    if ( mysql_num_rows($result) > 0)
    {
        while ( $row = mysql_fetch_object( $result))
        {
            $html = $row->html_content;
        }
    }

    if ( ! empty( $html))
    {
        echo $html;
    }
}
?>

score 0 · Answer 6 · answered Jan 25 '13 at 19:15

0

execCommand is charm, but it does not work in IE, val().blur() is reliable

answered Jan 25 '13 at 19:15

user995789

279
1
4
15

CLEditor dynamic adding text

6 Answers6

Linked