国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

一款基于vue好用的富文本編輯器Froala WYSIWYG Editor

adam1q84 / 2748人閱讀

摘要：前言基于使用過幾款富文本編輯器趟過坑，但是這幾款總感覺不是那么適合項目需求，苦苦搜尋總算找到一款好用的富文本編輯器支持特性快速預(yù)覽使用廢話不多說，開始擼代碼安裝引入引入引入中文語言包引入此處可在中引入地址

前言：

基于Vue使用過幾款富文本編輯器：
wangEditor
vue-quill-editor
vue2-editor

趟過坑，但是這幾款總感覺不是那么適合項目需求，苦苦搜尋總算找到一款好用的富文本編輯器Froala WYSIWYG Editor

支持特性：

快速預(yù)覽Demo：
Basic demo:
Inline demo:
Full list:

使用

廢話不多說，開始擼代碼

Vuejs v2.0+ -Froala WYSIWYG Editor

安裝 
npm install vue-froala-wysiwyg --save
引入 main.js 
// 引入 Froala Editor js file.
require("froala-editor/js/froala_editor.pkgd.min")

//引入中文語言包
require("froala-editor/js/languages/zh_cn")

//引入 Froala Editor css files.
require("froala-editor/css/froala_editor.pkgd.min.css")
require("font-awesome/css/font-awesome.css")//此處可在index.html中引入：font-awesome cdn地址：
require("froala-editor/css/froala_style.min.css")

// Import and use Vue Froala lib.
import VueFroala from "vue-froala-wysiwyg"
Vue.use(VueFroala)
app.vue

主要通過config來配置富文本編輯器，v-model來數(shù)據(jù)傳遞
Webpack settings 
var webpack = require("webpack")
var path = require("path")

module.exports = {
  module: {
    loaders: [

      // ...

      // Css loader. //css裝載器
      {
        test: /.css$/,
        loader: "vue-style-loader!css-loader"
      },

      // Font awesome loader. //如果引入Font awesome 需要這塊設(shè)置
      {
        test: /.(woff2?|eot|ttf|otf)(?.*)?$/,
        loader: "url",
        query: {
          limit: 10000,
          name: path.posix.join("path/to/yours/assets/directory", "fonts/[name].[hash:7].[ext]")
        }
      }
    ]
  },
  vue: {
    loaders: {

      // ...

      // Css loader for Webpack 1.x .
      css: "vue-style-loader!css-loader"
    }
  },
  plugins: [

    // ...

    // Jquery loader plugin. 這塊挺重要
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
    })
  ]
})
預(yù)覽



校長紅包福利

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/98103.html

相關(guān)文章

  • 手摸手，帶你用vue擼后臺 系列三(實戰(zhàn)篇)

    摘要：社區(qū)的認可目前已經(jīng)是相關(guān)最多的開源項目了，體現(xiàn)出了社區(qū)對其的認可。監(jiān)聽事件手動維護列表這樣我們就簡單的完成了拖拽排序。 完整項目地址：vue-element-admin 系類文章一：手摸手，帶你用vue擼后臺 系列一(基礎(chǔ)篇)系類文章二：手摸手，帶你用vue擼后臺 系列二(登錄權(quán)限篇)系類文章三：手摸手，帶你用vue擼后臺 系列三(實戰(zhàn)篇）系類文章四：手摸手，帶你用vue擼后臺 系列...

    Channe 評論0 收藏0

  • 手摸手，帶你用vue擼后臺 系列三(實戰(zhàn)篇)

    摘要：社區(qū)的認可目前已經(jīng)是相關(guān)最多的開源項目了，體現(xiàn)出了社區(qū)對其的認可。監(jiān)聽事件手動維護列表這樣我們就簡單的完成了拖拽排序。 完整項目地址：vue-element-admin 系類文章一：手摸手，帶你用vue擼后臺 系列一(基礎(chǔ)篇)系類文章二：手摸手，帶你用vue擼后臺 系列二(登錄權(quán)限篇)系類文章三：手摸手，帶你用vue擼后臺 系列三(實戰(zhàn)篇）系類文章四：手摸手，帶你用vue擼后臺 系列...

    zgbgx 評論0 收藏0

  • summernote(富文本編輯器)將附件與圖片上傳到自己的服務(wù)器（vue項目）

    摘要：將創(chuàng)建好的對象，再插入到編輯器中注意這里不用方法因為他會額外的標簽具體查看，另外當選取本地文件的時候，此時的富文本編輯器會失去焦點，插入新的節(jié)點的時候，總是從起始點開始插入，而非從當前光標的位置進行插入。 1.上傳圖片至自己的服務(wù)器（這個官方都有例子，重點介紹附件上傳）圖片上傳官方網(wǎng)址 // onChange callback $(#summernote).summernote({ ...

    wqj97 評論0 收藏0

  • summernote(富文本編輯器)將附件與圖片上傳到自己的服務(wù)器（vue項目）

    摘要：將創(chuàng)建好的對象，再插入到編輯器中注意這里不用方法因為他會額外的標簽具體查看，另外當選取本地文件的時候，此時的富文本編輯器會失去焦點，插入新的節(jié)點的時候，總是從起始點開始插入，而非從當前光標的位置進行插入。 1.上傳圖片至自己的服務(wù)器（這個官方都有例子，重點介紹附件上傳）圖片上傳官方網(wǎng)址 // onChange callback $(#summernote).summernote({ ...

    xiaoxiaozi 評論0 收藏0

  • 基于 Vue 的移動端富文本編輯器 vue-quill-editor 實戰(zhàn)

    摘要：優(yōu)秀的富文本編輯器有很多，比如，等，但并不是每個都能在移動端有很好的表現(xiàn)。是百度的老牌富文本編輯器，但界面有一股上世紀的感覺，官網(wǎng)最新的一條動態(tài)停留在。優(yōu)秀的富文本編輯器有很多，比如：UEditor，wangEditor 等，但并不是每個都能在移動端有很好的表現(xiàn)。 我們暫且不討論移動端是否真的需要富文本，既然有這需求，就把它實現(xiàn)出來。 失敗的嘗試 正確的選擇是成功的開始，開發(fā)之前肯定要做一些...

    wing324 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<