欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

VueJS 集成 Medium Editor的示例代碼 (自定義編輯器按鈕)

 更新時(shí)間:2017年08月24日 09:08:28   作者:碼農(nóng)技術(shù)宅  
本篇文章主要介紹了VueJS 集成 Medium Editor的示例代碼 (自定義編輯器按鈕),具有一定的參考價(jià)值,有興趣的可以了解一下

0x00 前言

VueJS 社區(qū)里面關(guān)于富文本編輯器的集成也不少了,但是之前小調(diào)研了一下,基本上就是 quill,medium-editor,因?yàn)橹坝?AngularJS 用過 medium-editor,并且需要自定義某些按鈕,而且最好還是選中彈出式的,所以就決定用 medium-editor。

社區(qū)里面 star 較多的就是這個(gè)了:vue-medium-editor,但是打開它官網(wǎng),看了看文檔,越看越別扭,來看看它用法:

<!-- index.html -->
<medium-editor :text='myText' :options='options' custom-tag='h2' v-on:edit='applyTextEdit'>

gosh,傳這么多參數(shù),我只想要一個(gè)簡(jiǎn)單的 editor 啊

打開源碼一看,就 62 行,所以決定自己動(dòng)手來一個(gè)簡(jiǎn)單點(diǎn)的

0x01 最簡(jiǎn)版

最簡(jiǎn)版,其實(shí)就在 vue 組件中實(shí)例化一下 medium-editor 就可以了

<template>
 <div class="textEditor" @input="handleInput">
 </div>
</template>
<script>
/* eslint-disable no-new */
import MediumEditor from 'medium-editor'
export default {
 props: {
  value: String,
  options: {
   type: Object,
   default: () => ({})
  }
 },
 data () {
  return {
   editor: null // 用來存放 editor 
  }
 },
 watch: {
  // refer: https://github.com/FranzSkuffka/vue-medium-editor/blob/master/index.js
  value (newVal, oldVal) {
   if (newVal !== this.$el.innerHTML) { // 用 $el.innerHTML 來解決 v-html 的光標(biāo)跳到行首的問題
    this.$el.innerHTML = newVal || ''
   }
  }
 },
 methods: {
  handleInput (e) {
   this.$emit('input', e.target.innerHTML)
  }
 },
 mounted () {
  // 處理初始值的情況
  this.$el.innerHTML = this.value
  // 這里當(dāng)然可以自定義 options 啦
  this.editor = new MediumEditor(this.$el, Object.assign({}, this.options))
  // medium-editor 的 api,監(jiān)聽內(nèi)容改變化
  this.editor.subscribe('editableInput', this.handleInput)
 },
 beforeDestroy () {
  this.editor.unsubscribe('editableInput', this.handleInput)
  this.editor.destroy()
 }
}
</script>

完成~,是不是很簡(jiǎn)單~~哈哈,最簡(jiǎn)版是一個(gè) v-html 控制的,但是會(huì)有自動(dòng)跳轉(zhuǎn)到首行的問題,所以這里是最終版,細(xì)節(jié)問題看注釋啦

0x02 用法

咋用呢?很簡(jiǎn)單,在其他組件中這樣:

<text-editor v-model="vm.richText"></text-editor>

當(dāng)然 你首先得安裝 medium-editor的 js 和 css了

0x03 自定義 button

下面是我項(xiàng)目中用到的自定義 button 的相關(guān)代碼,是一個(gè) buttonBuilder:

import MediumEditor from 'medium-editor'
import rangy from 'rangy/lib/rangy-core.js'
import 'rangy/lib/rangy-classapplier'
import 'rangy/lib/rangy-highlighter'
import 'rangy/lib/rangy-selectionsaverestore'
import 'rangy/lib/rangy-textrange'
import 'rangy/lib/rangy-serializer'
const pHash = {
 p1: { name: 'p1', class: 'fs-36' },
 p2: { name: 'p2', class: 'fs-30' },
 p3: { name: 'p3', class: 'fs-24' },
 p4: { name: 'p4', class: 'fs-18' },
 p5: { name: 'p5', class: 'fs-14' },
 p6: { name: 'p6', class: 'fs-12' }
}
function pButtonCreator (p) {
 return MediumEditor.Extension.extend({
  name: p.name,
  init: function () {
   this.classApplier = rangy.createClassApplier(p.class, {
    elementTagName: 'span',
    normalize: false
   })
   this.button = this.document.createElement('button')
   this.button.classList.add('medium-editor-action')
   this.button.innerHTML = p.name
   this.button.title = p.class
   this.on(this.button, 'click', this.handleClick.bind(this))
  },
  getButton: function () {
   return this.button
  },
  clearFontSize: function () {
   MediumEditor.selection.getSelectedElements(this.document).forEach(function (el) {
    if (el.nodeName.toLowerCase() === 'span' && el.hasAttribute('class')) {
     el.removeAttribute('class')
    }
   })
  },
  handleClick: function (event) {
   this.clearFontSize()
   this.classApplier.toggleSelection()
   // Ensure the editor knows about an html change so watchers are notified
   // ie: <textarea> elements depend on the editableInput event to stay synchronized
   this.base.checkContentChanged()
  }
 })
}
export default {
 P1: pButtonCreator(pHash['p1']),
 P2: pButtonCreator(pHash['p2']),
 P3: pButtonCreator(pHash['p3']),
 P4: pButtonCreator(pHash['p4']),
 P5: pButtonCreator(pHash['p5']),
 P6: pButtonCreator(pHash['p6'])
}

