CLEditor动态添加文本

Question

我正在为一个网站使用CLEditor。我试图使用jQuery向textarea添加动态文本。通常我会使用类似以下的代码：

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

但是这在CLEditor中不起作用。当禁用CLEditor时，它可以正常工作，但重新启用后文本就会消失。我尝试在网站上寻找解决方案，但找不到任何信息。最近有人遇到过同样的问题吗？谢谢！

- moonwalker

---

在选项下面，updateTextArea 看起来就是你需要的回调函数 :) - Val

@Val 我觉得我做错了什么。我刚试了这个： $("#myText").cleditor()[0].updateTextArea('测试');但是还是没有反应。 - moonwalker

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

好的...现在我明白我做错了什么。非常感谢你。我不能选择你的评论作为答案。能否把它发表为答案，这样我就可以给你一些积分？再次感谢你的帮助！ - moonwalker

Answer 1

当调用textarea的blur方法时，CLEditor会更新iFrame中的内容：

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

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

- verybadbug

---

+1 我已经寻找这个很长时间了。谢谢。 - Larry Morries

Answer 2

我曾经遇到同样的问题，最终在评论中找到了有用的东西，所以这是我的解决方案；希望这对未来遇到同样问题的人有所帮助。

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

当我获取一些HTML并需要将其动态插入到Cleditor中时，我使用以下方法：

// 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();

- Francis Lewis

---

非常出色，完美地工作了，与其他答案相比如此简单。人们应该投票支持这个答案！ - Greg Jackman

Answer 3

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

- Val

---

为了使其正常工作，我必须执行以下操作：$("#input).val("testing"); $("#input").cleditor()[0].updateFrame(); 在文本才会出现。 - Paul D'Ambra

能否提供更多的例子会更有帮助……这个函数是否返回一个字符串以便更新文本区域？函数是否应该处理更新？ - Ben

@Webnet 你的意思是什么？它返回一个字符串吗？你正在将一个函数分配给updateTextArea，并且你可以使用“return this”来保持链式调用。 - Val

Answer 4

例如，如果对某人有帮助，您可以使用它。 情况是，我需要在更改下拉字段值时，更改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;
    }
}
?>

- Artūras

Answer 5

我知道这有点晚了，但是:

这里提供一个可能有帮助的答案：

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

如果你问我，这真的是最简单的答案。另一个简单的答案是由上面的弗朗西斯·路易斯提供的。

- Tamas

Answer 6

execCommand很好用，但它在IE中不起作用，val().blur()比较可靠。

- user995789