peaktai / vue-html5-editor Goto Github PK

vue2 ssr 服务端渲染不支持？？？
VueHtml5Editor is not defined

两种安装方式都已经试过了！

[Vue warn]: Failed to resolve directive: el
(found in anonymous component - use the "name" option for better debugging messages.)

怎样submit

看了一下源码，设置行高的实现是给父div添加了行高样式，导致清除格式对于行高无法清除。
具体代码见：./src/range/handler.js line:235
parentBlock.style.lineHeight = arg

建议在清除格式实现添加把父div行高样式还原
parentBlock.style.lineHeight = ''

It will be good to be able to manipulate some style properties through :props.

Actually, i would like to change the current z-index value of .vue-html-5-editor and .tools.

有很多情况下，需要设置ajax request header，比如csrf-token之类的

系统：macOS Sierra 10.12.4

浏览器：Safari 10.1、Chrome 56.0.2924.87

下载回来的 Demo 没有问题，也不知道跟项目代码有什么冲突，页面假死，无法 debug.

I see enter is

你在watch里把$refs.content写成$res.content了，能及时更正吗？

when i try to assign some text in content, the console said that

" Error in callback for watcher "content": "

i try use "content.sync" before, but it dosen't work in Vue2.0

Is there any way to solve it?

图片上传成功，但报错，信息如下：
[Vue warn]: Property or method "progressComputable" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.
(found in )

options配置如下：
uploadHandler: function (responseText) {
// default accept json data like {ok:false,msg:'unexpected'} or {ok:true,data:'image url'}
var json = JSON.parse(responseText)
if (!json.result) {
alert(json)
} else {
return 'http://domain/file/' + json.result.fileid
}
}

Undo action in safari browser for macos opens last closed tab(cmd+z is safari hotkey)

我想在没有选中任何文字的情况下，改变font-size,发现报错。

用的是项目中给出的demo
demo

ps: 我这样做是想设置我之后要写的文字。

（今天传图出问题没法上图）按默认的配置出现的是点击字体选择图标，出来一个列表，有标题、字体、行高等的选择，这样使用起来比较麻烦，按照demo中字体、字体大小、排列方式、行高等都是单独的图标比较好，但是example里面没有看到具体配置？

另外使用中点击工具栏图标一直在报错：
Failed to resolve directive: ref

You may have an infinite update loop in a component render function

First, thanks for this awesome and fonctional plugin !

Second, i think it would be nice to add in the documentation the two way bindings.
I spend time searching for a solution, almost remove your plugin :/

:content.sync="content"

@PeakTai
Use vue init initialization project
vue init webpack test
replace default's App component

<template>
  <div id="app">
  <editor :content="content" :height="500"></editor>
  <div style="margin-top:40px">
    <div> The HTML contents are as follows:</div>
    <hr>
    <div >{{{content}}}</div>
  </div>
  </div>
</template>

<script>
import Hello from './components/Hello'
import editor from 'vue-html5-editor'

export default {
  components: {
    Hello,
    editor
  }
}
</script>

console

vue.common.js?1090:1019[Vue warn]: Attributes "content", ":height" are ignored on component because the component is a fragment instance: http://vuejs.org/guide/components.html#Fragment-Instance

请问支持vue2.0么？

能否增加插入视频功能？方便从视频网站分享视频

vue-html5-editor的0.5.1和1.0.2版本在有router的项目中，在ios10+的safari中选择编辑区域无法获取焦点，但是选择toobar上的任何一项操作后，焦点是可以拿到的。但在非router-view的项目中，这两个版本都是好的，无论在任何浏览器下。 查来查去，始终没找到根本问题，请问你这边能做个相关的测试么？这里可能有兼容性的问题。
BTW，目前我用的是vue 1.x版本.

组件增加属性auto-height来控制，默认为true

0.3.0版本已经支持

使用upDateData方法可以监听到内部数据变化，但是content的值没有发生改变

image.request.data and image.request.headers

虽然不是啥大问题，但是之前被那个链接误导了
https://www.npmjs.com/package/vue-html5-editor
项目地址指向您的了另一个 repo
https://github.com/PeakTai/vue-verify

