页面快排插件开发
YES-CMS内容管理系统页面快排插件开发教程
目录
插件预览
插件是一个js文件，存放位置在 lib/yescms-page-build/plugins 目录中
index.js：插件内容
icon.png：插件图标，需要配合 index.js中showIcon属性来使用，showIcon为true时，显示图片
style.css：插件样式
style.less：非必要，生成style.css用的，less写css更加便捷而已
每个插件都是一个单独的文件夹，文件夹名称和插件名称保持一致
如图所示
插件注册
插件放入插件目录后，并不能立即生效，还需要注册插件，代码位于 js-source/quick-page-build.js中
selector：固定为 #side-nav，对应页面 Areas/Admin/QuickPages/Index.cshtml
plugins：注册的插件列表，只有这里注册了才能使用，多个插件用半角空格隔开，名字要和插件所在的文件夹名字一致
componentsGroup：插件界面展示分组列表,text为分组名称，items为分组包含的插件名称，对应的是插件js文件中YESCMS_PageBuild.PluginManager.add的第一个参数 name，如图：
init_success_callback：插件加载成功后回调函数
插件开发说明
一个完整的插件开发例子
YESCMS_PageBuild.PluginManager.add('button',
{
// 插件名称，显示在插件列表中的名字
text: '按钮(Button)',
// 是否允许直接编辑
contenteditable: true,
// 插入html代码
// 一、代码中最外层只能有一个元素
html: `<button type="button" class="btn btn-success" >按钮</button>`,
// 快捷配置工具，直接在设计页面配置，通常是下拉框或者checkbox
configTools: [{
type: 'dropdown',
text: 'Styles',
items: [{
text: 'Primary',
rel: 'btn-primary'
}, {
text: 'Secondary',
rel: 'btn-secondary'
}, {
text: 'Success',
rel: 'btn-success'
}, {
text: 'Danger',
rel: 'btn-danger'
}, {
text: 'Warning',
rel: 'btn-warning'
}, {
text: 'Info',
rel: 'btn-info'
}, {
text: 'Light',
rel: 'btn-light'
}, {
text: 'Dark',
rel: 'btn-dark'
}, {
text: 'Link',
rel: 'btn-link'
}, {
text: 'outline-primary',
rel: 'btn-outline-paimary'
}, {
text: 'outline-secondary',
rel: 'btn-outline-secondary'
}, {
text: 'outline-success',
rel: 'btn-outline-success'
}, {
text: 'outline-danger',
rel: 'btn-outline-danger'
}, {
text: 'outline-warning',
rel: 'btn-outline-warning'
}, {
text: 'outline-info',
rel: 'btn-outline-info'
}, {
text: 'outline-light',
rel: 'btn-outline-light'
}, {
text: 'outline-dark',
rel: 'btn-outline-dark'
}]
}, {
type: 'dropdown',
text: 'Size',
items: [{
text: 'Default',
rel: ''
}, {
text: 'Large',
rel: 'btn-lg'
}, {
text: 'Small',
rel: 'btn-sm'
}]
}, {
type: 'check',
text: 'Block',
rel:'btn-block'
}, {
type: 'check',
text: 'Active',
rel:'active'
}, {
type: 'check',
text: 'Disabled',
rel:'disabled'
}],
// 配置表单，编辑弹窗中的配置页表单，弹窗中有源码编辑和配置编辑，两种tab
configForm: {
enabled: false,
width: '600px',
height: '200px',
items: [],
// 表单加载时初始化数据
loadData: function (elm) {
//debugger
$('#config-form #title').val($(elm).text())
},
// 表单保存时保存数据
saveData: function (elm) {
$(elm).text($('#config-form #title').val())
}
}
}
);YESCMS_PageBuild.PluginManager.add 参数说明
第一个参数：name=button，插件name，一般和所在文件夹名字保持一致，插件分组的时候需要指定插件的name
第二个参数：插件的配置信息
插件配置信息说明：text
插件描述，显示在列表中
插件配置信息说明：showIcon
可选值：( true / false )，默认值：false, 插件是否显示图标的形式展示，如果为true，插件文件夹中需要有名字为icon.png的图片
图片界面显示效果，宽度固定为 200px，高度自适应
插件配置信息说明：contenteditable
可选值：( true / false )，默认值：false, 表示元素是否可被用户编辑。 如果可以，浏览器会修改元素的部件以允许编辑。当值为true的时候，可直接修改元素的文本信息
插件配置信息说明：html
插件html文本，最外层只能有一个元素，如果存在多个元素，修改页面模板的时候会出现页面错误
插件配置信息说明：configTools
快捷工具配置
如图所示，为快捷工具栏
configTools.text
工具描述，显示文本
configTools.rel
配置的 class名称，会给相应的dom元素自动配置改class
configTools.type
工具类型，目前支持两种配置，dropdown 和 check
dropdown：下拉框，数组类型，[ { text, rel }, { text, rel } ]
{
type: 'dropdown',
text: 'Size',
items: [{
text: 'Default',
rel: ''
}, {
text: 'Large',
rel: 'btn-lg'
}, {
text: 'Small',
rel: 'btn-sm'
}]
}
text：文本描述
rel：样式名称
handle：作用的类名，如果配置了该选项，则会作用与包含该类的子元素
check：选中
{
type: 'check',
text: 'Block',
rel:'btn-block'
}
text：文本描述
rel：样式名称
handle：作用的类名，如果配置了该选项，则会作用与包含该类的子元素
因为 list-inline-item 需要作用域list-item,所以这里使用了handle，不然的话作用域ul，是无效的
configTools.handle
设置样式的作用域，包含该class的子元素
比如在 list 插件中，控制list显示方式的选项
{
type: 'check',
text: 'Inline',
handle: 'list-item',
rel: 'list-inline-item'
}默认效果
html代码
Inline展示的效果如下
html代码
通过对比，我们可以发现，list-inline-item 样式是作用域子元素(.list-item) 的，而不是在ul节点，这就很容易的说明了handle参数的作用
插件配置信息说明：configForm表单
插件的设置表单
点击插件的配置按钮，弹出的配置表单，比如 image 插件中，图片src是不方便修改的，所以可以添加一个配置表单
// 配置表单，编辑弹窗中的配置页表单，弹窗中有源码编辑和配置编辑，两种tab
configForm: {
enabled: true,
width: '600px',
height: '200px',
items: [{
label: 'src',
formItem: '<input type="text" id="src" placeholder="" class="form-control">'
}],
// 表单加载时初始化数据
loadData: function (elm) {
//debugger
$('#config-form #src').val($(elm).attr("src"))
},
// 表单保存时保存数据
saveData: function (elm) {
$(elm).attr('src', $('#config-form #src').val())
}
},这样，点击插件右上角的配置按钮时，就会弹出配置表单
输入图片的src信息，点击确定，图片新的src就设置好了
参数说明
configForm.enabled
可选值：( true / false ) ，默认为false，是否启用配置表单，如果时false，则插件不会显示配置按钮
configForm.width
可选值 500px 或者 80% 插件配置窗口的宽度，可以是精确的px值，也可以是百分比80%
configForm.height
可选值 400px 或者 60% 插件配置窗口的高度，可以是精确的px值，也可以是百分比60%
configForm.items
表单设置信息，html
items: [{
label: 'src',
formItem: '<input type="text" id="src" placeholder="" class="form-control">'
}],渲染结果
选然后的html代码
configForm.loadData
配置表单打开时，初始化表单数据，参数为 当前插件的 view 元素的第一个子元素，即 当前插件的html dom信息
currentDom = $(source).children(".view").children()[0];
我们可以从elm参数中获得想要初始化的信息，比如例子中，我们需要把img标签的src参数取出来，并显示在表单的input text标签中，所以可以这么做
// 表单加载时初始化数据
loadData: function (elm) {
//debugger
$('#config-form #src').val($(elm).attr("src"))
},configForm.saveData
保存配置表单数据
参数和loadData一样，只不过这里是要把input的值更新到dom中
// 表单保存时保存数据
saveData: function (elm) {
$(elm).attr('src', $('#config-form #src').val())
}插件配置信息说明：beforeCreate
添加插件到页面中时，需要初始化的信息，比如元素ID，一个页面应该避免出现多个相同的元素ID
比如tabs插件，因为要js互动，所以需要用到id来控制元素
这里就存在一个问题，一个页面中包含多个tabs插件是非常合理的，所以这里如果都是用统一的id，那么就会出现问题，包含多个tabs的时候，点击切换页面会失效，所以我们就需要一个方案可以自动的生成一个唯一的ID，就没有这个问题了，解决方案如下
html中定义ID规则
可以看到，在tab插件中，我们把html插件中的id都存在一个规则，以 _id结尾
可以看到在生成界面中，这些_id都被替换成了一串数字(小时分钟秒)，以此来实现多个重复插件ID互不干扰的目的
beforeCreate方法代码
这里就是通过beforeCreate方法来实现的，实现代码如下
beforeCreate: function (elm) {
// 找到view元素
var view = $(elm).children(".view")
// 生成id唯一字符串，这里考虑到不存在一秒钟拖动好几个插件，所以采用时分秒也就够了(页面唯一)，
var t = new Date();
var id = '_' + (t.getHours() * 10000 + t.getMinutes() * 100 + t.getSeconds()) + "";
// 替换id中的_id
view.find("[id$=_id]").each(function () {
var e_id = $(this).attr("id");
e_id = e_id.substring(0, e_id.length - 3) + id;
$(this).attr("id", e_id)
});
// 替换href中的_id
view.find("[href$=_id]").each(function () {
var e_id = $(this).attr("href");
e_id = e_id.substring(0, e_id.length - 3) + id;
$(this).attr("href", e_id)
});
// 替换aria-labelledby中的_id
view.find("[aria-labelledby$=_id]").each(function () {
var e_id = $(this).attr("aria-labelledby");
e_id = e_id.substring(0, e_id.length - 3) + id;
$(this).attr("aria-labelledby", e_id)
});
}
到此，教程结束
如果遇到任何问题，请联系我，QQ：382237285
扫我添加微信好友：
也可以猛戳页面右下角的在线客服以及电话
