CLEditor dynamic adding text
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 w开发者_如何学Cork 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.
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();
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();
$("#input").cleditor({width:500, height:250,updateTextArea:function (){....}})
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;
}
}
?>
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.
execCommand is charm, but it does not work in IE, val().blur() is reliable
精彩评论