hinesboy / mavoneditor Goto Github PK

已经导入了css如图所示

我在Markdown编辑之后，存储value，在别的地方引用，任然是编辑时候自己写的那一串文字，没有加入Markdown的样式：

找了一下发现似乎没有解析Markdown语法的API。使我没有找到吗，还是需要引入其他包来进行语法转换呢？

我是把用户编辑好的内容以html格式保存, 然后我直接在编辑器里写html代码 包括一些css样式也会直接保存 展示的时候会造成布局混乱 不知道有没有什么办法能解决掉这个问题?

请问下我要上传图片到服务器，然后编辑器里的img不用base64，用服务器返回回来的url，应该怎么写呢？

怎么实现部分Markdown语法解析 部分不解析 比如我想实现代码块解析 其他的语法都不解析 利用markdown-it实现吗？ 那和mavonEditor交互过程是怎么实现的呢

Hi! First thanks for your great work!

I want to to have multiple editors using bootstrap tabs, how can achieve it?

The first editor is working fine, but when I go to the second tab the double panel is not visible, just the first one.

As you can see in the second editor the preview div is not visible.

Thanks

怎么样手动设置为 单栏 编辑 |预览 模式?

不好意思 文档的方法不太会用希望有个demo 拜托啦大佬
就是这个

这个【./0】 改成服务器的路径

$vm.$img2Url(>=2.1.11) 这个方法不知道怎么用

看了gh-pages的demo，webpack.prod.conf.js这个文件是这样打包的，结果就是js文件独立于static文件夹，这样子实在是不美观，demo是吧所有资源文件都放到根目录了，我想这个资源文件仍然保持vue-cli的目录结构应该怎么做

发现不修改这个output会报下面的错

GET http://192.168.50.234/js/hljs.cpp.js
Error: Loading chunk 145 failed.

抱歉我是第一次使用，虽知道markdown的存在但平常并没有时间研究它，现在使用Vue做项目看到这个挺不错的，只是翻看了很久也没找到想要的解析函数，能够把md格式转为html格式，所以想问问直接方便的解析函数是什么？如果我不小心看漏了请见谅，对了还有内容的获取与上传，抱歉真的是新手，新到不行的那种。谢谢

Hello.
How to print html in v-model?

<mavonEditor id="v-note-wrapper" placehold="Conteudo" v-model="var" class="full-width editor-html" /> ... this.var === 'HTML' ...

<button @click="uploadimg">upload</button>
<mavon-editor ref="mavonEditor" v-model="formValidate.content" @imgAdd="$imgAdd" @imgDel="$imgDel" />

uploadimg($e){
    var formdata = new FormData();
    for(var _img in this.img_file){
        formdata.append('file', this.img_file[_img]);
    }
    axios({
        url: '/material/add',
        method: 'post',
        data: formdata,
        headers: { 'Content-Type': 'multipart/form-data' },
    }).then((res) => {
    	this.$refs.mavonEditor.$imgAddByUrl('./0', res.data.url)// 这个生效
    	this.$refs.mavonEditor.$img2Url('![图片](./0)', '![图片]('+ res.data.url +')')// 不生效
    	this.$refs.mavonEditor.$imglst2Url(['./0', res.data.url])// 不生效
        console.log(res);
    })
},

