mavonEditor
v3.0.1
| Vue2 | |
|---|---|
| Vue3 |
ตัวอย่างสำหรับ JSFIDDLE
หากต้องการดูรูปภาพเพิ่มเติมคลิกที่นี่ ...
$ npm install mavon-editor --save
index.js :
// 全局注册
// import with ES6
import Vue from 'vue'
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
// use
Vue . use ( mavonEditor )
new Vue ( {
'el' : '#main' ,
data ( ) {
return { value : '' }
}
} ) index.html
< div id =" main " >
< mavon-editor v-model =" value " />
</ div >ก่อนอื่นให้สร้าง vue-mavon-editor.js ในปลั๊กอินไดเรกทอรีโครงการ
import Vue from 'vue';
import mavonEditor from 'mavon-editor';
import 'mavon-editor/dist/css/index.css';
Vue.use(mavonEditor);
จากนั้นเพิ่มการกำหนดค่าปลั๊กอินใน nuxt.config.js
plugins : [
...
{ src : '@/plugins/vue-mavon-editor' , ssr : false }
] ,ขั้นตอนสุดท้ายคือการแนะนำในหน้าหรือส่วนประกอบ
< template >
< div class = " mavonEditor " >
< no-ssr >
< mavon-editor :toolbars = " markdownOption " v-model = " handbook " />
</ no-ssr >
</ div >
</ template >
< script >
export default {
data () {
return {
markdownOption : {
bold : true , // 粗体
... // 更多配置
},
handbook : " #### how to use mavonEditor in nuxt.js "
};
}
};
</ script >
< style scoped>
.mavonEditor {
width : 100 % ;
height : 100 % ;
}
</ style >สำหรับวิธีการแนะนำเพิ่มเติมคลิกที่นี่ ...
วิธีรับและตั้งค่า markdown-it ...
| ชื่อ | พิมพ์ประเภท | ค่าเริ่มต้นเริ่มต้น | อธิบายคำอธิบาย |
|---|---|---|---|
| ค่า | สาย | ค่าเริ่มต้น | |
| ภาษา | สาย | zh-cn | การเลือกภาษา, สนับสนุน ZH-CN ชั่วคราว: ภาษาจีนง่าย, ZH-TW: ภาษาจีนในช่องปาก, En: อังกฤษ, FR: ฝรั่งเศส, PT-BR: โปรตุเกส, RU: รัสเซีย, DE: เยอรมัน, JA: ญี่ปุ่น |
| แบบอักษร | สาย | 14px | แก้ไขขนาดข้อความพื้นที่ |
| การเลื่อนสไตล์ | บูลีน | จริง | เปิดสไตล์แถบเลื่อน (รองรับโครเมี่ยมในขณะนี้เท่านั้น) |
| Boxshadow | บูลีน | จริง | เปิดเงาชายแดน |
| Boxshadowstyle | สาย | 0 2px 12px 0 rgba (0, 0, 0, 0.1) | สไตล์เงาชายแดน |
| การเปลี่ยนแปลง | บูลีน | จริง | ไม่ว่าจะเปิดใช้งานภาพเคลื่อนไหวการเปลี่ยนแปลง |
| Toolbarsbackground | สาย | #FFFFFF | สีพื้นหลังแถบเครื่องมือ |
| previewbackground | สาย | #FBFBFB | สีพื้นหลังกล่องแสดงตัวอย่างสี |
| สนามย่อย | บูลีน | จริง | จริง: คอลัมน์คู่ (แก้ไขหน้าจอเดียวกัน), เท็จ: คอลัมน์เดี่ยว (แก้ไขหน้าจอแยกตัวอย่าง) |
| defaultOpen | สาย | พื้นที่แสดงผลเริ่มต้นจะปรากฏขึ้นเมื่ออยู่ในคอลัมน์เดียว ( subfield=false )แก้ไข: พื้นที่แก้ไขจะแสดงตามค่าเริ่มต้น ดูตัวอย่าง: การแสดงผลเริ่มต้นพื้นที่ตัวอย่างอื่น ๆ = แก้ไข | |
| ผู้ถือครองตำแหน่ง | สาย | เริ่มแก้ไข ... | ข้อความพรอมต์เริ่มต้นเมื่อกล่องอินพุตว่างเปล่า |
| สามารถแก้ไขได้ | บูลีน | จริง | ไม่ว่าจะอนุญาตให้แก้ไข |
| รูปแบบ | สาย | Code-Github | รูปแบบ Markdown: GitHub เริ่มต้น, โทนสีเสริม |
| Toolbarsflag | บูลีน | จริง | ไม่ว่าจะแสดงแถบเครื่องมือหรือไม่ |
| การนำทาง | บูลีน | เท็จ | ไดเรกทอรีการแสดงผลเริ่มต้น |
| ทางลัด | บูลีน | จริง | ไม่ว่าจะเปิดใช้งานปุ่มทางลัด |
| ออโต้โฟกัส | บูลีน | จริง | โฟกัสอัตโนมัติไปยังกล่องข้อความ |
| ishljs | บูลีน | จริง | รหัสเน้น |
| ImageFilter | การทำงาน | โมฆะ | ฟังก์ชั่นการกรองรูปภาพมีพารามิเตอร์ File Object ซึ่งต้องการ Boolean ที่จะส่งคืน true หมายถึงไฟล์ถูกกฎหมายและ false หมายความว่าไฟล์นั้นผิดกฎหมาย |
| Imageclick | การทำงาน | โมฆะ | เหตุการณ์คลิกภาพค่าเริ่มต้นเป็นตัวอย่างสามารถแทนที่ได้ |
| แท็บ | ตัวเลข | t | ค่าเริ่มต้นคือ t |
| HTML | บูลีน | จริง | เปิดใช้งานแท็ก HTML แท็กนี้มีค่าเริ่มต้นเป็นจริงเสมอเนื่องจากเหตุผลทางประวัติศาสตร์ แต่ขอแนะนำให้ปิดโดยไม่ต้องใช้แท็ก HTML มันสามารถกำจัดปัญหาด้านความปลอดภัยได้อย่างสมบูรณ์ |
| XSSOPTIONS | วัตถุ | - | การกำหนดค่ากฎ XSS เปิดใช้งานโดยค่าเริ่มต้นตั้งค่า FALSE เพื่อปิด หลังจากเปิดใช้งานแท็ก HTML จะถูกกรองและแอตทริบิวต์แท็ก HTML ทั้งหมดจะถูกกรองตามค่าเริ่มต้น ขอแนะนำให้กำหนดค่า Whitelists ตามความต้องการเพื่อลดความเป็นไปได้ของการถูกโจมตี - การอ้างอิงกฎที่กำหนดเอง: https://jsxss.com/zh/options.html - การสาธิตอ้างอิง: dev-demo |
| แถบเครื่องมือ | วัตถุ | ตัวอย่างต่อไปนี้ | แถบเครื่องมือ |
ปุ่มแถบเครื่องมือเริ่มต้นทั้งหมดถูกเปิดใช้งานและวัตถุที่กำหนดเองจะถูกส่งผ่านคุณสามารถเลือกที่จะเปิดใช้งานปุ่มบางปุ่ม
/*
例如: {
bold: true, // 粗体
italic: true,// 斜体
header: true,// 标题
}
此时, 仅仅显示此三个功能键
*/
toolbars: {
bold : true , // 粗体
italic : true , // 斜体
header : true , // 标题
underline : true , // 下划线
strikethrough : true , // 中划线
mark : true , // 标记
superscript : true , // 上角标
subscript : true , // 下角标
quote : true , // 引用
ol : true , // 有序列表
ul : true , // 无序列表
link : true , // 链接
imagelink : true , // 图片链接
code : true , // code
table : true , // 表格
fullscreen : true , // 全屏编辑
readmodel : true , // 沉浸式阅读
htmlcode : true , // 展示html源码
help : true , // 帮助
/* 1.3.5 */
undo : true , // 上一步
redo : true , // 下一步
trash : true , // 清空
save : true , // 保存（触发events中的save事件）
/* 1.4.2 */
navigation : true , // 导航目录
/* 2.1.8 */
alignleft : true , // 左对齐
aligncenter : true , // 居中
alignright : true , // 右对齐
/* 2.2.1 */
subfield : true , // 单双栏模式
preview : true , // 预览
}หากคุณต้องการปรับแต่งปุ่มเพิ่มแถบเครื่องมือคุณสามารถใช้วิธีการต่อไปนี้
< mavon-editor >
<!-- 左工具栏前加入自定义按钮 -->
< template slot = "left-toolbar-before" >
< button
type = "button"
@ click = "$click('test')"
class = "op-icon fa fa-mavon-align-left"
aria-hidden = "true"
title = "自定义"
> </ button >
</ template >
<!-- 左工具栏后加入自定义按钮 -->
< template slot = "left-toolbar-after" >
< button
type = "button"
@ click = "$click('test')"
class = "op-icon fa fa-mavon-align-left"
aria-hidden = "true"
title = "自定义"
> </ button >
</ template >
<!-- 右工具栏前加入自定义按钮 -->
< template slot = "right-toolbar-before" >
< button
type = "button"
@ click = "$click('test')"
class = "op-icon fa fa-mavon-align-left"
aria-hidden = "true"
title = "自定义"
> </ button >
</ template >
<!-- 右工具栏后加入自定义按钮 -->
< template slot = "right-toolbar-after" >
< button
type = "button"
@ click = "$click('test')"
class = "op-icon fa fa-mavon-align-left"
aria-hidden = "true"
title = "自定义"
> </ button >
</ template >
</ mavon-editor >| ชื่อชื่อชื่อ | พารามิเตอร์พารามิเตอร์ | อธิบายคำอธิบาย |
|---|---|---|
| เปลี่ยน | สตริง: ค่าสตริง: เรนเดอร์ | เหตุการณ์การโทรกลับที่เปลี่ยนแปลงในพื้นที่แก้ไข (Reender: ค่าผลลัพธ์หลังจากการแยกวิเคราะห์โดย Markdown) |
| บันทึก | สตริง: ค่าสตริง: เรนเดอร์ | เหตุการณ์การโทรกลับของ Ctrl + S (บันทึกคีย์และทริกเกอร์การโทรกลับด้วย) |
| เต็มหน้าจอ | บูลีน: สถานะ, สตริง: ค่า | สลับเหตุการณ์การโทรกลับสำหรับการแก้ไขแบบเต็มหน้าจอ (บูลีน: เต็มหน้าจอในสถานะ) |
| readmodel | บูลีน: สถานะ, สตริง: ค่า | สลับเหตุการณ์การโทรกลับของการอ่านที่ดื่มด่ำ (บูลีน: เปิดใช้งานการอ่าน) |
| htmlcode | บูลีน: สถานะ, สตริง: ค่า | ตรวจสอบเหตุการณ์การโทรกลับของซอร์สโค้ด HTML (บูลีน: เปิดใช้งานซอร์สโค้ด) |
| SubfieldToggle | บูลีน: สถานะ, สตริง: ค่า | สลับเหตุการณ์การโทรกลับของการแก้ไขคอลัมน์เดี่ยวและคู่ (บูลีน: สถานะเปิดคอลัมน์คู่) |
| PreviewToggle | บูลีน: สถานะ, สตริง: ค่า | สลับเหตุการณ์การโทรกลับที่แก้ไขตัวอย่าง (บูลีน: แสดงตัวอย่างสถานะเปิด) |
| helptoggle | บูลีน: สถานะ, สตริง: ค่า | ดูกิจกรรมการโทรกลับช่วยเหลือ (บูลีน: เปิดใช้งานความช่วยเหลือ) |
| การนำทาง | บูลีน: สถานะ, สตริง: ค่า | สลับเหตุการณ์การโทรกลับของไดเรกทอรีการนำทาง (บูลีน: เปิดใช้งานการนำทาง) |
| imgadd | หมายเลข: pos, ไฟล์: imgfile | เพิ่มเหตุการณ์การโทรกลับลงในไฟล์ภาพ (POS: ตำแหน่งของภาพในรายการไฟล์: วัตถุไฟล์) |
| imgdel | อาร์เรย์ (2): [หมายเลข: POS, ไฟล์: imgfile] | เหตุการณ์การเรียกคืนไฟล์ภาพการโทรกลับ (อาร์เรย์ (2): อาร์เรย์ของสององค์ประกอบตำแหน่งแรกคือตำแหน่งของภาพในรายการและตำแหน่งที่สองคือวัตถุไฟล์) |
หากคุณไม่จำเป็นต้องเน้นรหัสไฮไลต์คุณควรตั้งค่า ishljs เป็นเท็จ
เปิดรหัสอุปกรณ์ประกอบฉากไฮไลต์
<! -- ishljs默认为true -->
<mavon-editor :ishljs="true"></mavon-editor> ในการปรับระดับเสียงปลั๊กอินให้เหมาะสมไฟล์ต่อไปนี้จะใช้ลิงก์ภายนอก cdnjs โดยค่าเริ่มต้นจาก v2.4.2 :
highlight.jsgithub-markdown-csskatex ( v2.4.7 ) รหัสที่เน้นไฟล์การแยกวิเคราะห์ภาษาใน highlight.js และรูปแบบการเน้นรหัสจะถูกโหลดตามความต้องการเมื่อใช้ github-markdown-css และ katex จะโหลดเฉพาะเมื่อ mounted
ข้อสังเกต : โทนสีเสริมและภาษาที่รองรับจะถูกส่งออกจาก highlight.js/9.12.0
โดยไม่ต้องใช้ CDN การโหลดตามความต้องการในท้องถิ่นคลิกที่นี่ ...
< template >
< mavon-editor ref = md @imgAdd = " $imgAdd " @imgDel = " $imgDel " ></ mavon-editor >
</ template >
< script >
export default {
methods : {
// 绑定@imgAdd event
$imgAdd (pos, $file){
// 第一步.将图片上传到服务器.
var formdata = new FormData ();
formdata . append ( ' image ' , $file);
axios ({
url : ' server url ' ,
method : ' post ' ,
data : formdata,
headers : { ' Content-Type ' : ' multipart/form-data ' },
}). then (( url ) => {
// 第二步.将返回的url替换到文本原位置 -> 
/**
* $vm 指为mavonEditor实例，可以通过如下两种方式获取
* 1. 通过引入对象获取: `import {mavonEditor} from ...` 等方式引入后，`$vm`为`mavonEditor`
* 2. 通过$refs获取: html声明ref : `<mavon-editor ref=md ></mavon-editor>，`$vm`为 `this.$refs.md`
*/
$vm . $img2Url (pos, url);
})
}
}
}
</ script >สำหรับรายละเอียดเกี่ยวกับการอัปโหลดรูปภาพคลิกที่นี่ ...
| สำคัญ | ปุ่มกด | การทำงาน |
|---|---|---|
| F8 | 119 | เปิด/ปิดการนำทาง |
| F9 | 120 | ดูตัวอย่าง/แก้ไขสลับ |
| F10 | 121 | เปิด/ปิดเต็มหน้าจอ |
| F11 | 122 | เปิด/ปิดโหมดการอ่าน |
| F12 | 123 | คอลัมน์เดี่ยว/การสลับคอลัมน์คู่ |
| แท็บ | 9 | การเยื้อง |
| ctrl + s | 17 + 83 | ทริกเกอร์บันทึก |
| Ctrl + D | 17 + 68 | ลบแถวที่เลือก |
| ctrl + z | 17 + 90 | ก่อนหน้า |
| ctrl + y | 17 + 89 | ขั้นตอนต่อไป |
| ctrl + breakspace | 17 + 8 | แก้ไขอย่างชัดเจน |
| Ctrl + B | 17 + 66 | **ตัวหนา** |
| ctrl + i | 17 + 73 | *ตัวเอียง* |
| Ctrl + H | 17 + 72 | #ชื่อ |
| Ctrl + 1 | 17 + 97 หรือ 49 | #ชื่อ |
| Ctrl + 2 | 17 + 98 หรือ 50 | ## ชื่อ |
| Ctrl + 3 | 17 + 99 หรือ 51 | ### ชื่อ |
| Ctrl + 4 | 17 + 100 หรือ 52 | #### ชื่อ |
| Ctrl + 5 | 17 + 101 หรือ 53 | ##### ชื่อ |
| Ctrl + 6 | 17 + 102 หรือ 54 | ###### ชื่อ |
| ctrl + u | 17 + 85 | ++ unscore ++ |
| ctrl + m | 17 + 77 | == แท็ก == |
| ctrl + q | 17 + 81 | > คำพูด |
| Ctrl + O | 17 + 79 | 1. รายการที่สั่งซื้อ |
| Ctrl + L | 17 + 76 | [ชื่อลิงค์] (ที่อยู่ลิงค์) |
| ctrl + alt + s | 17 + 18 + 83 | มาร์คมุมบน^ |
| ctrl + alt + u | 17 + 18 + 85 | - รายการที่ไม่ได้เรียงลำดับ |
| ctrl + alt + c | 17 + 18 + 67 | `` `บล็อกรหัส |
| ctrl + alt + l | 17 + 18 + 76 | ! [ชื่อภาพ] (ลิงค์รูปภาพ) |
| ctrl + alt + t | 17 + 18 + 84 | แผ่น |
| ctrl + shift + s | 17 + 16 + 83 | |
| ctrl + shift + d | 17 + 16 + 68 | ~~ เครื่องหมายกลาง ~~ |
| ctrl + shift + c | 17 + 16 + 67 | ศูนย์ |
| ctrl + shift + l | 17 + 16 + 76 | ด้านซ้าย |
| ctrl + shift + r | 17 + 16 + 82 | ทางด้านขวา |
| แท็บ Shift + | 16 + 9 | ยกเลิกการเยื้อง |
Markdown-it
ข้อความอัตโนมัติ
ปลั๊กอินไวยากรณ์อื่น ๆ สามารถแนะนำได้โดยการรับวัตถุ Markdown-IT ปลั๊กอินไวยากรณ์อื่น ๆ สามารถแนะนำได้โดยการรับวัตถุ Markdown-IT
Mavoneditor เป็นโอเพ่นซอร์สและเปิดตัวภายใต้ใบอนุญาต MIT
ลิขสิทธิ์ (C) 2017 Hinesboy
