美高梅开户-美高梅官方网站开户

您的位置:美高梅开户 > 美高梅官方网站开户 > 0中集成UEditor富文本编辑器的不二法门,js结合

0中集成UEditor富文本编辑器的不二法门,js结合

发布时间:2019-08-09 19:10编辑:美高梅官方网站开户浏览(123)

    首先父组件需要设置编辑器的长度、宽度、初始文本,这些数据可以通过props来传递。编辑器中的文本变化可以通过vue自定义事件向父组件传递。

    // 服务器统一请求接口路径
    , serverUrl: 'http://172.16.254.49:83/File/UEditor'  //地址管你们后端要去
    

    1.2 数据传输

    图片 1

    之所以使用import语法来引入核心JS库是因为这样更符合ES6模块化的规范,我看到网上有人建议在main.js中引入JS,但是过早地引入JS可能导致页面首次加载缓慢。

    简单地创建一个需要UEditor的页面,再该页面中使用刚才封装好的UE.vue组件:

    2.1 引入关键的JS以及CSS文件

    下载之后,把资源放到 /static/ue/ 静态目录下。文档结构如下:

    1. 总体思路

    在其他页面中使用该组件

    首先配置URL参数,我们需要将这个路径指向刚才拷贝的文件的更目录,注意这里最好使用相对路劲。

    在vue的'项目中遇到了需要使用富文本编辑器的需求,在github上看了很多vue封装的editor插件,很多对图片上传和视频上传的支持并不是很好,最终还是决定使用UEditor。

    我们需要在编辑器模板中import Ueditor核心JS库,并添加contentChange回调函数就大功告成了。

    您可能感兴趣的文章:

    • vue中使用ueditor富文本编辑器
    • VUE UEditor 单图片跨域上传功能的实现方法
    • vue引入ueditor及node后台配置详解
    • nodejs mongodb vue前后台配置ueditor的示例代码
    • vue中如何创建多个ueditor实例教程
    • vue2.0项目中使用Ueditor富文本编辑器示例代码
    • Vue.js结合Ueditor富文本编辑器的实例代码
    • 详解vue.js UEditor集成 [前后端分离项目]
    • vue项目中使用ueditor的实例讲解
    var URL = window.UEDITOR_HOME_URL || '/static/ueditor/';
    

    (我把UEditor放到了static静态目录下面,这里的文件不会被webpack打包,当然你也可以选择性地放进src中)

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

    效果如下:

    2. 具体实现步骤

    打开 /src/main.js 文件,插入下面的代码:

    将以下文件全部拷贝到项目中

    • value是编辑器的文字
    • config是编辑器的配置参数
    <template>
     <div ref="editor"></div>
    </template>
    
    <script>
     /* eslint-disable */
     import '../../../assets/js/ueditor/ueditor.config';
     import '../../../assets/js/ueditor/ueditor.all';
     import '../../../assets/js/ueditor/lang/zh-cn/zh-cn';
    
     import { generateRandonInteger } from '../../../vuex/utils';
    
     export default {
     data() {
      return {
      id: generateRandonInteger(100000)   'ueditorId',
      };
     },
     props: {
      value: {
      type: String,
      default: null,
      },
      config: {
      type: Object,
      default: {},
      }
     },
     watch: {
      value: function value(val, oldVal) {
      this.editor = UE.getEditor(this.id, this.config);
      if (val !== null) {
       this.editor.setContent(val);
      }
      },
     },
     mounted() {
      this.$nextTick(function f1() {
      // 保证 this.$el 已经插入文档
    
      this.$refs.editor.id = this.id;
      this.editor = UE.getEditor(this.id, this.config);
    
      this.editor.ready(function f2() {
       this.editor.setContent(this.value);
    
       this.editor.addListener("contentChange", function () {
       const wordCount = this.editor.getContentLength(true);
       const content = this.editor.getContent();
       const plainTxt = this.editor.getPlainTxt();
       this.$emit('input', { wordCount: wordCount, content: content, plainTxt: plainTxt });
       }.bind(this));
    
       this.$emit('ready', this.editor);
      }.bind(this));
      });
     },
     };
    </script>
    
    <style>
     body{
      background-color:#ff0000;
     }
    </style>
    

    我们打开 ueditor.config.js,修改其中的window.UEDITOR_HOME_UR配置,如下:

    vue的很大的一个优势在于模块化,我们可以通过模块化实现页面和逻辑的复用。所以可以把Ueditor重新封装成一个.vue的模板文件。其他组件通过引入这个模板实现代码复用。

    下载对应的UEditor源码

    1.1 模块化

    编辑 UEditor 编辑器 配置文件

    <template xmlns:v-on="http://www.w3.org/1999/xhtml">
     <div class="edit-area">
      <ueditor v-bind:value=defaultMsg v-bind:config=config v-on:input="input" v-on:ready="ready"></ueditor>
     </div>
    
    </template>
    
    <script>
     import ueditor from './ueditor.vue';
    
     export default {
     components: {
      ueditor,
     },
     data() {
      return {
      defaultMsg: '初始文本', 
      config: {
       initialFrameWidth: null,
       initialFrameHeight: 320,
      },
      };
     },
     };
    </script>
    
    window.UEDITOR_HOME_URL = "/static/UE/";   //指定编辑器资源文件根目录
    var URL = window.UEDITOR_HOME_URL || getUEBasePath();
    

    然后是默认宽度高度的设置

    配置完上述内容后,控制台可能会出现"后台配置项返回格式出错,上传功能将不能正常使用!"的报错,
    我们在编辑器中上传图片或者视频,也会出现响应的报错,这是因为没有配置服务器的请求接口,在ueditor.config.js中,对serverUrl进行配置:

    本文由美高梅开户发布于美高梅官方网站开户,转载请注明出处:0中集成UEditor富文本编辑器的不二法门,js结合

    关键词: 美高梅开户