caiya / vue-neditor-wrap Goto Github PK

基于vue和neditor的双向绑定组件，使用vue-cli3的项目可以直接使用

JavaScript 10.66% Vue 89.34%

vue ueditor neditor vue-cli3 editor vue-editor vue-neditor vue-ueditor

vue-neditor-wrap's Introduction

vue-neditor-wrap

Installation

$ npm i vue-neditor-wrap

Quick Start

下载官方资源文件

下载完成后放在本地public下，命名为NEditor的文件夹下
引入VueNeditorWrap组件

import VueNeditorWrap from 'vue-neditor-wrap'
注册组件
```
components: {
    VueNeditorWrap
},
```

v-model绑定数据

<vue-neditor-wrap v-model="content" :config="myConfig" :destroy="false" @ready="ready"></vue-neditor-wrap>

data () {
    return {
        myConfig: {
            // 如果需要上传功能,找后端小伙伴要服务器接口地址
            serverUrl: '/api/web/upload/ueditor',
            // 你的UEditor资源存放的路径,相对于打包后的index.html
            UEDITOR_HOME_URL: '/NEditor/',
            // 编辑器不自动被内容撑高
            autoHeightEnabled: false,
            // 初始容器高度
            initialFrameHeight: 240,
            // 初始容器宽度
            initialFrameWidth: '100%',
            // 关闭自动保存
            enableAutoSave: false
        },
        content: '',
    }
}

至此你已经可以在页面中看到一个初始化之后的NEditor了，并且它已经成功和数据绑定了！

License

MIT

vue-neditor-wrap's People

Contributors

Stargazers

Watchers

vue-neditor-wrap's Issues

打包后项目不在根目录下，资源引入失败

打包后项目不在根目录下，资源引入失败，
例如项目放在/web文件夹下，
查找资源路径/NEditor/neditor.parse.min.js，
而资源实际路径/web/NEditor/neditor.parse.min.js，
有没有好的办法解决这个问题

官方资源网站下不了了。被替换成了一个奇怪的网站

麻烦看看

是前后分离的吗？分离图片上传不好用

是前后分离的吗？分离图片上传不好用。复制的单图可以进去，但是多图上传不成功。需要返回的json是什么啊

加载缓慢

你好，vue-neditor-wrap 组件加载缓慢怎么解决？第一次进来编辑的时候文本框中无内容，需要退出去再进来才能显示

涂鸦上传不了，缺少jquery

vue2.0怎么使用错误

vue2.0放到静态资源之后报错没有配置上去应该是暴露方式问题

vuex中初始化的值为上次neditor的值

vuex中初始化的值为上次neditor的值。
neditor初始化后会先触发watch事件，将新的值写入富文本框，后触发ready事件，而ready事件获取的值为初始化时携带的旧值。

同时，npm的代码还是旧版本的，没法抓取最新的代码

通过v-model绑定表单属性，当表单属性变更保存后。下次打开新的表单，neditor绑定的值，还是上次的值，无法刷新！！！

请问，这个怎么才能刷新最新的form的值呢？求解。。谢谢

富文本切换字号大小，显示none。

v-model 有问题，导致出现空内容的情况

// v-model语法糖实现
  watch: {
    value: {
      handler(value) {
        
          this.editor ? this._setContent(value) : this._beforeInitEditor(value);
        
      },
      immediate: true
    }
  }

bug 修复代码

  // v-model语法糖实现
  watch: {
    value(value){
      this.editor ? this._setContent(value) : this._beforeInitEditor(value);
    }
  }

整个静态资源都要引入？10多M，太大了，有别的办法吗

下载官方资源文件的链接无效

https://www.notadd.com/download/neditor/Neditor-next-master.tar.xz被t替换成了这个链接

emotion.js CDN 更新下呗

如何在ready事件中获取vue对象

TypeError: Cannot read property 'style' of null

npm的代码没有与git同步，需要同步一下npm

我想知道自定义工具栏为什么不起作用

如题，在事件中你暴露了一个接口，我在里面调用了window.UE.registerUI进行注册，但是很困惑的是没有显示出来。

addCustomButtom(editorId) {
      window.UE.registerUI('button', (editor, uiName) => {
        // 注册按钮执行时的command命令，使用命令默认就会带有回退操作
        editor.registerCommand(uiName, {
          execCommand() {
            alert(`execCommand:${uiName}`);
          },
        });
        // 创建一个button
        const btn = new window.UE.ui.Button({
        // 按钮的名字
          name: uiName,
          // 提示
          title: '这是一段提示信息',
          // 添加额外样式，指定icon图标，这里默认使用一个重复的icon
          cssRules: 'background-position: -500px 0;',
          // 点击时执行的命令
          onclick() {
            // 这里可以不用执行命令,做你自己的操作也可
            editor.execCommand(uiName);
          },
        });
        // 当点到编辑内容上时，按钮要做的状态反射
        editor.addListener('selectionchange', () => {
          const state = editor.queryCommandState(uiName);
          if (state == -1) {
            btn.setDisabled(true);
            btn.setChecked(false);
          } else {
            btn.setDisabled(false);
            btn.setChecked(state);
          }
        });
        // 因为你是添加button,所以需要返回这个button
        return btn;
      }, 0, editorId);