大地资源在线视频在线观看,xo无码av毛,欧美第一页

wangEditor官網：http://www.wangeditor.com/index.html
注：請先熟悉使用wangEditor，在開始在vue中使用，這樣更加快捷應用
首先先進行下載
npm install wangeditor
在使用的頁面中，按照如下方法使用
這樣就完成了在vue中的使用了。無需別的操作了

<template>
    <div>
        <div ref="editor" style="text-align:left" class="textBox">
          <p>嘴上說著愛你，心里罵你傻逼</p>
        </div>
        <button v-on:click="getContent">查看內容</button>
    </div>
</template>

<script>
    import E from 'wangeditor'
    export default {
      data () {
        return {
          editorContent: '',
          editor:null
        }
      },
      methods: {
        getContent: function () {
            // alert(this.editorContent)
          var json = this.editor.txt.getJSON()  // 獲取 JSON 格式的內容
          var jsonStr = JSON.stringify(json)
          console.log(json)
          console.log(jsonStr)
          console.log(this.editorContent,'----------------------')
        }
      },
      mounted() {
        this.editor = new E(this.$refs.editor)
        this.editor.customConfig.onchange = (html,a) => {
        // console.log(html,'----------------',a)
          this.editorContent = html
        }
        // this.editor.customConfig.uploadImgShowBase64 = true // 使用base64保存圖片  上下兩者不可同用
        this.editor.customConfig.uploadImgServer = 'http://chuantu.xyz/'  // 上傳圖片到服務器
        // 隱藏“網絡圖片”tab
        this.editor.customConfig.showLinkImg = false
        this.editor.create()
      }
    }
</script>

<style scoped>
</style>

官網中的api文檔重點介紹

基礎使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>wangEditor 一個頁面多個編輯器</title>
<style type="text/css">
.toolbar {
background-color: #f1f1f1;
border: 1px solid #ccc;
}
.text {
border: 1px solid #ccc;
height: 200px;
}
</style>
</head>
<body>
<div id="div1" class="toolbar">
</div>
<div style="padding: 5px 0; color: #ccc">中間隔離帶</div>
<div id="div2" class="text">
<p>第一個 demo（菜單和編輯器區域分開）</p>
</div>

<div id="div3">
    <p>第二個 demo（常規）</p>
</div>

<!-- 引用js -->
<script type="text/javascript" src="/wangEditor.min.js"></script>

-------------------多個編輯器--------------------
<script type="text/javascript">
var E = window.wangEditor

    var editor1 = new E('#div1', '#div2')
    editor1.create()

    var editor2 = new E('#div3')
    editor2.create()
</script>

-----------------------最基礎----------------------
<div id="editor">
<p>歡迎使用 <b>wangEditor</b> 富文本編輯器</p>
</div>
<script type="text/javascript">
var E = window.wangEditor
var editor = new E('#editor')
// 或者 var editor = new E( document.getElementById('editor') )
editor.create()
</script>
</body>
</html>

// 禁用編輯功能
editor.$textElem.attr('contenteditable', false)

// 開啟編輯功能
editor.$textElem.attr('contenteditable', true)

//設置內容
editor.txt.html(...)
//追加內容
editor.txt.html(...)
//清空內容
editor.txt.clear()
--------------讀取內容---------------
document.getElementById('btn1').addEventListener('click', function () {
// 讀取 html
alert(editor.txt.html())
}, false)

document.getElementById('btn2').addEventListener('click', function () {
    // 讀取 text
    alert(editor.txt.text())
}, false)

-------------------vue中讀取帶標簽的內容mounted() {}中操作----------------
editor.customConfig.onchange = (html) => {
//監控變化，同步更新到text area
this.editorContent = html //帶標簽的內容html賦值得data中的變量editorContent
}
-------------------------自定義菜單-------------------------
// 自定義菜單配置
editor.customConfig.menus = [
'head',
'bold',
'italic',
'underline'
]
//默認菜單
[
'head', // 標題
'bold', // 粗體
'fontSize', // 字號
'fontName', // 字體
'italic', // 斜體
'underline', // 下劃線
'strikeThrough', // 刪除線
'foreColor', // 文字顏色
'backColor', // 背景顏色
'link', // 插入鏈接
'list', // 列表
'justify', // 對齊方式
'quote', // 引用
'emoticon', // 表情
'image', // 插入圖片
'table', // 表格
'video', // 插入視頻
'code', // 插入代碼
'undo', // 撤銷
'redo' // 重復
]
-----------------debug模式---------------------
// 通過 url 參數配置 debug 模式。url 中帶有 wangeditor_debug_mode=1 才會開啟 debug 模式
editor.customConfig.debug = location.href.indexOf('wangeditor_debug_mode=1') > 0

用戶自己使用 JS 修改了div1的innerHTML，不會自動觸發onchange函數，此時你可以通過執行editor.change()來手動觸發onchange函數的執行。
editor.customConfig.onchange = function (html) {
// html 即變化之后的內容
console.log(html)
}
editor.create()

document.getElementById('btn1').addEventListener('click', function () {
    // 如果未配置 editor.customConfig.onchange，則 editor.change 為 undefined
    editor.change && editor.change()
})

--------------------配置編輯區域的z-index----------------
editor.customConfig.zIndex = 100

// 關閉粘貼樣式的過濾
editor.customConfig.pasteFilterStyle = false
// 忽略粘貼內容中的圖片
editor.customConfig.pasteIgnoreImg = true
// 自定義處理粘貼的文本內容
editor.customConfig.pasteTextHandle = function (content) {
    // content 即粘貼過來的內容（html 或 純文本），可進行自定義處理然后返回
    return content + '<p>在粘貼內容后面追加一行</p>'
}

-------------網絡圖片------------
--------插入網絡圖片的回調
editor.customConfig.linkImgCallback = function (url) {
console.log(url) // url 即插入圖片的地址
}
--------插入鏈接的校驗
editor.customConfig.linkCheck = function (text, link) {
console.log(text) // 插入的文字
console.log(link) // 插入的鏈接

return true // 返回 true 表示校驗成功
// return '驗證失敗' // 返回字符串，即校驗失敗的提示信息

}
--------插入網絡圖片的校驗
editor.customConfig.linkImgCheck = function (src) {
console.log(src) // 圖片的鏈接

return true // 返回 true 表示校驗成功
// return '驗證失敗' // 返回字符串，即校驗失敗的提示信息

}
-----------用戶點擊富文本區域會觸發onfocus
editor.customConfig.onfocus = function () {
console.log("onfocus")
}
-----------手動獲取焦點的富文本并且鼠標點擊富文本以外的區域，則會觸發onblur函數執行
editor.customConfig.onblur = function (html) {
// html 即編輯器中的內容
console.log('onblur', html)
}

// 自定義配置顏色（字體顏色、背景色）
editor.customConfig.colors = [
    '#000000',
    '#eeece0',
    '#1c487f',
    '#4d80bf',
    '#c24f4a',
    '#8baa4a',
    '#7b5ba1',
    '#46acc8',
    '#f9963b',
    '#ffffff'
]

// 表情面板可以有多個 tab ，因此要配置成一個數組。數組每個元素代表一個 tab 的配置
editor.customConfig.emotions = [
{
// tab 的標題
title: '默認',
// type -> 'emoji' / 'image'
type: 'image',
// content -> 數組
content: [
{
alt: '[壞笑]',
src: 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/50/pcmoren_huaixiao_org.png'
},
{
alt: '[舔屏]',
src: 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/40/pcmoren_tian_org.png'
}
]
},
{
// tab 的標題
title: 'emoji',
// type -> 'emoji' / 'image'
type: 'emoji',
// content -> 數組
content: ['??', '??', '??', '??', '??']
}
]

// 自定義字體
editor.customConfig.fontNames = [
    '宋體',
    '微軟雅黑',
    'Arial',
    'Tahoma',
    'Verdana'
]

------------------------------------------上傳圖片-服務器---------------------
上傳圖片
參考如下代碼

<div id="div1">
<p>歡迎使用 wangEditor 富文本編輯器</p>
</div>

// 配置服務器端地址
editor.customConfig.uploadImgServer = '/upload'

// 進行下文提到的其他配置
// ……
// ……
// ……

editor.create()

</script>
其中/upload是上傳圖片的服務器端接口，接口返回的數據格式如下（實際返回數據時，不要加任何注釋！！！）

{
// errno 即錯誤代碼，0 表示沒有錯誤。
// 如果有錯誤，errno != 0，可通過下文中的監聽函數 fail 拿到該錯誤碼進行自定義處理
"errno": 0,

// data 是一個數組，返回若干圖片的線上地址
"data": [
    "圖片1地址",
    "圖片2地址",
    "……"
]

}
限制圖片大小
默認限制圖片大小是 5M

// 將圖片大小限制為 3M
editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024
限制一次最多能傳幾張圖片
默認為 10000 張（即不限制），需要限制可自己配置

// 限制一次最多上傳 5 張圖片
editor.customConfig.uploadImgMaxLength = 5
自定義上傳參數
上傳圖片時可自定義傳遞一些參數，例如傳遞驗證的token等。參數會被添加到formdata中。

editor.customConfig.uploadImgParams = {
// 如果版本 <=v3.1.0 ，屬性值會自動進行 encode ，此處無需 encode
// 如果版本 >=v3.1.1 ，屬性值不會自動 encode ，如有需要自己手動 encode
token: 'abcdef12345'
}
如果還需要將參數拼接到 url 中，可再加上如下配置

editor.customConfig.uploadImgParamsWithUrl = true
自定義 fileName
上傳圖片時，可自定義filename，即在使用formdata.append(name, file)添加圖片文件時，自定義第一個參數。

editor.customConfig.uploadFileName = 'yourFileName'
自定義 header
上傳圖片時刻自定義設置 header

editor.customConfig.uploadImgHeaders = {
'Accept': 'text/x-json'
}
withCredentials（跨域傳遞 cookie）
跨域上傳中如果需要傳遞 cookie 需設置 withCredentials

editor.customConfig.withCredentials = true
自定義 timeout 時間
默認的 timeout 時間是 10 秒鐘

// 將 timeout 時間改為 3s
editor.customConfig.uploadImgTimeout = 3000
監聽函數
可使用監聽函數在上傳圖片的不同階段做相應處理

editor.customConfig.uploadImgHooks = {
before: function (xhr, editor, files) {
// 圖片上傳之前觸發
// xhr 是 XMLHttpRequst 對象，editor 是編輯器對象，files 是選擇的圖片文件

    // 如果返回的結果是 {prevent: true, msg: 'xxxx'} 則表示用戶放棄上傳
    // return {
    //     prevent: true,
    //     msg: '放棄上傳'
    // }
},
success: function (xhr, editor, result) {
    // 圖片上傳并返回結果，圖片插入成功之后觸發
    // xhr 是 XMLHttpRequst 對象，editor 是編輯器對象，result 是服務器端返回的結果
},
fail: function (xhr, editor, result) {
    // 圖片上傳并返回結果，但圖片插入錯誤時觸發
    // xhr 是 XMLHttpRequst 對象，editor 是編輯器對象，result 是服務器端返回的結果
},
error: function (xhr, editor) {
    // 圖片上傳出錯時觸發
    // xhr 是 XMLHttpRequst 對象，editor 是編輯器對象
},
timeout: function (xhr, editor) {
    // 圖片上傳超時時觸發
    // xhr 是 XMLHttpRequst 對象，editor 是編輯器對象
},

// 如果服務器端返回的不是 {errno:0, data: [...]} 這種格式，可使用該配置
// （但是，服務器端返回的必須是一個 JSON 格式字符串！！！否則會報錯）
customInsert: function (insertImg, result, editor) {
    // 圖片上傳并返回結果，自定義插入圖片的事件（而不是編輯器自動插入圖片！！！）
    // insertImg 是插入圖片的函數，editor 是編輯器對象，result 是服務器端返回的結果

    // 舉例：假如上傳圖片成功后，服務器端返回的是 {url:'....'} 這種格式，即可這樣插入圖片：
    var url = result.url
    insertImg(url)

    // result 必須是一個 JSON 格式字符串！！！否則報錯
}
}

}
自定義提示方法
上傳圖片的錯誤提示默認使用alert彈出，你也可以自定義用戶體驗更好的提示方式

editor.customConfig.customAlert = function (info) {
// info 是需要提示的內容
alert('自定義提示：' + info)
}
自定義上傳圖片事件
如果想完全自己控制圖片上傳的過程，可以使用如下代碼

editor.customConfig.customUploadImg = function (files, insert) {
// files 是 input 中選中的文件列表
// insert 是獲取圖片 url 后，插入到編輯器的方法

// 上傳代碼返回結果之后，將圖片插入到編輯器中
insert(imgUrl)

}

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

富文本使用wangEditor，vue中的使用方法

富文本使用wangEditor，vue中的使用方法

官網中的api文檔重點介紹

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

富文本使用wangEditor，vue中的使用方法

官網中的api文檔重點介紹

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频