精华内容
下载资源
问答
  • zx_editor移动端编辑器

    2019-03-22 11:23:11
    # ZxEditor 移动端HTML文档(富文本)编辑器,支持图文混排、引用、大标题、无序列表,字体颜色、加粗、斜体。 可用于独立web项目开发,也可以用于与原生App混合(hybrid)开发。 ![ZxEditor](resource/preview2....
  • 推荐一款适用于vue的h5富文本编辑器

    万次阅读 2019-01-28 15:40:37
    var zxEditor = new ZxEditor("#editorContainer", { // 编辑器固定 fixed: false, // 20秒自动保存一次编辑内容 autoSave: 0, disableBackspaceDelete: false, showToolbar: false }); that....

    zx-editor

    github地址

    支持两种图片上传方式,一个是自动转化为base不上传到服务器,另一种是直接上传到服务器插入网络图片
    支持图文混排、引用、大标题、无序列表,字体颜色、加粗、斜体。
    vue中实例化ZxEditor对象后,可将其赋值给data模板,然后当前vue文件可全局使用改对象中的方法:
    var zxEditor = new ZxEditor("#editorContainer", {
    // 编辑器固定
    fixed: false,
    // 20秒自动保存一次编辑内容
    autoSave: 0,
    disableBackspaceDelete: false,
    showToolbar: false
    });
    this.zxEditor = zxEditor;

    change事件,当文本域中有值变化执行,我是将其存在vuex中:
    zxEditor.on(“change”, function(type, zxeditor) {
    that.setVuex();
    });

    当然,使用改插件时会遇到各种各样的问题,一、要先思考 二、留意github更新,作者很勤快,经常改bug以及 上传新的优化代码

    展开全文
  • zxEditor 移动端HTML文档(富文本)编辑器,支持图文混排、引用、大标题、无序列表,字体颜色、加粗、斜体。 可用于独立web项目开发,也可以用于与原生App混合(hybrid)开发。 源码地址:...

    zxEditor 移动端HTML文档(富文本)编辑器,支持图文混排、引用、大标题、无序列表,字体颜色、加粗、斜体。

    可用于独立web项目开发,也可以用于与原生App混合(hybrid)开发。

    源码地址:https://github.com/capricorncd/zx-editor

    ZxEditor 移动端HTML文档(富文本)编辑器

    ZxEditor 移动端HTML文档(富文本)编辑器

    本地运行 Build Setup

    # 安装依赖
    npm i
    
    # 运行开发模式
    # 通过 `http://localhost:9001` 可以访问
    npm run dev
    
    # 生成项目文件
    npm run build

    使用 Use

    • npm
      npm install zx-editor --save-dev
    • html
    <div id="editorContainer">
      <!-- 编辑器容器 -->
    </div>
    <script src="./dist/js/zx-editor.min.js"></script>
    <script>
      // 初始化ZX编辑器
      var zxEditor = new ZxEditor('#editorContainer', {
        fixed: true
      })
      // 详见index.html文件
    </script>

    注意:添加照片时,判断照片方向,并自动旋转需要依赖插件 exif.js

    • ES6+
    import { ZxEditor } from 'zx-editor'
    // import { ZxEditor } from './src/js/zx-editor/index.js'

    参数 options

    • autoSave: Number,自动保存编辑内容至localStorage,单位秒。等于0则不自动保存编辑内容。

    • bottom: Number,底部距离。

    • fixed: Boolean,编辑器是否绝对定位,默认为false。

    • imageMaxSize: Number,图片文件最大尺寸限制,单位MB,默认20

    • padding: Number,编辑器左右内边距,默认15像素,

    • showToolbar: Boolean,是否显示底部工具栏(图片、标签、连接添加等图标)。默认为true

    • top: Number,顶部距离,绝对定位时,相对于WebView顶部的距离。

    属性 property

    • dialog: Object 消息提示框

      alert、confirm、loading对话框

    方法说明
    alert(msg, callback)msg:提示消息, callback():回调函数
    confirm(msg, callback)msg:提示消息, callback(true或false):回调函数
    loading(msg)msg:提示消息,默认loading...
    removeLoading()移除loading元素节点
    zxEditor.dialog.alert('这是alert提示框', function () {
      // do something ...
    })
    • storage: Object 本地存储

      localStorage/sessionStorage

    方法说明
    set(key, data, isSeesionStorage)key:存储键名,会自动加默认前缀, data:需要存储的数据
    get(key, isSeesionStorage)key:存储键名,返回null或data
    remove(key, isSeesionStorage)删除key对应的本地数据

    参数isSeesionStorage: 是否为seesionStorage,默认为false

    // 存储
    zxEditor.storage.set('content', {content: '内容',title: '标题'})

    方法 methods

    • on(notifyName, callback)

      监听编辑器部分通知

    notifyNamecallback(参数)说明
    add-linknext()点击底部添加连接图标时触发。监听此通知,将阻止编辑器默认处理逻辑执行
    debugmessge消息通知
    errorerrorMessage错误异常通知
    select-picture-点击底部选择图片图标时触发。监听此通知,将阻止编辑器默认处理逻辑执行
    show-emoji-点击底部emoji图标时触发
    show-textstyle-点击底部文字样式图标时触发

    例子:

    // 自定义选择图片
    zxEditor.on('select-picture', _ => {
      // hybrid模式开发时,此处可以调用原生App提供的接口,访问图片文件选择列表
      // 执行图片文件数据获取,
      // 或者获取由原生App处理并上传完成的图片url
      zxEditor.addImage('图片url地址或base64图片数据')
      // 其他操作...
    })
    // 自定义添加链接
    zxEditor.on('add-link', next => {
      // hybrid模式开发时,此处可以调用原生App提供的接口,访问剪贴板是否有url地址数据
      // 获取到url地址、及其文档title
      // 将链接添加至编辑器中
      next(url, title)
    })
    • addFooterButton(option)

      底部工具栏添加按钮,option: Object|Array

      // 底部工具栏添加一个“导语”按钮
      zxEditor.addFooterButton({
      name: 'summary',
      // 按钮外容器样式名称
      class: 'demo-summary-button',
      // 按钮内i元素样式名
      icon: '',
      // 需要注册的监听事件名
      on: 'summary-button'
      })
      
      // 或者
      zxEditor.addFooterButton(
      [
        {
          name: 'summary',
          class: 'demo-summary-button',
          icon: '',
          on: 'summary-button'
        }
      ]
      )
    • addImage(src|base64)

      向正文焦点处添加一张图片,支持图片url地址或base64数据

    • addMedia(url, type)

      向正文焦点处添加图片/音频/视频

      图片url地址或base64数据

      音频/视频只支持url地址

      url: String url地址

      type: String, img|audio|video

    • getBase64Images()

      获取正文中所有base64数据的图片,返回一个数组

      @return array

      [
        {
          id: 'zxEditor_img_1500001511111',
          base64: 'data:image/jpeg;base64,/9j4AAQSkZJDAAkGB+wgH....',
          blob: 'Blob数据,可以用于直接上传,或通过方法toBlobData(base64)转换'
        }
      ]
    • insertElm($el, tag)

      向正文焦点处添加任意dom元素$el

      $el: HTMLElement

      tag: String, 可选参数,dom元素标签,如img/div/h2等

    • toBlobData(base64)

      将图片base64转换为原始数据类型Blob(),该数据和表单中提交上传的数据同类型,故可以直接上传

      @return new Blob() 返回Blob()数据

    • setImageSrc(imgId, imgUrl)

      将ID为imgId的图片base64地址,替换为新的imgUrl。需配合getBase64Images()方法使用。

      @return boolean

    • getContent(isInnerText)

      获取正文内容html。

      @params ‘isInnerText’可选,默认为false,获取编辑器innerHTML。否则获取innerText。

    • setContent(innerHTML)

      设置编辑器内容,可用于初始化编辑器数据。

    • stopAutoSave()

      开启自动保存时有效。停止自动保存编辑数据。

    • save()

      保存编辑器内容

    • removeSave()

      移除本地存储的content内容

    • filesToBase64(files, opts, callback)

      图片文件数据转为base64/blob

    参数类型说明
    files文件类型文件数据数组
    optsObject图片压缩或裁剪参数{width:100,height:100,clip:true}
    callback(errorArray, dataArray)errorArray:`nullArray, dataArray:null

    dataArray

    null
    // 或者
    [
      {
        // 处理完成的dom节点对象
        element: 'canvasElement|imageElement',
        // 文件类型
        type: 'image/png',
        // 处理完成的图片宽度,根据传入的参数定
        width: 100,
        // 处理完成的图片高度
        height: 100,
        // blob数据
        data: 'blob数据',
        // base64数据
        base64: 'base64',
        // 文件大小B
        size: 15455,
        // blob url地址
        url: 'blobUrl',
        // 原始图片数据参数
        rawdata: {}
      }
    ]

    源码地址:https://github.com/capricorncd/zx-editor

    Code and documentation copyright 2018. capricorncd. Code released under the MIT License.

    展开全文
  • ZxEditor v3.0.0-Alpha 移动端HTML文档(富文本)编辑器,支持图文混排、引用、大标题、无序列表,字体颜色、加粗、斜体。 可用于独立web项目开发,也可以用于与原生App混合(hybrid)开发。 旧版请见:v2.x.x...
  • 客户端:  这里写你的初始化内容   UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl; UE.Editor.prot

    客户端:

    <script id="container" name="content" type="text/plain">

                                                                                        这里写你的初始化内容

       </script>

    <script type="text/javascript">

    UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
    UE.Editor.prototype.getActionUrl = function(action) {
    if (action == 'uploadimage') {
       //这里调用后端我们写的图片上传接口
       return '<%=basePath%>/system/FileAttachController/uploadUE.do';
    }else if (action == 'uploadfile') {
       //这里调用后端我们写的图片上传接口
       return '<%=basePath%>/system/FileAttachController/uploadUE.do';
    }else if (action == 'uploadvideo') {
       //这里调用后端我们写的图片上传接口
       return '<%=basePath%>/system/FileAttachController/uploadUE.do';
    }else{
        return this._bkGetActionUrl.call(this, action);
    }

    $(function(){
    //初始化UI控件
    PlatUtil.initUIComp();
    var ue = UE.getEditor('container', {
       autoHeightEnabled: true,
       autoFloatEnabled: true,
       maximumWords:10000,
       /* 上传图片配置项 */
       "imageActionName": "uploadimage", /* 执行上传图片的action名称 */
       "imageFieldName": "file", /* 提交的图片表单名称 */
       "imageMaxSize": 2048000, /* 上传大小限制,单位B */
       "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */
       "imageCompressEnable": false, /* 是否压缩图片,默认是true */
       "imageCompressBorder": 1600, /* 图片压缩最长边限制 */
       "imageInsertAlign": "none", /* 插入的图片浮动方式 */
       "imageUrlPrefix": "", /* 图片访问路径前缀 */
       "imagePathFormat": "",
        /* 上传文件配置 */
            "fileActionName": "uploadfile", /* controller里,执行上传视频的action名称 */
            "fileFieldName": "file", /* 提交的文件表单名称 */
            "filePathFormat": "", /* 上传保存路径,可以自定义保存路径和文件名格式 */
            "fileUrlPrefix": "", /* 文件访问路径前缀 */
            "fileMaxSize": 51200000, /* 上传大小限制,单位B,默认50MB */
            "fileAllowFiles": [
                ".png", ".jpg", ".jpeg", ".gif", ".bmp",
                ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
                ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",
                ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",
                ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"
            ], /* 上传文件格式显示 */
            /* 上传视频配置 */
            "videoActionName": "uploadvideo", /* 执行上传视频的action名称 */
            "videoFieldName": "file", /* 提交的视频表单名称 */
            "videoPathFormat": "", /* 上传保存路径,可以自定义保存路径和文件名格式 */
            "videoUrlPrefix": "", /* 视频访问路径前缀 */
            "videoMaxSize": 102400000, /* 上传大小限制,单位B,默认100MB */
            "videoAllowFiles": [
                ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
                ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid"], /* 上传视频格式显示 */
                
    });
    });

    </script>

    服务端:

    @RequestMapping("/uploadUE")
        public void uploadUE(HttpServletRequest request, HttpServletResponse response) {
            Map<String, Object> result = new HashMap<String, Object>();
            // 上传文件根目录文件
            String uploadRootFolder = "uploadUE";
            // 获取附件的根路径
            String rooPath = PlatPropUtil.getPropertyValue("conf/config.properties", "attachFilePath");
            // 获取网站的访问根路径
            String attachFileUrl = PlatPropUtil.getPropertyValue("conf/config.properties", "attachFileUrl");
            //获取文件存储路径
            String attachFilePath = PlatPropUtil.getPropertyValue("conf/config.properties"
                    ,"attachFilePath");
            // 获取当前的日期
            String currentDate = PlatDateTimeUtil.formatDate(new Date(), "YYYY-MM-dd");
            StringBuffer uploadFileFolderPath = new StringBuffer(rooPath);
            uploadFileFolderPath.append(uploadRootFolder).append("/").append(currentDate).append("/");
            // 定义存储在数据库中的文件路径
            StringBuffer dbFilePath = new StringBuffer(uploadRootFolder).append("/").append(currentDate).append("/");
            try {
                // 创建一个通用的多部分解析器
                CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(
                        request.getSession().getServletContext());
                // 判断 request 是否有文件上传,即多部分请求
                if (multipartResolver.isMultipart(request)) {
                    // 转换成多部分request
                    MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
                    // 取得request中的所有文件名
                    Iterator<String> iter = multiRequest.getFileNames();
                    while (iter.hasNext()) {
                        // 取得上传文件
                        MultipartFile file = multiRequest.getFile(iter.next());
                        if (file != null) {
                            // 取得当前上传文件的文件名称
                            String originalFileName = file.getOriginalFilename();
                            String fileName = UUIDGenerator.getUUID() + "." + PlatFileUtil.getFileExt(originalFileName);
                            dbFilePath.append(fileName);
                            // 如果名称不为“”,说明该文件存在,否则说明该文件不存在
                            if (StringUtils.isNotEmpty(originalFileName)
                                    && StringUtils.isNotEmpty(originalFileName.trim())) {
                                File targetFile = new File(uploadFileFolderPath.toString(), fileName);
                                if (!targetFile.exists()) {
                                    targetFile.mkdirs();
                                }
                                file.transferTo(targetFile);
                            }
                            Map<String,Object> data = new HashMap<String,Object>();
                            data.put("url",  attachFileUrl + dbFilePath);
                            data.put("original", originalFileName);
                            String absoltePath = attachFilePath+dbFilePath;
                            File absolteFile = new File(absoltePath);
                            data.put("type",PlatFileUtil.getFileExt(dbFilePath.toString()));
                            data.put("size",absolteFile.length());
                            result.putAll(data);
                        }
                    }
                }
                result.put("state", "SUCCESS");
            } catch (IOException e) {
                result.put("state", "");
            } catch (Exception e) {
                result.put("state", "");
            }
            this.printObjectJsonString(result, response);
        }

    展开全文
  • import editor from "wangeditor" const editor = new editor("#box") editor.create() 功能应用1-菜单的设计 // 设置初始化菜单,new之后create之前 editor.config.menus = [ 'image' ] // 设置不需要的菜单入口...
    import editor from "wangeditor"
    const editor = new editor("#box")
    editor.create()
    

    功能应用1-菜单的设计

    //  设置初始化菜单,new之后create之前
    editor.config.menus = [
        'image'
    ]
     // 设置不需要的菜单入口
    editor.config.excludeMenus = [
        'image'
    ];
    

    功能应用2-图片的自定义上传

    //  设置图片最大尺寸
    editor.config.uploadImgMaxSize = 3 * 1024 * 1024;
    
    //  是否显示网络图片入口
    editor.config.showLinkImg = false;
    
     //  
     editor.config.customUploadImg = function (resultFiles, insertImgFn) {
        // resultFiles 是 input 中选中的文件列表
        // insertImgFn 是获取图片 url 后,插入到编辑器的方法
        // 此处调接口可使用filereader.onload、
    
        // 回调链图片接插入到富文本中
        insertImgFn(imgUrl)
    }
    

    应用功能3-内容的获取与初始化赋值

    //  获取实时value create之前
    editor.config.onchange = newHtml => {
            
    };
    
    //  给富文本赋值  create之后
    editor.txt.html(value);
    

    Let yourself gradually excellent

    展开全文
  • angular整合editor.md

    2019-10-08 22:02:06
    下载editor的文件 ...全局加载editormd资源文件 全局加载js文件 在angular.json中引入editormd.min.js,在引入editormd.min.js文件前需要先引入jQuery 安装jQuery npm install jquery --save ...
  • 我已经能使用vue-quill-editor获得到输入文本的html结构了,就像作者DEMO网站中的一样比如获得到: I am Example 2! Whenever you play the game of thrones, you either win or die. There is no middle ground....
  • 在使用vuex过程中,发现报错 typeError:__WEBPACK_IMPORTED_MODULE_1_vuex__.a.store is not a constructor 经查找发现是实例化时 .store用的小写造成的,如下 new Vuex.store({ state:{}, ...
  • 简介 Vue-html5-editor是一个Vue的富文本编辑器插件,简洁灵活可扩展,适用于vue2.0以上版本,支持IE11。 ... 安装安装 Npm ...♡并安装作为一部分组件 导入并安装为全局组件 import Vue from 'vue' ...Vue ....
  • 移动端HTML富文本编辑器zx-editor的扩展实现,适用于APICloud、DCloud、蓝鸟(BlueBird)、hybrid等混合APP开发-附件资源
  • that.zxEditor.addImage(that.ajax + that.url) } },600) }else{ Toast("上传失败") } console.log(JSON.stringify(res)) }, error:function(res){ console...
  • vue2-editor富文本基础使用方法

    千次阅读 2018-12-19 15:32:00
    vue2-editor的入门使用 准备工作: 使用 npm install vue2-editor --save 安装到项目中去; 使用 在需要的单文件内引入 import { VueEditor } from 'vue2-editor', ... components: { VueEditor }, ...
  • 使用editor自定义按钮

    千次阅读 2013-06-24 10:22:16
    第一步:找到editor_config.js文件中的toolbars参数,增加一个“showmsg”字符串,对应着添加一个labelMap,用于鼠标移上按钮时的提示。 toolbars:[ ... [..., 'searchreplace','help','showmsg'] ...
  • 哈希表的创建,以及一个使用实例,基础太薄弱了,哈希表都写了好久,代码书写要更流畅和易读。/*哈希表的实现,采用分离链接法*/ #include #include #include"try.h" /*struct listNode; typedef struct listNode* ...
  • 在一个多列表的页面上,页面在iOS11,跟iOS10中会发生页面卡住,不能进行滚动。 -webkit-overflow-scrolling:touch;
  • 本文为原创文章,转载请注明出处链接和作者! 第一步:需要书写你的插件文件,这里必须注意你的目录结构,默认的插件路径是..../editor/plugins/  为了方便起见我们不改变默认路径,先在这个目录下创建一个存放...
  • 前言触屏设备上面由于空间狭小而有时候又有图文混编的需求,所以,移动端尤其是web上面的富文本编辑器一直是一个空白,这段时候就做一个触屏版的富文本–当然不可能像pc端那样有数十个按钮,控制粒度也不可能精确到...
  • 移动端网页编辑器

    2017-10-28 14:54:26
    移动端网页版编辑器,可进行上传图片,加粗,字体颜色等基本操作,亲测非常好用的一款
  • 键盘上添加toolbar 添加Button

    千次阅读 2016-07-14 10:52:12
    //定义一个toolBar  UIToolbar  * toolbar = [[UIToolbar alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 40)];  //设置style ... [toolbar setBarStyle:UIBarStyleBlackTran

空空如也

空空如也

1 2
收藏数 35
精华内容 14
热门标签
关键字:

zxEditor