Giter Club home page Giter Club logo

editor's Introduction

wuanEditor

使用

引用wuanEditor.cssjquery.jswuanEditor.js之后,即可简单生成富文本编辑器。

生成编辑器(使用id)

使用div生成一个编辑器,wuanEditor将自动生成一个可编辑区域

<div id = "div1" style="height: 200px; "></div>

<!--这里引用jquery和wuanEditor.js-->
<script type="text/javascript">
    var editor = new wuanEditor('div1');
    editor.create();
</script>

调整尺寸

wuanEditor生成编辑器时,默认宽度为100%,请手动设置编辑器高度

自定义菜单

可通过修改 editor.config.menus 来自定义编辑器的菜单的显示/隐藏,该操作必须在 editor.create() 方法之前

<div id = "div1" style="height: 200px; "></div>

<!--这里引用jquery和wuanEditor.js-->
<script type="text/javascript">
    var editor = new wuanEditor('div1');
    // 自定义菜单
    editor.config.menus = ['link','img'];
    editor.create();
</script>

目前菜单只包括链接插入和图片上传,不定义菜单会使用默认菜单,自动包含链接和图片功能

图片上传

目前编辑器只提供集成插件的方式进行图片上传,以集成七牛云存储为例

<div id = "div1" style="height: 200px; "></div>

<!--这里引用jquery,wuanEditor.js及七牛相关依赖-->
<script type="text/javascript">
    function uploadInit (){
	  var editor = this;
	  var btnId = editor.imgUploadBtnId;
	  var uploader = Qiniu.uploader({
          runtimes: 'html5,flash,html4', //上传模式,依次退化
          browse_button: btnId, //上传选择的点选按钮,**必需**
          uptoken_url: '/uptoken',  //Ajax请求upToken的Url,**强烈建议设置**(服务端提供)
          domain: 'http://xxx.xxx.xxx.xxx.clouddn.com/',//bucket 域名,下载资源时用到,**必需**
          max_file_size: '10mb', //最大文件体积限制
          flash_swf_url: '/javascripts/plupload/Moxie.swf', //引入flash,相对路径
          filters: {
             mime_types: [
             //只允许上传图片文件 (注意,extensions中,逗号后面不要加空格)
                {
                  title: "图片文件",
                  extensions: "jpg,gif,png,bmp"
                }
             ]
           },
           max_retries: 3, //上传失败最大重试次数
           chunk_size: '4mb', //分块上传时,每片的体积
           auto_start: true, //选择文件后自动上传,若关闭需要自己绑定事件触发上传
           init: {
              'FileUploaded': function(up, file, info){
                  var domain = up.getOption('domain');
                  var res = $.parseJSON(info);
                  var sourceLink = domain + res.key; //获取上传成功后的文件的Url
                 // 插入图片到editor
                  editor.command("insertImage",sourceLink);
                },
               'Error': function(up, err, errTip) {
                   //上传出错时,处理相关的事情
                   console.log('on Error');
                }
            }
       });
     }
     var editor = new wuanEditor('div1');
     editor.config.imgUpload = uploadInit;// 配置自定义上传初始化事件,uploadInit方法在上面定义了
     editor.create();
</script>

editor's People

Contributors

haha214 avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.