I have been doing some digging but figured you would know better than what I have been able to find. How would I add a font-size option to the editor?

I'm using Metoer + VueJS. I do this install, then, without importing, I run the application I get errors:

meteor npm install --save vue-html5-editor

errors:

[ 'Component template should contain exactly one root element:\n\n<button type="button" @click="$parent.execCommand(\'justifyLeft\')" data-v-70456bc3>\n        {{$parent.locale["left justify"]}}\n    </button>\n    <button type="button" @click="$parent.execCommand(\'justifyCenter\')" data-v-70456bc3>\n        {{$parent.locale["center justify"]}}\n    </button>\n    <button type="button" @click="$parent.execCommand(\'justifyRight\')" data-v-70456bc3>\n        {{$parent.locale["right justify"]}}\n    </button>\n\nIf you are using v-if on multiple elements, use v-else-if to chain them instead.' ]
[ 'Component template should contain exactly one root element:\n\n<div data-v-816bf0be>\n        <label data-v-816bf0be>\n            <input type="radio" value="foreColor" v-model="command" data-v-816bf0be>&nbsp;\n            {{$parent.locale["fore color"]}}\n        </label>\n        <label data-v-816bf0be>\n            <input type="radio" value="backColor" v-model="command" data-v-816bf0be>&nbsp;\n            {{$parent.locale["background color"]}}\n        </label>\n    </div>\n    <div data-v-816bf0be>\n        <div v-for="color in colors" :style="{\'background-color\':color}" class="color-card" @click="changeColor(color)" data-v-816bf0be>\n        </div>\n        <div style="clear: both" data-v-816bf0be></div>\n    </div>\n\nIf you are using v-if on multiple elements, use v-else-if to chain them instead.' ]
[ '- invalid expression: \n            {{$parent.locale.["please wait"]}}...\n        ' ]
[ 'Component template should contain exactly one root element:\n\n<h3 style="text-align: center" data-v-6b9fc14a>Vue-html5-editor&nbsp;{{version}}</h3>\n    <p style="text-align: center" data-v-6b9fc14a>\n        GitHub:\n        <a href="https://github.com/PeakTai/vue-html5-editor" target="_blank" data-v-6b9fc14a>\n            https://github.com/PeakTai/vue-html5-editor\n        </a>\n    </p>\n\nIf you are using v-if on multiple elements, use v-else-if to chain them instead.' ]
[ 'Component template should contain exactly one root element:\n\n<button type="button" @click="$parent.execCommand(\'insertOrderedList\')" data-v-5bb5693a>\n        {{$parent.locale["ordered list"]}}\n    </button>\n    <button type="button" @click="$parent.execCommand(\'insertUnorderedList\')" data-v-5bb5693a>\n        {{$parent.locale["unordered list"]}}\n    </button>\n\nIf you are using v-if on multiple elements, use v-else-if to chain them instead.' ]
[ 'Component template should contain exactly one root element:\n\n<button type="button" @click="$parent.execCommand(\'bold\')" data-v-b51350ee>{{$parent.locale["bold"]}}</button>\n    <button type="button" @click="$parent.execCommand(\'italic\')" data-v-b51350ee>{{$parent.locale["italic"]}}</button>\n    <button type="button" @click="$parent.execCommand(\'underline\')" data-v-b51350ee>{{$parent.locale["underline"]}}</button>\n    <button type="button" @click="$parent.execCommand(\'strikeThrough\')" data-v-b51350ee>{{$parent.locale["strike through"]}}</button>\n    <button type="button" @click="$parent.execCommand(\'subscript\')" data-v-b51350ee>{{$parent.locale["subscript"]}}</button>\n    <button type="button" @click="$parent.execCommand(\'superscript\')" data-v-b51350ee>{{$parent.locale["superscript"]}}</button>\n\nIf you are using v-if on multiple elements, use v-else-if to chain them instead.' ]

Are you still maintaining and advancing this project?

UPDATE: I see it's only compatible with VueJS 1.0 -- I'm using 2.0 so that's probably the issue. Are you planning on updating the library for VueJS 2.0?

Cann't it select words and then format them in IE ??

