Question

我是这方面的新手，但我创建了一个简单的插件，我希望最终成为一个简单的WSIWYG编辑器。

这是我插件的简单设置部分

$.fn.ap_wysiwyg = function(options){
        // extend the option with the default ones
        var settings = $.extend({
            width : "800px",
            height : "600px",
        },options);

以下是我的HTML中用于调用插件的内联脚本

$(document).ready(function(){
  $("#ap-wysiwyg").ap_wysiwyg({
    width : "600px",
    height : "400px",
    css : {
      'background-color' : '#000'
    }
  });
});

相当简单的内联html的宽度和高度是覆盖我的主脚本的默认设置，这是太棒了，但我试图添加CSS，如背景颜色和边距，但他们似乎不适用于我的HTML 。因为它代表我的内部html有一个宽度的样式：600px;和身高：400px这是完美的，但它正在跳过我希望手动应用的CSS样式。

var containerDiv = $("<div/>",{
           css : {
               width : settings.width ,
               height : settings.height,
               border : "1px solid #ccc"
           }
       });

这里我开始创建一个适用于我的宽度和高度的div但是想法是插件中解析的设置可以是任何东西，我需要这个来获取解析的CSS并应用它。

例如，它看到有一个边距或背景，所以它添加了margin：settings.margin和background-color：settings.background-color

我该如何解决这个问题？因为我的方法显然不起作用。

Answer 1

相反，你可以尝试一下以下效果：

var containerDiv = $("<div/>").width(settings.width).height(settings.height).css(settings.css);

这应该适当地将您的设置应用于任何元素。如果这对您有用，请告诉我。希望它有所帮助！

将CSS设置添加到新的JQuery插件

1 个答案: