The vue-quill-editor rich text editor is used in the project
Brief introduction:
Quill based, rich text editor for Vue2 supports server-side rendering and single page applications.
Demo Page
Sum up:
1. in general, simple and easy to use.
2. you can customize the Option toolbar looks good to use
But the pictures used in the project were uploaded. Use this plugin directly. There was no problem. But the backstage couldn't stand it, and the pictures were encoded by base64. Background pictures are limited. Helpless, just want to solve the problem. Fortunately, the background provides an interface, the picture to URL, so good, first the picture to URL, in the rich text editor inside it is not OK?.
The reason is so simple, practice is really another matter.
容我裝逼一把愈污，哈哈干厚，中文用戶還是看下面吧。
項(xiàng)目中使用了 vue-quill-editor 富文本編輯器
簡(jiǎn)介：
基于Quill拌消、適用于Vue2的富文本編輯器媳纬，支持服務(wù)端渲染和單頁(yè)應(yīng)用倦卖。
Demo Page
總結(jié)：
1.總的來說簡(jiǎn)潔好用释簿。
2.可以自定義Option toolbar貌似很好用的樣子
但是項(xiàng)目中使用到了圖片上傳钦听。直接使用這個(gè)插件洒试。完全沒問題。但是后臺(tái)受不了了彪见，傳過去的圖片是base64編碼儡司。后臺(tái)圖片做了限制。無奈只好想辦法解決唄余指。好在后臺(tái)提供了個(gè)接口捕犬，將圖片轉(zhuǎn)為URL，這樣好啊酵镜，先把圖片轉(zhuǎn)為URL碉碉，在放到富文本編輯器里面不就行了嗎。
道理是這么簡(jiǎn)單淮韭，實(shí)踐確是另一回事垢粮。
問題一 怎么添加自定義的button。
demo中也提供了靠粪。
<button type="button" @click="customButtonClick">img</button>
什么 img 太丑了蜡吧，那就是用字符圖標(biāo)(Glyphicons 字體圖標(biāo))
<button type="button" @click="customButtonClick"><i class="glyphicon glyphicon glyphicon-picture"></i></button>
問題二 怎么打開file 選擇圖片。
這個(gè)一開始想著是自定義個(gè) <input type="file" class="ql-image"/>
圖標(biāo)太丑占键。
class="ql-image" 放在上面button中 雖然好看昔善，可以打開獲取圖片，但是還是base64不走自定義方法畔乙。放在input中沒卵用君仆。
該怎么實(shí)現(xiàn)那，其實(shí)也不難
<input type="file" class="custom-input" @change='upload' style='display: none !important;'>
直接放個(gè)隱形的input就解決了。貌似很牛逼的樣子
然后在 upload中寫方法 調(diào)接口實(shí)現(xiàn) Base64到url 的完美過度
最后才是重點(diǎn)：
------------------------------------------分割線-------------------------------------------------------
以下僅做參考
問題三 獲取到了imgUrl后怎么插入到文檔中返咱。
最開始參考的是這位仁兄的回答
但是放到customButton中是獲取不到 this.$refs.myTextEditor.quillEditor更別說.getSelection();這個(gè)方法了钥庇。
因?yàn)樽远x的按鈕是獲取不到 quill 的。
這個(gè)方法放到
onEditorChange({editor, html, text}) {
// console.log('editor change!', editor)
console.log('editor change!', editor.getSelection())
},
這樣是好用的
那我該怎么辦那 馬丹 自己太機(jī)智了咖摹，有點(diǎn)投機(jī)取巧的做法
放大招了直接上代碼
<quill-editor ref="myTextEditor"
v-model="content"
:options="editorOption"
@focus="onEditorFocus($event)"
@ready="onEditorReady($event)"
>
<div id="toolbar" slot="toolbar">
<button class="ql-bold">Bold</button>
<button class="ql-italic">Italic</button>
<select class="ql-size">
<option value="small"></option>
<option selected></option>
<option value="large"></option>
<option value="huge"></option>
</select>
<!-- Add subscript and superscript buttons -->
<!--<button type="button" class="ql-image"></button>-->
<button type="button" @click="customButtonClick">img</button>
<input type="file" class="custom-input" @change='upload' style='display: none !important;'>
</div>
</quill-editor>
data(){
return {
length: '',
editor: {},
editorOption: {
modules: {
// imageImport: true,
// imageResize: {
// displaySize: true
// },
toolbar: '#toolbar',
}
},
}
}
methods: {
onEditorFocus(editor) {
this.editor = editor //當(dāng)content獲取到焦點(diǎn)的時(shí)候就 存儲(chǔ)editor
},
onEditorReady(editor) {
this.editor = editor //當(dāng)quill實(shí)例化完先 存儲(chǔ)editor
},
customButtonClick(){
var range
if (this.editor.getSelection() != null) {
range = this.editor.getSelection()
this.length = range.index //content獲取到焦點(diǎn)评姨，計(jì)算光標(biāo)所在位置，目的為了在該位置插入img
} else {
this.length = this.content.length //content沒有獲取到焦點(diǎn)時(shí)候 目的是為了在content末尾插入img
}
this.$el.querySelector('.custom-input').click(); //打開file 選擇圖片
},
upload(event){
var reader = new FileReader();
var img1 = event.target.files[0];
reader.readAsDataURL(img1);
var that = this;
reader.onloadend = function () {
//上傳圖片
that.pushImg(reader.result, 1)
}
},
pushImg(base64, type){
let self = this
var json = {data: [{id: 0, content: base64}]}
api.pushImgToGeturl(json).then(function (res) { //這一塊可以忽略知識(shí)調(diào)接口獲取到 imgurl
if (res.data.success) {
self.contentImg = res.data.data[0].url.url //獲取到了圖片的URL
console.log(self.contentImg)
self.editor.insertEmbed(self.length, 'image', self.contentImg); // ★這里才是重點(diǎn)★ 插入到content中
}
})
}
}
完事楞艾。
有什么問題可以共同探討参咙。
或者有更好的方法，請(qǐng)告知硫眯，謝了蕴侧。知識(shí)在于分享
最后翻閱了 那么多issues
最大的感觸是，英語是硬傷啊两入，學(xué)好英語是編程的基礎(chǔ)啊净宵。
------------------------------------------分割線-------------------------------------------------------
這才是重點(diǎn)中的重點(diǎn)
這個(gè)問題GitHub上已經(jīng)做了修改。
所以說以上代碼就不用那么繁瑣了裹纳。僅做參考就行择葡。
computed: {
editor() {
return this.$refs.myTextEditor.quill
}
},
//應(yīng)該是quill，而非quillEditor
這樣就可以在 customButtonClick中獲取到
customButtonClick(){
console.log(this.editor)
},
感謝@上善若水_3cd7的提醒剃氧。
var range = self.editor.getSelection(true);
var length = range.index
self.editor.insertEmbed(length, 'image', self.contentImg);
這樣就不需要土辦法了[捂臉]敏储。直接在文中添加圖片。而不需判斷range.index
ok 感謝各位大神
路漫漫其修遠(yuǎn)兮吾將上下而求索的出處
