简体   繁体   English

bootstrap3-wysiwyg编辑器对象未定义

[英]bootstrap3-wysiwyg editor object aways undefined

I use this rich text: https://github.com/bootstrap-wysiwyg/bootstrap3-wysiwyg 我使用以下富文本格式: https : //github.com/bootstrap-wysiwyg/bootstrap3-wysiwyg

It works fine, but I need get the wysihtml5 editor object for run some commands 它工作正常,但我需要获取wysihtml5编辑器对象才能运行一些命令

The doc said I can get wysihtml5 editor object use this code: 医生说我可以使用以下代码获取wysihtml5编辑器对象:

var wysihtml5Editor = $('#some-textarea').data("wysihtml5").editor;
wysihtml5Editor.composer.commands.exec("bold");

But wysihtml5Editor is aways undefined 但是wysihtml5Editor尚未定义

log the $('#some-textarea').data("wysihtml5") print this: 记录$('#some-textarea')。data(“ wysihtml5”)打印如下:

Wysihtml5 {el: n.fn.init[1], toolbar: n.fn.init[1], editor:undefined}

How to get the editor object? 如何获得编辑器对象?

I found the answer by myself, but anyway thanks Daemedeor and DA.! 我自己找到了答案,但是无论如何都要感谢Daemedeor和DA。

in bootstrap3-wysihtml5.js the createEditor method not return , so 在bootstrap3-wysihtml5.js中,createEditor方法未返回,因此

this.editor =  this.createEditor(toolbarOpts);

this.editor is undefined this.editor未定义

I add the return like this 我这样添加回报

  createEditor: function(options) {
    options = options || {};

    // Add the toolbar to a clone of the options object so multiple instances
    // of the WYISYWG don't break because 'toolbar' is already defined
    options = $.extend(true, {}, options);
    options.toolbar = this.toolbar[0];

    return this.initializeEditor(this.el[0], options);
  }

everything is ok! 一切都好!

For anyone else coming across this (and to expand a bit on previous answers), I found it a bit frustrating to navigate the various forks of wysihtml5 editor out there. 对于遇到此问题的其他人(并在先前的回答中进行扩展),我发现在其中浏览wysihtml5编辑器的各个分支有点令人沮丧。

It also seems there's a lot of questions floating around that's more or less related to the op'ers issue ("editor returns undefined"-kind of questions). 似乎也有很多问题与操作者问题或多或少相关(“编辑者返回未定义”类问题)。

So for starters, this question seems related to this specific fork: 所以对于初学者来说,这个问题似乎与这个特定的fork有关:

https://github.com/bootstrap-wysiwyg/bootstrap3-wysiwyg https://github.com/bootstrap-wysiwyg/bootstrap3-wysiwyg

As to the issue of getting the wysihtml5 editor object using the "wysihtml5" data selector, the documentation states: 关于使用“ wysihtml5”数据选择器获取wysihtml5编辑器对象的问题,文档指出:

You can access the wysihtml5 editor object like this: 您可以像这样访问wysihtml5编辑器对象:

var wysihtml5Editor = $('#some-textarea').data("wysihtml5").editor;
wysihtml5Editor.composer.commands.exec("bold");

In order for that to work, you need to make sure that the file you're referencing (be it bootstrap3-wysihtml5.min.js or bootstrap3-wysihtml5.all.min.js ) contains this specific commit: 为了使其正常工作,您需要确保所引用的文件(是bootstrap3-wysihtml5.min.jsbootstrap3-wysihtml5.all.min.js )包含此特定提交:

https://github.com/bootstrap-wysiwyg/bootstrap3-wysiwyg/commit/aee1fee7886b34d01e8f238d64d2e6fd9388608c https://github.com/bootstrap-wysiwyg/bootstrap3-wysiwyg/commit/aee1fee7886b34d01e8f238d64d2e6fd9388608c

As Daemedeor notes: https://github.com/bootstrap-wysiwyg/bootstrap3-wysiwyg/issues/131 - that commit isn't merged to the distribution, only the source. 正如Daemedeor指出的那样: https : //github.com/bootstrap-wysiwyg/bootstrap3-wysiwyg/issues/131-提交未合并到分发中,仅合并了源。

Anyways, changing this: 无论如何,更改此:

this.initializeEditor(this.el[0], options);

to this 对此

return this.initializeEditor(this.el[0], options);

might help you out (certainly did for me). 可能会帮助您(肯定对我有帮助)。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM