如何在WYSIHTML5中自定义工具栏.我想禁用字体大小和图像插入按钮,特别是对于Bootstrap X-editable中使用的WYSIHTML5版本.

我试图将Bootstrap3与令人敬畏的x-editable和typeahead.js集成,但我无法使其工作:

我尝试了以下内容

• 使用data-type ='typeaheadjs'标记元素
• 将type ='typeaheadjs'添加到$().editable()
• 将所有参数移动到data-*属性
• 将所有参数移动到$().editable()参数

但没有运气.

HTML代码:

<div style="margin: 150px">
    <a href="#" id="username">Rome</a>
</div>

JS代码:

$('#username').editable({
    mode: 'inline',
    showbuttons: false,
    type: 'text',
    url: '/post',
    pk: 1,
    title: 'Enter an Italian city',
    typeahead: {
        local: ['Rome', 'Milan', 'Venice', 'Florence']
    }
});        

在这里小提琴:http://jsfiddle.net/Ggxbm/3/

甚至http://vitalets.github.io/x-editable/docs.html#typeaheadjs提供的例子也不适用于我

我究竟做错了什么？

我试图了解X-editable如何存储值.

1. 例如,我有以下代码:

   HTML:

   <a class="editable" data-type="select" data-value="1">value-1</a>
   

   Run Code Online (Sandbox Code Playgroud)

   JavaScript的:

   $.fn.editable.defaults.mode = 'inline';
   
   $('.editable').html('value-2');
   $('.editable').data('value',2);
   
   $('.editable').editable({
       source: function () {
           return [
               { value: 1, text: "value-1" },
               { value: 2, text: "value-2" },
               { value: 3, text: "value-3" }
           ];
       }
   });
   

   Run Code Online (Sandbox Code Playgroud)

   这里是jsfiddle

   你可以看到它工作得很好.在第一步,我将dropdown的值声明为"value-1",然后在JavaScript中将其更改为"value-2".结果,您可以在页面上"value-2",并在点击下拉列表后选择"value-2",将选择相同的值.

2. 在这一步,我将修改JavaScript,如下所示:

   //$('.editable').html('value-2');
   $('.editable').data('value',2); 
   

   Run Code Online (Sandbox Code Playgroud)

   结果再次令人期待.您将在页面上看到"value-1",但在打开下拉列表时将选择"value-2".

3. 现在让我们以相反的方式更改JavaScript代码

   $('.editable').html('value-2');
   //$('.editable').data('value',2); 
   

   Run Code Online (Sandbox Code Playgroud)

   在这样的修改之后,页面上的值将等于"值-2",但是在开始编辑时下拉列表中的选定值将是"值-1".所以也是非常合理的行为.

题:

我没想到的是,通过单击可编辑控件的"ok"按钮保存更改不会更改data-value属性,它只会更改显示的文本.例如,如果我们将值更新为"value-3"并单击"确定",则data-value属性仍将等于1.那么插件在再次打开后如何在下拉列表中选择适当的值？

UPD:

从代码中更改可编辑值的最正确方法是使用

$('.editable').editable('setValue', 'value-1');

我无法通过JS获得x-editable的"隐藏"事件来处理动态添加的类(或字段).只有在我直接在HTML上添加可编辑类时,我才能管理它,但这种方法不适合我.我究竟做错了什么？

$.fn.editable.defaults.mode = "inline";
$.fn.editable.defaults.onblur = "submit";

$(document).ready(function () {
    $('.field').each(function() {
        $(this).addClass('editable');
    });
    $('.editable').editable();
});

$(document).on('hidden', '.editable', function(e, params) {
    alert('was hidden!');
});

小提琴:http://jsfiddle.net/4vj8buks/17/

我一直试图使用X-Editable http://vitalets.github.io/x-editable/与Select2 https://select2.github.io/连续几周没有太多运气.

最初我试图从AJAX请求中加载数据,然后使用该库,但我可以看到所有旧代码都可以使用旧版本的两个库.

为了略微简化,我现在决定单独加载我的数据,以便X-Editable和Select2只需要处理已经可用的数据数组.

我现在的问题是修改数据的显示.

默认情况下,我很满意编辑字段的外观,看起来像是"标签"被选中.

编辑完成后,在初始页面加载时,它会将我选择的项目显示为逗号分隔的字符串.我想修改那个部分看起来不一样.

我看到了一些按照我的要求工作的示例,但它们似乎不适用于较新的版本.

这里的JSFiddle http://jsfiddle.net/jasondavis/j72k110m/显示了我想要的输出和功能...差不多但是这个演示的问题是使用旧版本的Select2库.它有Select2版本v3.4.4和X-Editable版本v1.5.1

Select2的最新版本是版本v4.0.0 X-Editable是最新的v1.5.1,因为它有一段时间没有更新.

在初始加载和选择新值之后,它应该如下所示,这意味着它将我们选择的值包装在span:

单击以编辑选定的值时,它应该看起来像"标签",但它不应显示该<span>部分!

在这个JSFiddle http://jsfiddle.net/jasondavis/N6bQE/320/
我已经将Select2更新为新版本,我试图通过将所选值显示为"标签"来复制上面其他JSFiddle的功能.

此版本的另一个问题是,在选择值时,它不会从下拉列表中删除选项.因此,即使已经选择了1个项目,它仍会显示为再次单击的选项!

另一个问题是新选择的项目不会添加到非编辑屏幕上.

下面的更多图片显示我的意思...

下图显示了初始屏幕加载了所选项目以及选择但未处于编辑模式的项目.问题是它没有使用所选的新项目进行更新.它还显示所选的ID而不是标题/名称

我的最终目标是在我的X-editable字段上使用Select2以允许选择已分配的用户.选定的指定用户将显示一个重力图像缩略图图像和用户名.

Select2和X-Editable都允许使用模板样式输出来修改输出,但是当它们一起工作时,默认功能不同,那些输出修改功能与它们在其上运行任何库时的工作方式不同.自己的.

我知道我想要的是可以完成的,因为2个库可以协同工作,只需要让较新版本的Select2与旧版本的X-Editable一起工作,这在很长一段时间内都没有得到更新!

我看到的所有在线示例都显示了如何使用X-Editable和Select2库使用旧版本的select2.

X-Editable - http://vitalets.github.io/x-editable/与
Select2 - https://select2.github.io/连续几周没有太多运气.

最近有没有人拥有这两个图书馆,过去一年发布的版本甚至一起工作？

我想在post请求成功后才将添加的数据插入到表中,但是在检查post请求之前它会添加.那么如何在成功之后才插入表行数据.

此外,showCategories(从api获得的类别)不起作用,但性别(从本地获取)正在起作用.在选择框中(显示类别数据选项)但我无法选择类别数据.我使用性别选择框相同的东西,但性别选择框工作但不是类别.我在哪里弄错了？

HTML

 <table class="table table-bordered table-hover table-condensed">
        <tr style="font-weight: bold">
            <td style="width:5%">No.</td>
            <td style="width:20%">Name</td>
            <td style="width:10%">Gender</td>
            <td style="width:30%">Profile photo</td>
            <td style="width:20%">Category</td>
            <td style="width:30%">Action</span>
            </td>
        </tr>
        <tr ng-repeat="user in users">
            <td>{{$index+1}}</td>
            <td>
                <span editable-text="user.name" e-name="name" onbeforesave="checkName($data, user._id)" ng-model="userName" e-form="rowform" e-required>
                      {{ user.name}}
                    </span>
            </td>
            <td>
            <span editable-select="user.gender" ng-model="gender" e-name="gender" e-form="rowform" e-ng-options="s.value as s.text for s in genders">
                  {{ showGender(user) }}
            </span>

            </td>

            <!-- ng-show="tableform.$visible" -->
            <td class="text-center" >
                    <img ng-src="/api/media/{{user.media_id}}" alt="No Image" style="margin-bottom:20px;width:100%;">
                    <a class="btn btn-success" ui-sref="media({_id: user._id })" style="border: …

