精华内容
下载资源
问答
  • ZxEditor v3.0.0-Alpha ...import 'zx-editor/dist/css/zx-editor.min.css' Copyright and license Code and documentation copyright 2018. capricorncd. Code released under the MIT License.
  • 移动端HTML富文本编辑器zx-editor的扩展实现,适用于APICloud、DCloud、蓝鸟(BlueBird)、hybrid等混合APP开发-附件资源
  • zxEditor 移动端HTML文档(富文本)编辑器,支持图文混排、引用、大标题、无序...源码地址:https://github.com/zx1984/zx-editor 本地运行 Build Setup # 安装依赖 npm i # 运行开发模式 # 通过 `http://...

    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.

    展开全文
  • ZX-Spectrum 屏幕编辑器
  • Vue-html5-editor是一个Vue的富文本编辑器插件,简洁灵活可扩展,适用于vue2.0以上版本,支持IE11。 Vue-html5-editor是一个html5所见即所得编辑器,用于vue,轻松,灵活,与Vue.js 2.0+兼容,支持IE11。 安装安装 ...
  • vue2-editor富文本基础使用方法

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

     

    vue2-editor的入门使用
    准备工作: 使用 npm install vue2-editor --save 安装到项目中去;

    1. 使用

    在需要的单文件内引入 import { VueEditor } from 'vue2-editor',
    注册组件

    
    components: {  VueEditor },
    &lt;vue-editor v-model="content" :editorToolbar="customToolbar"&gt;
    &lt;/vue-editor&gt;
    data() {
        return {
            content: '',
            customToolbar: [
                ['bold', 'italic', 'underline'],
                [{ 'list': 'ordered' }, { 'list': 'bullet' }],
                [{ 'indent': '-""' }, { 'indent': '+""' }],
                [{ 'header': '2' }], ['clean'], [{ 'align': 'center' }, { 'align': 'justify' }, { 'align': 'right' }]
            ],
        }
    }
    
    
    1. 具体demo
    
    &lt;template&gt;
       &lt;div id="app"&gt;
         &lt;vue-editor v-model="content"&gt;&lt;/vue-editor&gt;
       &lt;/div&gt;
     &lt;/template&gt;
    
     &lt;script&gt;
    import { VueEditor } from "vue2-editor";
    
    export default {
      components: {
        VueEditor
      },
    
      data() {
        return {
          content: "&lt;h1&gt;Some initial content&lt;/h1&gt;"
        };
      }
    };
    &lt;/script&gt;

    注意事项:

    对于这个上面的customToolbar的修改,有的内容不需要,可以通过鼠标拾取来定义,显示的内容
    参考文档:
    https://www.vue2editor.com/ex...
    https://github.com/davidroyer...

    来源:https://segmentfault.com/a/1190000017418098

    posted @ 2018-12-19 15:32 栖息地 阅读(...) 评论(...) 编辑 收藏

    展开全文
  • 1.使用后vue2-editor组件 npm install vue2-editor 2.编写相关代码 <template> <div id="app"> <vue-editor id="editor" useCustomImageHandler @imageAdded="handleImageAdded" v-model=...

    简介:由于项目需要,需要在前端项目中加入富文本,而项目框架又是使用的使用步骤
    1.使用后vue2-editor组件 npm install vue2-editor
    2.编写相关代码

    <template>
      <div id="app">
        <vue-editor id="editor" useCustomImageHandler @imageAdded="handleImageAdded" v-model="htmlForEditor"> </vue-editor>
      </div>
    </template>
    
    <script>
    import { VueEditor } from "vue2-editor";
    import axios from "axios";
    export default {
      components: {
        VueEditor
      },
    
      data() {
        return {
          htmlForEditor: ""
        };
      },
    
      methods: {
        handleImageAdded(file, Editor, cursorLocation, resetUploader) {
          var formData = new FormData();
          formData.append("image", file);
    
          this.axios({
            url: "你的上传图片路径",
            method: "POST",
            data: formData
          })
            .then(result => {
             // 你上传路径返回的url
              let url = result.data.url; 
              Editor.insertEmbed(cursorLocation, "image", url);
              resetUploader();
            })
            .catch(err => {
              console.log(err);
            });
        }
      }
    };
    </script>
    

    3.至此,富文本已经能达到基本的使用了,但还是有个上传的问题
    ①:坑1:
    @imageAdded=“handleImageAdded” 它会让handleImageAdded不起作用
    解决办法:
    不要使用驼峰命名法
    使用:

     @image-added="handleImageAdded"
    

    ②:坑2
    由于使用的是nuxt框架,这样的写法会导致报错:document is not defined
    在这里插入图片描述

    删除:import { VueEditor } from “vue2-editor”;和 components: {
    VueEditor
    }, components的VueEditor

    问题解决
    官方网址https://www.vue2editor.com

    展开全文
  • vue version: vue 2.5.* 安装 github地址 npm install mavon-editor --save 复制代码引入 引入有多种方式,但是我常使用的是以组件的形式来引入 ...mavon-editor ref="editor" v-model="doc"> </ma...

    vue version: vue 2.5.*

    安装 github地址

     npm install mavon-editor --save
    复制代码

    引入

    引入有多种方式,但是我常使用的是以组件的形式来引入

    <template>
        <div>
          <mavon-editor ref="editor" v-model="doc"> </mavon-editor>
        </div>
    </template>
    <script>
    import {mavonEditor} from "mavon-editor";
    import "mavon-editor/dist/css/index.css";
    export default {
        name: "Create",
        components: {mavonEditor},
        data(){
          return {
            doc: '',
          }
        }
    }
    </script>
    复制代码

    获取/修改值

    使用 $refs

    // 获取 markdown
    let markdown = this.$refs.editor.d_value;
    // 修改 markdown
    this.$refs.editor.d_value = '> hello world';
    
    // 获取编译后的 html
    let html = this.$refs.editor.d_render;
    复制代码

    使用 v-model

    // 获取 markdown
    let doc = this.doc;
    // 修改  markdown
    this.doc = 'hello world';
    复制代码
    • 注: 使用 $refs 的方式获取值可以获取到 markdown 和 编译后的 html, 但是使用 v-model 只能获取到 markdown

    文档

    可用props 可用事件 图片处理

    可能有用

    • 利用一个例子看params的使用方式params的使用方式
    <template>
        <div>
            <!-- 
                @save: 按下 ctrl + s 时触发
                @change: 当值发生改变时 触发
            -->
            <mavon-editor
                @save="saveDoc"
                @change="updateDoc"
                ref="editor"
                v-model="doc">
             </mavon-editor>
        </div>
    </template>
    <script>
    import { mavonEditor } from "mavon-editor";
    import "mavon-editor/dist/css/index.css";
    export default {
        name: "Create",
        components: { mavonEditor },
        data() {
            return {
                doc: ""
            };
        },
        methods: {
            updateDoc(markdown, html) {
                // 此时会自动将 markdown 和 html 传递到这个方法中
                console.log("markdown内容: " + markdown);
                console.log("html内容:" + markdown);
            },
            saveDoc(markdown, html) {
                // 此时会自动将 markdown 和 html 传递到这个方法中
                console.log("markdown内容:" + markdown);
                console.log("html内容:" + html);
            }
        }
    };
    </script>
    复制代码

    转载于:https://juejin.im/post/5c7b3bedf265da2da4082475

    展开全文
  • 记使用tui-editor添加自定义toolbar

    千次阅读 2019-07-15 14:47:27
    1.演示地址:https://nhn.github.io/tui.editor/api/latest/# 2.淘宝cnpm 包:http://npm.taobao.org/package/tui-editor#-docs 使用:① require('codemirror/lib/codemirror.css'); // codemirror require('...
  • le-markdown-editor是一款强大的markdown编辑器,它不仅支持常见的markdown语法,还新增了上传图片及换肤等实用的功能,并且上传图片的功能是可以定义的,替换也非常方便,非常适合用来做个人博客的编辑器。...
  • quill富文本编辑器图片默认是base64数据流,我们要实现把图片上传到服务器这个需求,quill中并没有找到相关配置 ...感谢作者给我灵感—用隐藏的input上传组件来...import 'zx-quill/dist/zx-quill.css' import VabQuill f
  • zx_editor移动端编辑器

    2019-03-22 11:23:11
    // import { ZxEditor } from './src/js/zx-editor/index.js' ``` ## 参数 options #### # autoSave: `Number` 自动保存编辑内容至localStorage,单位秒。等于0则不自动保存编辑内容。 #### # bottom: `Number` ...
  • import API from "../../api/api_dynamic"; //引入api /*富文本编辑图片上传配置*/`在这里插入代码片` const uploadConfig = { action: "", // 必填参数 图片上传地址 methods: "POST", // 必填参数 图片上传方式...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 562
精华内容 224
关键字:

zx-editor