而且有时候可以全部删除变成一个空的string，有时候缺删不掉。
例如：插入分割线后删除，可以全部删除，如果加粗或者倾斜文字后全部删除会变成
标签

如何绑定编辑器content数据？或者说我要如何获取编辑器输入的内容，以供我提交给后台？

Hello. How can I disable any of the built in modules? I don't need image module, so I would like to hide it.

When I use browserify and import vueHtml5Editor from 'vue-html5-editor';

I receive:
{ Error: Cannot find module '!!./../node_modules/css-loader/index.js!./../node_modules/vue-loader/lib/style-rewriter.js!./../node_modules/less-loader/index.js!./style.less' from '/Users/egen/Code/forum/node_modules/vue-html5-editor/dist'

因为开发中发现如果用户不选择任何样式进行输入,文字未被任何段落标签(span或者p)所包裹

切换显示生成的html源码，直接编辑源码。

测试过程：.pdf

Hello.
Can I somehow assign raw string to content or any other corresponding attribute?
<vue-html5-editor :content="This is content" ..></vue-html5-editor>
or
<vue-html5-editor :value="This is content" ..></vue-html5-editor>

The reason I have to do this is that I cannot bind javascript variable to :content attribute since I manipulate it in laravel blade template file.

标题编辑功能还是用的比较多，想增加该功能，尝试没有成功，麻烦指点一下，或者官方支持自然最好了

我遇到一种情况，就是当我不是要改变选中的文字，而是要改变光标之后的还没开始打的，想让他一次有多种效果，依次点击之后，打字，会发现它只拥有最后一次点击的那个选项的效果
举个例子，1.我不选中很多文字，只是改变光标之后（光标之后的文字还没有打出来）的，一次点击blod、italic、 underline等选项，最后会发现光标之后的文字打出来后只有underline的效果，而如果是选中一段文字然后依次点击则是能拥有所有效果
2.同上，点击一次underline后突然不想光标之后的拥有underline的效果，所以光标不变便立刻又点了一次，理想效果应该是没有underline效果，但是实际是有的，选中一堆文字的话是理想效果。

不知道我表达清楚没有，希望您能看到

mian.js

import VueHtml5Editor from 'vue-html5-editor'
Vue.use(VueHtml5Editor)

引用

<vue-html5-editor :content="dat.content" :height="300"></vue-html5-editor>

编辑器展示出来了。但是往里面填写内容后，获取不到数据，已有的数据也无法绑定到编辑器里面。

options中的配置服务器图片上传地址，能上传成功，但编辑器内图片却不显示。

希望新增图片上传裁剪功能。

I have a situation where I need to change the options array on a component. So that I can use different upload urls for different route across the app

Possible to initiate/register/install inside a Vue instance instead of a global component? Tried with no luck.
Thanks for the awesome work!!!

<script>
    Vue.component('field-html-editor', {
        template: '' +
        '<vue-html5-editor' +
        '   :content="value"' +
        '   :height="height">' +
        '</vue-html5-editor>',
        components: {
            "vue-html5-editor": require('vue-html5-editor')
        },
        props: {
            model: {
                type: Object,
                required: true,
                default: function () {
                    return {
                        value: null,
                        height:500
                    }
                }
            }
        },
        data: function () {
            return {
                value: "<h3>vue html5 editor</h3>",
                height: 500,
            }
        }
    });
</script>

自定义组件，无法正常显示

�由于transform会影响到display:fixed，实际开发中，如果编辑器父级元素中如果使用了transform会导致全屏出错。

解决思路：全屏时，调用把编辑器添加到body下，取消全屏时再放回来。

master.js:828 [Vue warn]: Failed to resolve directive: el
(found in anonymous component - use the "name" option for better debugging messages.)

1. 文宇大小。。这是打错字了吧
2. 按照默认配置，发现H1-H6的标题和文字大小功能无效

• [Vue warn]: Do not use built-in or reserved HTML elements as component id: text
• [Vue warn]: Do not use built-in or reserved HTML elements as component id: font
• [Vue warn]: Do not use built-in or reserved HTML elements as component id: link
• [Vue warn]: Do not use built-in or reserved HTML elements as component id: image