我安装了gem x-editable for rails:

# x-editable
gem 'x-editable-rails'

我将方法添加xeditable?到ActionController:

  # Add a helper method to your controllers to indicate if x-editable should be enabled.
  def xeditable?
    true # Or something like current_user.xeditable?
  end

但仍然出现错误:

ActionView::Template::Error (undefined method `xeditable?' for #<#<Class:0x007f9012e30f68>:0x007f9012ee9e78>):
    14: 
    15:     .panel-body
    16:       /a.doc_title.editable id='doc_title_12345' data-name="doc[title]" data-title="Enter doc title" data-type="text" data-url='/docs/12345' href='#doc_title_12345' = doc.title
    17:       = editable doc, :title
    18: 
  app/views/docs/_single_doc_in_accordion.html.slim:17:in `_app_views_docs__single_doc_in_accordion_html_slim__2506304306156466629_70128411437560'
  app/views/docs/index.html.slim:52:in `_app_views_docs_index_html_slim___3263534966956214695_70128384677640'

我应该在哪里定义方法xeditable?以便它开始工作？

更新:

这是application_controller.rb:

class ApplicationController < ActionController::Base …

我正在使用x-editable和bootstrap

我定义了以下html字段

<div class="form-group">
    <label class="col-sm-4">Service Charges(%)</label>
    <div class="col-sm-6 hoverEdit">
        <a class="editableAccount" id="serviceTax"></a>
    </div>
</div>

我定义了以下脚本以使该字段可编辑

$('.editableAccount').editable({
    type : 'number',
    title : 'Enter New Value',
    success : function(response, newValue) {
        updateAccount(this.id, newValue);
    }
});

现在,当我尝试编辑字段并输入小数值时,我得到了这个

我想使这个字段可编辑,以便我可以输入十进制值.我在文档上看不到任何帮助.有人请在这里帮助我,我对html和javascript相当新.

你能帮助我在这里做错吗？

我使用xeditable和angular在我的一个表单中实现了一个带有角度js的可编辑标签,但奇怪的是可编辑标签就像一个普通的链接,我按照这个文档

https://vitalets.github.io/angular-xeditable/

这是我的相关HTML代码

        <a href="#"  editable-text="user.name">{{ user.name || "empty" }}</a>
    

我插入角度js控制器和一切,我得到没有错误只是它像一个普通的链接.

编辑我的app.js看起来像

'use strict';

var App = angular.module('myApp', [
                               'ngResource',
                               'ngRoute',
                               'ngFileUpload',
                               'angularBootstrapNavTree',
                               'ngAnimate',
                               'angularUtils.directives.dirPagination',
                               "checklist-model",
                               'xeditable'


                             ]);



 //comment
App.config(['$routeProvider','paginationTemplateProvider', function($routeProvider,paginationTemplateProvider) {
 ......

}]);

App.run(['$rootScope','$location','$routeParams','$http','Attribut','Categorie','SsCategorieofcategorie','Produit','ConfigCategorie','editableOptions', function($rootScope, $location, $routeParams, $http, Attribut, Categorie,SsCategorieofcategorie,Produit,ConfigCategorie,editableOptions) {
	  editableOptions.theme = 'bs3';
........

    }]);

而我的控制器:

'var strict';

App.controller('GenerationContenuController',['$scope', '$http','$interval','GenerationContenu','InputText','$timeout',  function($scope, $http,$interval,GenerationContenu,InputText ,$timeout){

	   var self=this;
    
    	   $scope.user = {
    	     name: 'awesome user'
    	   };



...



}]);

最后是html

<form id="msform"  ng-controller="GenerationContenuController as ctrl"  editable-form>
  <!-- progressbar -->
  <ul id="progressbar">
    <li …