标签: wysihtml5

如何以编程方式从WYSIHTML5编辑器中检索内容？假设编辑器被实例化为:

var editor = new wysihtml5.Editor
(
   $(this.el).find('textarea').get(0),
   {
      toolbar:      "toolbar",
      parserRules:  wysihtml5ParserRules
   }
);

我想获得编辑关于blur活动的内容

editor.on
(
   "blur",
   function()
   {
      //what here?
   }
);

我希望能够添加一个添加我自己的自定义类的按钮.我在文档中没有看到这个,但似乎是一个常见的请求.

例如.

突出显示"Some Text"并按下"Custom Class"按钮将添加

<p class="wysiwyg-custom-class">Some Text</p>

我正在尝试使用Capybara -webkit填充wysihmlt5 textarea (不确定是否有其他方法):

Capybara.default_driver = :webkit
page.execute_script %Q{ $('#wysihtml5-textarea').data("wysihtml5").editor.setValue('Lorem ipsum') }

但我得到了错误:

undefined|0|ReferenceError: Can't find variable: $
FQFont::setPixelSize: Pixel size <= 0 (0)

Failure/Error: page.execute_script %Q{ $('#wysihtml5-textarea').data("wysihtml5").editor.setValue('Lorem ipsum') }
     Capybara::Driver::Webkit::WebkitInvalidResponseError:
       Javascript failed to execute

可能是什么问题呢？

我使用bootstrap-wysihtml5富文本编辑器bootstrap-wysihtml5,它基本上按预期工作.但是,我想知道处理生成的HTML输出以包含在DOM树中的最佳方法是什么.问题是普通文本输入没有标签,而所有其他标签(h1,h2,ul等都提供)使得很难直接输出.

有没有办法避免任何额外的处理？或者我只是在某个地方错过了p-tag？

我正在尝试使用Activerecord在sinatra应用程序中实现wysihml5.

富文本编辑器工作得很好,当我提交表单时,我得到了正确的html帖子到控制器:

pry:> request.params
=> {"title" => "title text",
"content" => "<b>bold text</b><br><i>italic text</i>",
"_wysihtml5_mode" => 1
}

然后,我从request.params中删除哈希条目"_wysihtml5_mode"以创建数据库条目,然后我将内容转换为json:

pry:> request.params.delete("_wysihtml5_mode")
=> 1
pry:> request.params["content"].to_json
=> "\"\\u003Cb\\u003Ebold text\\u003C/b\\u003E...
pry:> class.create(request.params)

问题是我不能把我的价值重新开始:

pry:> class.last.content
=> "\"\\u003Cb\\u003Ebold text\\u003C/b\\u003E...
pry:> JSON.parse(class.last.content)
JSON::ParseError: 743: unexpected token at '"\\u003Cb\\u003Ebold text\\u003C/b\\u003E...

我怎么能回到这个unicode charcters到他们的utf-8风格(我可能错了,我对字符表不熟悉).似乎在转换到json期间,"在开头添加":

                    "<b>bold => "\"\\u003Cb\\u003Ebold

这可能是问题所在？有任何想法吗？

我有一个 wysihtml 框，我想在 ajax 调用后填充它的值

$("#<%=txtDescrizioneBreveCategoria.ClientID%>").wysihtml5();

function ModificaCategoria(id) {
    $.ajax({
                url: "Categorie.aspx/GetCategoria",
                type: 'POST',
                dataType: "json",
                data: JSON.stringify({ 'id': id }),
                contentType: 'application/json; charset=utf-8',
                cache: false,
                async: false,
                processdata: true,
                traditional: true,
                success: function (data) {
                    var c = data.d;
                        //we need to parse it to JSON 
                        c = $.parseJSON(c);
                        $('#<%=txtTitleCategoria.ClientID%>').val(c.Title);
                        $('#<%=txtDescrizioneBreveCategoria.ClientID%>').val(c.Descrizione);
                }
        });
}

我已经尝试过

$('#<%=txtDescrizioneBreveCategoria.ClientID%>').contents().find('body').html('<b>New text</a>');

与

$('#<%=txtDescrizioneBreveCategoria.ClientID%>').html(c.Descrizione);

与

var editorObj = $("#<%=txtDescrizioneBreveCategoria.ClientID%>").data('wysihtml5');
var editor = editorObj.editor;
editor.setValue(c.DescrizioneBreve);

但编辑器变量始终未定义我在这里使用 wysihtml5x v0.4.15 链接

我正在使用基于WYSIHTML5(https://github.com/xing/wysihtml5)的WYSIHTML5 Bootstrap(http://jhollingworth.github.com/bootstrap-wysihtml5),这对于在复制粘贴时清理HTML非常棒.网站.

我希望能够将代码处理到编辑器中,然后使用HighlightJS突出显示语法.

我已经创建了一个新按钮并复制了wysihtml5.js中使用的方法来切换加粗<b>和关闭,使用<pre>:

(function(wysihtml5) {
var undef;

wysihtml5.commands.pre = {
    exec: function(composer, command) {

        return wysihtml5.commands.formatInline.exec(composer, command, "pre");
    },

    state: function(composer, command, color) {

        return wysihtml5.commands.formatInline.state(composer, command, "pre");
    },

    value: function() {
        return undef;
    }
};
})(wysihtml5)

但这还不够.编辑时编辑器会隐藏标签.我需要能够将我的内容包装在两者中<pre>,<code>即.<pre><code></code></pre>.

这意味着编写一个与wysihtml5使用的函数不同的函数,我不知道如何......有人可以帮助我吗？

这是wysihtml5中formatInline函数的代码:

 wysihtml5.commands.formatInline = {
exec: function(composer, command, tagName, className, classRegExp) {
  var range = composer.selection.getRange();
  if (!range) {
    return false;
  }
  _getApplier(tagName, className, classRegExp).toggleRange(range);
  composer.selection.setSelection(range);
}, …

我在我的代码库中使用https://github.com/xing/wysihtml5作为编辑器,我想"锁定"部分代码,使其无法编辑,如下所示:

<form>
<textarea id="wysihtml5-textarea" placeholder="Enter your text ..." autofocus>

<div>Some Editable Text here :) </div>

<div class="lockedForEditing" contenteditable="false">YOU CAN'T EDIT ME!!!</div>

<div>Some More editable code here </div>

</textarea>
</form>

有谁知道这是否可能？到目前为止,我已经尝试了几种方法但没有成功.我也没有在文档中看到任何内容.如果这是不可能的,你知道一个类似的编辑器吗？

我使用Bootstrap wysiwyg5编辑器作为表单的一部分.

此文本区域恰好是必填字段(不应为空).我想验证用户是否在此字段中输入了任何值.我看到Bootstrap wysiwyg使用Iframe来显示内容.我尝试通过这样做来访问jQuery中iframe主体的内容:

$('.textarea.wysihtml5-editor').html()

但失败了.

我的问题是:如何检查用户是否在此Bootstrap wysiwyg中输入了一些文本textarea.请帮帮我.

PS:我看到了这个问题,但是没有用.

我试图在bootstrap中实现wysihtml5但是文本的宽度看起来很小,我尝试了cols属性,但是没有工作