javascript - 在 wysiHTML5 编辑器中以编程方式插入 HTML

Question

我找到了 javascript wysiwyg 编辑器wysiHTML5。

我正在尝试向<a href=...>编辑器添加元素，或者只是以编程方式打开粗体。

我的代码是：

var editor = new wysihtml5.Editor("textarea", {
    toolbar:      "toolbar",
    stylesheets:  "css/wysihtml5.css",
    parserRules:  wysihtml5ParserRules
});

editor.observe("load", function() {
    editor.composer.commands.exec("bold");
});

难道我做错了什么？

Answer 1

实际上没有，但你必须确保你的 textarea (iframe) 是聚焦的。尝试使用on而不是observe. 这是一个使用 insertHTML 对我有用的示例代码。

editor.on("load", function() {
  editor.focus();
  editor.composer.commands.exec("insertHTML","<a href=....>text</a>");
});

Answer 2

mateusmaso 的解决方案给了我以下错误：

NS_ERROR_FAILURE：组件返回失败代码：0x80004005 (NS_ERROR_FAILURE) [nsIDOMHTMLDocument.execCommand]
[打破这个错误]   

Object.defineProperty（对象，属性，配置）；

因此，我进行了更多调查，并找到了以下解决方案，（IMO）似乎更合适：

var value = 'whatever you want to set';
// The jQuery reference to the textarea
var $ta = $('textarea#your-selector');
// The reference to the wysihtml5 editor - everything is contained within it 
var w5ref = $ta.data('wysihtml5');
// Check if you have it
if(w5ref){
   // if yes it's really an enhanced / wysihtml5ed textarea 
   // and use its setter
   w5ref.editor.setValue(value);
} else {
   // otherwise just simply populate the textarea as you normally would
   $ta.html(value);
}

来源

Answer 3

assuming you have instantiated the editor previously using $('#textarea-id').wysihtml5()

$('#textarea-id').data("wysihtml5").editor.setValue('new content');

font