mavoneditor 显示html,GitHub - best-repos/mavonEditor: mavonEditor - A markdown editor based on Vue tha...

最新推荐文章于 2022-03-02 22:07:59 发布

Axaxaxc

最新推荐文章于 2022-03-02 22:07:59 发布

阅读量364

点赞数

文章标签： mavoneditor 显示html

mavonEditor

基于Vue的markdown编辑器

example (图片展示)

图片上传&预览

移动

Use Setup (开始)

Install mavon-editor (安装)

$ npm install mavon-editor --save

Webpack

如不需要hightlight代码高亮显示，可以忽略此步骤

开启代码高亮props

为了优化打包引入体积，从2.0.0起hightlight.js各代码高亮文件将在使用时按需异步加载，必须要将mavon-editor/dist/js/*.js都引入

如果你使用webpack打包，你需要配置webpack如下所示

webpack.conf.js:

//...

var lang = require('highlight.js-async-webpack/src/file.lang.hljs.js');

var _entry= {

back_end: './src/back-end/index.js', // 原始入口

vue: ['vue']

};

for (var i = 0; i < lang.length; i++) {

_entry[lang[i]] = ['mavon-editor/dist/js/' + lang[i] + '.js']

}

//...

module.exports = {

entry: _entry,

output: {

path: path.resolve(__dirname, './dist'),

filename: 'js/[name].js',

//...

}

注意: webpack的配置文件中output.filename必须为js/[name].js,否则会出现错误Error: Loading chunk xxx failed.

注意: 如果你使用HtmlWebpackPlugin插件(如默认的vue-cli项目)，那么需要手动指定该插件的chunks，

否则所有代码高亮文件将会被引入html(大概有两百多个js显示在html页面上)，插件配置代码大致如下:

module.exports = {

//....

plugins: [

new HtmlWebpackPlugin({

filename: 'index.html',

inject: true,

chunks: ['app'] // 需要引入的chunk入口名

})

]

//....

}

Use (如何引入)

方法1

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

方法2

index.js:

// 全局注册

// require with Webpack/Node.js

var Vue = require('vue')

var mavonEditor = require('mavon-editor')

import 'mavon-editor/dist/css/index.css'

// use

Vue.use(mavonEditor)

new Vue({

'el': '#main',

data() {

return { value: '' }

}

})

index.html

方法3

editor.vue:

// Local Registration

import { mavonEditor } from 'mavon-editor'

import 'mavon-editor/dist/css/index.css'

export default {

components: {

mavonEditor

// or 'mavon-editor': mavonEditor

}

#editor {

margin: auto;

width: 80%;

height: 580px;

}

index.js:

import Vue from 'vue';

var editor = require('./editor.vue');

new Vue({

el: '#main',

render: h => h(editor)

});

index.html:

方法4

editor.vue:

// Local Registration

// import mavonEditor from 'mavon-editor'

var mavonEditor = require('mavon-editor')

import 'mavon-editor/dist/css/index.css'

export default {

components: {

'mavon-editor': mavonEditor.mavonEditor

}

#editor {

margin: auto;

width: 80%;

height: 580px;

}

index.js:

import Vue from 'vue';

var editor = require('./editor.vue');

new Vue({

el: '#main',

render: h => h(editor)

});

index.html:

Images Upload & Preview

upload

exports default {

data(){

return {

img_file: {}

}

methods: {

$imgAdd(pos, $file){

this.img_file[pos] = $file;

$imgDel(pos){

delete this.img_file[pos];

uploadimg($e){

// upload files in one request.

console.log(this.img_file);

var formdata = new FormData();

for(var _img in this.img_file){

formdata.append(_img, this.img_file[_img]);

}

axios({

url: 'http://127.0.0.1/index.php',

method: 'post',

data: formdata,

headers: { 'Content-Type': 'multipart/form-data' },

}).then((res) => {

console.log(res);

})

}

注

默认大小样式为 min-height: 300px , ming-width: 300px 可自行覆盖

基础z-index: 1500

屏幕分辨率低于768px ，自动取消【单栏 | 双栏】编辑模式，更改为【编辑 | 预览】切换 )

快捷键的监听对象更改为编辑器自身，所以当编辑器失去焦点后，快捷键失效

API 文档

props

name 名称

type 类型

default 默认值

describe 描述

value

String

初始值

language

String

语言选择，暂支持 cn: 中文简体， en: 英文， fr: 法语

scrollStyle

Boolean

true

开启滚动条样式(暂时仅支持chrome)

subfield

Boolean

true

true：双栏(编辑预览同屏)， false：单栏(编辑预览分屏)

default_open

String

edit：默认展示编辑区域， preview：默认展示预览区域 , 其他 = edit

placeholder

String

开始编辑...

输入框为空时默认提示文本

editable

Boolean

true

是否允许编辑

code_style

String

code-github

markdown样式： code-github , code-hybrid , code-xcode

toolbarsFlag

Boolean

true

工具栏是否显示

toolbars

Object

如下例

工具栏

ishljs

Boolean

false

是否高亮代码

默认工具栏按钮全部开启, 传入自定义对象

例如: {

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, // 预览

}

events

name 方法名

params 参数

describe 描述

change

String: value , String: render

编辑区发生变化的回调事件(render: value 经过markdown解析后的结果)

save

String: value , String: render

ctrl + s 的回调事件(保存按键,同样触发该回调)

fullscreen