Question

我确实有wysihtml5Editor，我想用jQuery清除编辑器的值。我编写的代码如下：

$(function () {
   $("#cleartext").live('click', function () {
    $('#def_text').wysihtml5().data("wysihtml5").editor.clear();
    });
});

<textarea  name="def_text"  id="def_text" class="w100" rows="9" cols="50" data-bind="editor: def_text"></textarea>
<button type="reset" class="btn" id="cleartext"><i class="icon-pencil"></i> New Contract</button>

我没有得到所需的结果 - 它向我显示编辑器未定义的错误。建议请。

Answer 1

我认为你太复杂了。只需设置变量并将其链接到textarea，然后只使用变量：

var editor = new wysihtml5.Editor("myTextarea");
editor.clear();

或

editor.setValue('', true);

为我工作。

Answer 2

在我看来，你做的比这更复杂。你试试怎么样：

$("#cleartext").click(function () {
    $('#def_text').val('');
});

请参阅this fiddle。

Answer 3

我必须这样做才能清除单页应用程序中的数据：

当我尝试

时

('#comments').data("wysihtml5").editor.clear() // Got error **Uncaught TypeError: Cannot read property 'editor' of undefined**

当我尝试

时

var editor = $('#comments').wysihtml5();
editor.clear(); // This clears only the textarea which is hidden. Did not clear the Editor.

所以这就是我所做的，（可能不是一个好方法，但这清除了我的文本区域）

$(".wysihtml5-sandbox").remove();
$("#comments").show();
$('#comments').val('');

然后再次初始化编辑器

var editor = new wysihtml5.Editor("comments", { // id of textarea element
  toolbar:      "wysihtml5-toolbar", // id of toolbar element
  parserRules:  wysihtml5ParserRules, // defined in parser rules set
  stylesheets: "/cca/css/richtext.css"
});

Answer 4

这对我有用。，创建一个div标签，在里面放置你的 textarea 元素

<div id="CommentTextArea">

<textarea  name="comment_text"  id="comment"  rows="9" cols="50" ></textarea>

</div>

<button type="submit"  id="send"> Send </button>

在您的.js文件中

 $(function(){

// Initialize the Editor
$("#comment").wysihtml5({

toolbar: {
 "size": "xs",    //<buttonsize> // options are xs, sm, lg
"font-styles": false, // Font styling, e.g. h1, h2, etc.
"emphasis": true, // Italics, bold, etc.
"lists": false, // (Un)ordered lists, e.g. Bullets, Numbers.
"html": false, // Button which allows you to edit the generated HTML.
"link": true, // Button to insert a link.
"image": true, // Button to insert an image.
"color": false, // Button to change color of font
"blockquote": false, // Blockquote

}
});

// when the send button is clicked

$('#send').click(function(){

   setTimeout(function(){
        //remove  wysihtml5Editor contents  
   $("#CommentTextArea").html('<textarea  name="comment_text"  id="comment"  rows="9" cols="50" ></textarea>');

// and then Initialize the Editor again,

$("#comment").wysihtml5({

toolbar: {
 "size": "xs",    //<buttonsize> // options are xs, sm, lg
"font-styles": false, // Font styling, e.g. h1, h2, etc.
"emphasis": true, // Italics, bold, etc.
"lists": false, // (Un)ordered lists, e.g. Bullets, Numbers.
"html": false, // Button which allows you to edit the generated HTML.
"link": true, // Button to insert a link.
"image": true, // Button to insert an image.
"color": false, // Button to change color of font
"blockquote": false, // Blockquote
   }});

     }, 1000);   

});



    });

Answer 5

这对我有用，我写了几行自定义JS代码。我认为他们可以帮到你。

var content = $('#textareaId');
var contentPar = content.parent()
contentPar.find('.wysihtml5-toolbar').remove()
contentPar.find('iframe').remove()
contentPar.find('input[name*="wysihtml5"]').remove()
content.show()
$('#textareaId').val('');
$("#textareaId").wysihtml5();

Answer 6

我使用的是bootstrap 3 wysiHtml5编辑器，此处给出的解决方案均不适合我，我用了这个，它起作用了

$（'＃controlid〜iframe'）。contents（）。find（'。wysihtml5-editor'）。html（''）;

Answer 7

您是否正确初始化？文档显示如下：

$(function () {
    var editor = new wysihtml5.Editor("def_text");

    $("#cleartext").on('click', function () {
        $('#def_text').data("wysihtml5").editor.clear();
    });
});

或者，离您更近，

var wysihtml5Editor = $('#def_text').wysihtml5();

如何清除HTML编辑器

7 个答案: