web表单设计器Ueditor Formdesign Plugins安装使用教程

web表单设计器Ueditor Formdesign Plugins安装使用教程_第1张图片

安装扩展

请先下载扩展,建议下载完整带示例包,如果你下载独立扩展包,那你还需要另外下载Ueditor

  1. 下载扩展

安装

解压后,这个目录便是表单设计器扩展的全部
独立下载的用户,同样 copy 到 Ueditor 这个目录即安装完成。

./js
--|ueditor
----|formdesign        把扩展放到Ueditor下
--------|bootstrap
--------|leipi.form.design.js
--------|checkbox.html
--------|...
----|dialogs
----|ueditor.all.js
----|...
      

配置说明

FormDesign Plugins 的配置目前只有一个,toolleipi:true它可以在编辑器的toolbars显示表单设计器的图标

建议新建虚拟站点来验证,否则部分功能可能异常,正常访问地址如:http://localhost/formdesign/index.html
如果你显示的页面和官方一样并且没有脚本报错,表示安装成功。官方演示

index.html

<script id="myFormDesign" type="text/plain" style="widht:100%">
    这里是Ueditor FormDesign 内容
script>

<script type="text/javascript" charset="utf-8" src="js/ueditor/ueditor.config.js">script>
<script type="text/javascript" charset="utf-8" src="js/ueditor/ueditor.all.js">script>
<script type="text/javascript" charset="utf-8" src="js/ueditor/lang/zh-cn/zh-cn.js">script>

<script type="text/javascript" charset="utf-8" src="js/ueditor/formdesign/leipi.form.design.js">script>
//实例一个Ueditor
var leipiEditor = UE.getEditor('myFormDesign',{
        toolleipi:true,//是否在toolbars显示,表单设计器的图标 
       //toolbars:[['FullScreen', 'Source']],//这里是工具拦
       textarea: 'design_content',//编辑器的表单名称   
        //更多其他参数,请参考ueditor.config.js中的配置项
});

你可能感兴趣的:(web表单设计器Ueditor Formdesign Plugins安装使用教程)