簡(jiǎn)單來說就是給選中的文字加一些 class (上面是 fs-xx 之類的),其中需要引一個(gè)鼠標(biāo)選中的庫 rangy,挺煩人的也是,然后在 text-editor 中這樣用:

先實(shí)例化

import ButtonBuilder from './buttonBuilder'
var editorOptions = {
 toolbar: {
  buttons: ['bold', 'italic', 'underline', 'removeFormat', 'p3', 'p4', 'p5', 'p6']
 },
 buttonLabels: 'fontawesome', // use font-awesome icons for other buttons
 extensions: {
  p3: new ButtonBuilder.P3(),
  p4: new ButtonBuilder.P4(),
  p5: new ButtonBuilder.P5(),
  p6: new ButtonBuilder.P6()
 },
 placeholder: false
}

再放到 editor 上

復(fù)制代碼 代碼如下:

this.editor = new MediumEditor(this.$el, Object.assign({}, editorOptions, this.options))

當(dāng)然上面實(shí)例化的步驟不一定要寫到這個(gè)組件里面,配置 options 也可以從組件外傳入

0x04 細(xì)節(jié)和坑

1、這里用到了 v-model 的自定義實(shí)現(xiàn),詳見官方文檔:v-model

簡(jiǎn)單來說呢就是 props: value ,和 this.$emit('input', model) 就可以實(shí)現(xiàn)在組件中模擬 v-model 啦

2、多個(gè) editor 使用的自定義button 實(shí)例的問題。由于我自己應(yīng)用的時(shí)候有兩個(gè)挨著的 <text-editor>,用的上面的代碼會(huì)導(dǎo)致兩個(gè) editor 實(shí)例用的是同一個(gè) button 實(shí)例,這會(huì)導(dǎo)致一個(gè)很嚴(yán)重的問題:即編輯下面編輯器的內(nèi)容,可能會(huì)修改的上面的編輯器!!

要解決這個(gè)也很簡(jiǎn)單,修改這一行:

復(fù)制代碼 代碼如下:

this.editor = new MediumEditor(this.$el, Object.assign({}, _.cloneDeep(editorOptions), this.options))

將自定義的 options 深復(fù)制一下,這里借助了 lodash 的函數(shù)。

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue中watch的實(shí)際開發(fā)學(xué)習(xí)筆記

    vue中watch的實(shí)際開發(fā)學(xué)習(xí)筆記

    watch是Vue實(shí)例的一個(gè)屬性是用來響應(yīng)數(shù)據(jù)的變化,需要在數(shù)據(jù)變化時(shí)執(zhí)行異步或開銷較大的操作時(shí),這個(gè)方式是最有用的,下面這篇文章主要給大家介紹了關(guān)于vue中watch的實(shí)際開發(fā)筆記,需要的朋友可以參考下
    2022-11-11
  • vue使用腳手架vue-cli創(chuàng)建并引入自定義組件

    vue使用腳手架vue-cli創(chuàng)建并引入自定義組件

    這篇文章介紹了vue使用腳手架vue-cli創(chuàng)建并引入自定義組件的方法,文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2022-03-03
  • vue實(shí)現(xiàn)數(shù)字變換動(dòng)畫的示例代碼

    vue實(shí)現(xiàn)數(shù)字變換動(dòng)畫的示例代碼

    本文主要介紹了vue實(shí)現(xiàn)數(shù)字變換動(dòng)畫的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-04-04
  • vue項(xiàng)目實(shí)現(xiàn)圖片上傳功能

    vue項(xiàng)目實(shí)現(xiàn)圖片上傳功能

    這篇文章主要為大家詳細(xì)介紹了vue項(xiàng)目實(shí)現(xiàn)圖片上傳功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2019-12-12
  • Vite中使用Ant?Design?Vue3.x框架教程示例

    Vite中使用Ant?Design?Vue3.x框架教程示例

    這篇文章主要為大家介紹了Vite中使用Ant?Design?Vue3.x框架教程示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-06-06
  • vue實(shí)現(xiàn)全選、反選功能

    vue實(shí)現(xiàn)全選、反選功能

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)全選、反選功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-06-06
  • 關(guān)于Element?table組件滾動(dòng)條不顯示的踩坑記錄

    關(guān)于Element?table組件滾動(dòng)條不顯示的踩坑記錄

    這篇文章主要介紹了關(guān)于Element?table組件滾動(dòng)條不顯示的踩坑記錄,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • 詳解Vue 方法與事件處理器

    詳解Vue 方法與事件處理器

    本篇文章主要介紹了詳解Vue 方法與事件處理器 ,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-06-06
  • Vue 圖片壓縮并上傳至服務(wù)器功能

    Vue 圖片壓縮并上傳至服務(wù)器功能

    這篇文章主要介紹了Vue 圖片壓縮并上傳至服務(wù)器功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2020-01-01
  • vue中使用render封裝一個(gè)select組件

    vue中使用render封裝一個(gè)select組件

    這篇文章主要介紹了vue中使用render封裝一個(gè)select組件,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-09-09

最新評(píng)論