是不是我用的不对啊，我感觉![图片](./0)没有被改变成![图片](http://xxx)啊

ReferenceError: window is not defined 怎么解

我选择的时候，好像只能每次选择一张

1.推荐是代码高亮采用GoogleCodePrettify，这个是主流的代码高亮，包括wordpress等很多网站都用的GoogleCodePrettify，而且或许可以解决作者js和webpack打包的问题#42
2.获取的render并不推荐就是预览的代码，我看到<pre>代码已经被hljs被处理过了，正确的应该是只生成<pre>保留原生的样子，处理应该是交给前端展示的时候进行处理
3.应该把前端部分的样式抽出来，比如一个博客分为后端编辑和前端展示，前端展示其实只是右侧预览的那部分样式，这样可以减小前端加载样式的体积

这个readme写的很模糊啊，vue-cli是既需要配置上面的webpack.config.base.js还是只配置下面的chunks

类似这样的 script 有近200个。

mavonEditor 會在我設定 :ishljs="true" 去找需要的 js
請問怎麼修改路徑呢
例如說我在的頁面是 /threads/1
會去這邊 /threads/1/js/hljs.cpp.js 要檔案
但我的檔案位置是在 /js/hljs.cpp.js

應該是絕對路徑的問題，但我不清楚問題來源是哪邊，麻煩了

我看你们给出的例子：

var formdata = new FormData();
for(var _img in this.img_file){
    formdata.append('file', this.img_file[_img]);
}
axios({
    url: '/material/add',
    method: 'post',
    data: formdata,
    headers: { 'Content-Type': 'multipart/form-data' },
}).then((res) => {
	this.$refs.mavonEditor.$imglst2Url([['./0', res.data.url]])
    console.log(res);
})

但是FormData ie9是不生效的，有没有其他的上传办法，或者能否支持嵌入webuploader上传插件：

import WebUploader from 'webuploader';
import 'webuploader/dist/webuploader.css';

观察到css文件中使用了font-awesome,可能导致font-awsome.css无法正常显示

看到dist里面的mavon-editor.js有900+kb，在项目里用webpack打包后，基本上占据了js文件的一半。

左边MD语法没有高亮，用户体验不好，希望能支持语法高亮。

根据 vue 的文档，可以通过下面这种方式实现异步加载

Vue.component('async-webpack-example', function (resolve) {
  // 这个特殊的 require 语法告诉 webpack
  // 自动将编译后的代码分割成不同的块，
  // 这些块将通过 Ajax 请求自动下载。
  require(['./my-async-component'], resolve)
})
```
这里的 ./my-async-component 是一个 vue 组件。
可是直接 require('mavon-editor') 得到的并不是 vue 组件
这里要如何处理呢？

工具栏中，图片上传按钮点击之后，下拉菜单打开，点击下拉菜单中的 删除图片 按钮，编辑区的内容没有更新 （例： 工具栏中删除 ./0 这张图片， 但是编辑区中 ! [图片] (./0) 没有消失）

没有找到唯一的class，所以不好操作

Could you add "dropzone.js" or "vue-clip" for uploading the image?

https://github.com/kfei/vue-s3-dropzone or vue-clip

为什么右侧预览图的内容都是居中的？

Now, when clicking on the toolbar, the inserted content is Chinese. Can you make it support Multi-language like navigation content after setting language property?

按照正常的引入1.5.4

//方法一
// import with ES6
import Vue from 'vue'
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
// use
Vue.use(mavonEditor)

并在页面中注册了组件

components: {
mavonEditor
}

在html中引入:

mavonEditor v-model="value"
但是还是报了标题这个错误，请作者帮助解答一下，万分感谢。

case: 我把render 存进数据库，然后第二次读取的 时候 重新把 数据库里的render 给控件 的v-model 会显示不出来
我必须 自己在下面 写一个 dev v-html来做 此控件的显示控件如图 希望 能不用自己在v-html

项目用到的脚手架是基于 vue-cli 的多次修改版
而且对 webpack 不熟悉 , 已经不知道要怎么改配置文件了.
按照 readme 修改直接会报错:

path.js:7
    throw new TypeError('Path must be a string. Received ' + inspect(path));
    ^
TypeError: Path must be a string. Received [ 'vue' ]
    at assertPath (path.js:7:11)
    at Object.resolve (path.js:184:7)

后来改成这个样子:

var lang = require('highlight.js-async-webpack/src/file.lang.hljs.js');
entries.back_end= './src/back-end/index.js'; // highlit原始入口
entries.vue='vue';
for (var i = 0; i < lang.length; i++) {
    entries[lang[i]] = 'mavon-editor/dist/js/' + lang[i] + '.js'
}
return entries;

好不容易 run dev 成功了, 页面也不显示 , 还有报错

This relative module was not found:
* ./src/back-end/index.js in multi ./build/dev-client ./src/back-end/index.js

如果可以不用配 webpack 安装好就能直接用就好了, 不是异步加载也没关系

这个html源码只能查看，不能编辑的，如果要插入一段html，就展示不了网页了

比如自定义添加插入视频、插入自定义标签的一些需要自定义的一些功能键。

请问下大概什么时候能支持图片上传呢？

How to cancel it?

刚看到有新版本，所以将2.1.6升级为2.1.12，发现初始化subfield分屏参数无效，不能实现编辑和预览同屏，只能实现编辑预览分屏，当全屏输入点击沉浸式阅读后再次点击预览又可以变成编辑预览分屏显示，是最新版本的分屏参数改了但是文档没有改变吗？

如何直接获内容的纯文本和html格式的内容。
我是做一博客的，列表页想显示部分的纯文本，详情页才显示markdow格式。

文档好像没有这两个接口，这两个接口还是挺需要的，有空加上谢谢

参考这个的toc http://miaolz123.github.io/vue-markdown/

有没有直接获取编辑器内容的 api？

知道了，连续两个回车换行添加新的ｐ标签。　（原先以为是双空格加回车）

我想问一下：
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);
})
通过触发这个方法上传的文件怎么替换文本中base64字符串，没办法一一对应上base64的路径

Demo is very nice but I can't setup it.

vue.esm.js?65d7:558 [Vue warn]: Unknown custom element: <mavonEditor> 
- did you register the component correctly? 
For recursive components, make sure to provide the "name" option. 
(found in <App> at D:\DEV\Git\vue2-in-yii2\vue2\src\pages\PersonalCenter.vue)

3 pictures, 1 is main.js, 2 is PersonalCenter.vue ,3 is the console of browser.
version is ^1.5.7
Is my setup right ?

编辑前：
主要是图片替换和获取内容
1.我上传图片
然后用$vm.$imgUpdateByUrl替换网址
然后我要立即保存内容
你会发现因为上传图片是异步的，change获取的渲染内容里是没替换图片的（就是说这个内容毫无用处，除非你在编辑下内容）
2.必须点文字，点空白地方根本不能编辑（要光标默认到文末）
3.我展示这个内容的话，我得保存图片列表this.img_file，然后用php去替换md源代码里的图片部分是吧，好麻烦
4.上传图片file的name是./0，服务器接受会变成_/0，用./0作为键名总归不合适，有点
建议：增加一个提交是获取编辑器内容的方法，chang有图片异步问题，还要替换md里图片代码

重新编辑，就是我要编辑我保存的文档
1.md源代码我保存了，但是图片因为机制没替换，这时候图片没了
按你的逻辑我推测应该要增加一个this.img_file，把保存的图片列表页赋值进去。然后关键是，还得把this.img_file插入的到编辑器里，你只有$vm.$refs.toolbar_left.$imgAddByFilename（这个是文件吧）
总之，重新编辑逻辑根本没有，你没法重新编辑内容

$vm.$refs.toolbar_left.$imgAddByFilename
这个怎么获取的
console.log(this.$refs.toolbar_left)=》undefined
console.log(this.$refs.mavonEditor.toolbar_left)=》undefined
得this.$refs.mavonEditor.$refs.toolbar_left.这个说明最好改改

建议：1.图片就直接把md源代码里的替换了（最好有可选项，因为我也可以不替换）
例如github的：![2](https://user-images.githubusercontent.com/5392211/28344083-fc72f416-6c53-11e7-89da-f88ca1cdb94a.jpg)
2.增加$vm.$refs.toolbar_left.$imgAddByFilename这个类似的url方法，可以插入URL、图片列表

我可能推测的不对，那应该说下这个编辑器是如何保存和重新编辑器的，目前我无法使用

你好，默认的z-index 1500 太大了，有办法能修改吗。我希望有属性能控制他。

很多时候不只是有编辑器的save方法来保存，用户可能还有其他表单来填写，最后通过一个按钮来进行提交，这就需要实时获取markdown内容和html内容，v-model只提供了markdown，其实可以v-model返回一个对象，包含markdown和html代码