关于在vue 中使用百度ueEditor编辑器的方法实例代码


Posted in Javascript onSeptember 14, 2018

1. 安装  npm i vue-ueditor --save-dev

2.从nodemodels  取出ueditor1_4_3_3 这整个目录,放入vue 的 static 目录 

3.配置 ueditor.config.js 的  21行代码  更改路径   var URL = '/static/ueditor1_4_3_3/' || getUEBasePath(); 

 (1)     serverUrl: URL + 'php/controller.php',  这里是你配置的上传内容的 url ;不需要可以删除;

 (2) 部分人使用时出现以下报错:

Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them...

这个问题是因为项目中的使用的babel默认添加了use strict造成,可参考 https://segmentfault.com/q/1010000007415253

我采用的是链接中答案的第三种方式:添加了babel-plugin-transform-remove-strict-mode,并在.babelrc里添加下列代码;

2-1.1   或者在webpack.base.conf.js 添加 

loaders: [{

test: /\.js$/,


exclude: /(node_modules|bower_components)/,


loader: 'babel',


query: {


presets: ['es2015']

}}]

4.如果不需要以组建的方式引入 则 可以这么写 ;

<VueUeditor ueditorPath="./../../static/ueditor/" @ready="editorReady"></VueUeditor>
<script>
 import VueUeditor from 'vue-ueditor';
 import ueditor from '../components/UE';
 export default {
  components: {VueUeditor,ueditor},
  data() {
   return {
    defaultMsg: '这里是UE测试',
    content1: '这里是UE',
    ue1: "ue1",
    config: {
     initialFrameWidth: 800,
     initialFrameHeight: 350
    }
   }
  },
  methods: {
    getUEContent() {
    // 获取ueditor值
      let content1 = UE.getEditor(this.ue1).getContentTxt();;
      console.log(content1)
  }, 
    editorReady(editorInstance){
      editorInstance.setContent("哈哈哈")
    }
  }
 };

5.如果要自定义组件的方式 在每个页面引入 则  在components 中新建ue.vue 文件 贴入这个代码

<template>
    <script :id=id type="text/plain"></script>
</template>
<script>
  export default {
    name: 'UE',
    data() {
      return {
        editor: null
      }
    },
    props: {
      content: {
        type: String,
        default:''
      },
      config: {
        type: Object,
      },
      id: {
        type: String
      }
    },
    mounted() {
      const _this = this;
      _this.editor = UE.getEditor(_this.id, _this.config); // 初始化UE
      _this.editor.addListener("ready", function () {
        _this.editor.setContent(_this.content); // 确保UE加载完成后,放入内容。
      });
    },
    methods: {
      getContent() { 
          // 获取内容方法
        return this.editor.getContentTxt();;
      }
    },
    destroyed() {
      this.editor.destroy();
    },
  }
</script>

然后就可以   import ueditor from '../components/UE';   //引入

<ueditor :content=content1 :config=config :id="ue1"></ueditor> //使用
<script>
 import VueUeditor from 'vue-ueditor';
 import ueditor from '../components/UE';
 export default {
  components: {VueUeditor,ueditor},
  data() {
   return {
    defaultMsg: '这里是UE测试',
    content1: '这里是UE',
    ue1: "ue1",
    config: {
     initialFrameWidth: 800,
     initialFrameHeight: 350
    }
   }
  },
  methods: {
     getUEContent() {
    // 获取ueditor值
      let content1 = UE.getEditor(this.ue1).getContentTxt();;
      console.log(content1)
    },
    editorReady(editorInstance){
       editorInstance.setContent("哈哈哈")
     }
  }
 };
</script>

这样就可以了。

附配置清单

1. 实例化编辑器到id为 container 的 dom 容器上:
   var ue = UE.getEditor('container');
2. 设置编辑器内容:
    ue.setContent('<p>hello!</p>');
3. 追加编辑器内容:
    ue.setContent('<p>new text</p>', true);
4. 获取编辑器html内容:
    var html = ue.getContent();
5. 获取纯文本内容:
    ue.getContentTxt();
6. 获取保留格式的文本内容:
    ue.getPlainTxt();
7. 判断编辑器是否有内容:
    ue.hasContents();
8. 让编辑器获得焦点:
    ue.focus();
9. 让编辑器失去焦点
    ue.blur();
10. 判断编辑器是否获得焦点:
    ue.isFocus();
11. 设置当前编辑区域不可编辑:
    ue.setDisabled();
12. 设置当前编辑区域可以编辑:
    ue.setEnabled();
13. 隐藏编辑器:
    ue.setHide();
14. 显示编辑器:
    ue.setShow();
15. 清空内容:
    ue.execCommand('cleardoc');
16. 读取草稿箱:
    ue.execCommand('drafts');
17. 清空草稿箱:
  ue.execCommand('clearlocaldata');

 本来需求是 从后台读取文件内容,内容是代码,返回到前台,高亮显示像 ide一样可以实时编辑代码,代码可以高亮,类似编辑器的主题一样,然后可以保存提交 到后台,找了半天没找到合适的插件;

总结

以上所述是小编给大家介绍的关于在vue 中使用百度ueEditor编辑器的方法实例代码 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 一个函数对同一元素的多个事件响应
Jul 25 Javascript
Js日期选择器并自动加入到输入框中示例代码
Aug 02 Javascript
原生javaScript做得动态表格(注释写的很清楚)
Dec 29 Javascript
Jquery实现侧边栏跟随滚动条固定(兼容IE6)
Apr 02 Javascript
jQuery中offsetParent()方法用法实例
Jan 19 Javascript
JS操作XML实例总结(加载与解析XML文件、字符串)
Dec 08 Javascript
探寻JavaScript中this指针指向
Apr 23 Javascript
JavaScript中的call和apply的用途以及区别
Jan 11 Javascript
基于vue2.0实现简单轮播图
Nov 27 Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 jQuery
async/await地狱该如何避免详解
May 10 Javascript
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 jQuery
react项目实践之webpack-dev-serve
Sep 14 #Javascript
javacript replace 正则取字符串中的值并替换【推荐】
Sep 13 #Javascript
vue删除html内容的标签样式实例
Sep 13 #Javascript
如何解决vue2.0下IE浏览器白屏问题
Sep 13 #Javascript
vue2.0获取鼠标位置的方法
Sep 13 #Javascript
vue实现动态列表点击各行换色的方法
Sep 13 #Javascript
更改BootStrap popover的默认样式及popover简单用法
Sep 13 #Javascript
You might like
php报表之jpgraph柱状图实例代码
2011/08/22 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
PHP实现的支付宝支付功能示例
2019/03/26 PHP
会自动逐行上升的文本框
2006/06/30 Javascript
javascript的onchange事件与jQuery的change()方法比较
2009/09/28 Javascript
基于jQuery实现最基本的淡入淡出效果实例
2015/02/02 Javascript
js漂浮广告实现代码
2015/08/15 Javascript
JavaScript中this详解
2015/09/01 Javascript
AngularJS 自定义指令详解及示例代码
2016/08/17 Javascript
浅谈js函数中的实例对象、类对象、局部变量(局部函数)
2016/11/20 Javascript
BootStrap栅格系统、表单样式与按钮样式源码解析
2017/01/20 Javascript
ES6新数据结构Set与WeakSet用法分析
2017/03/31 Javascript
在vue 中使用 less的教程详解
2018/09/26 Javascript
微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)
2019/05/10 Javascript
layui form表单提交之后重新加载数据表格的方法
2019/09/11 Javascript
基于layui框架响应式布局的一些使用详解
2019/09/16 Javascript
微信小程序实现通讯录列表展开收起
2020/11/18 Javascript
[08:54]《一刀刀一天》之DOTA全时刻18:十九支奔赴西雅图队伍全部出炉
2014/06/04 DOTA
[04:51]TI10典藏宝瓶Ⅱ外观视频展示
2020/08/15 DOTA
解决python写入mysql中datetime类型遇到的问题
2018/06/21 Python
详解Python发送email的三种方式
2018/10/18 Python
OpenCV图像颜色反转算法详解
2019/05/13 Python
Python 经典算法100及解析(小结)
2019/09/13 Python
基于keras 模型、结构、权重保存的实现
2020/01/24 Python
matplotlib jupyter notebook 图像可视化 plt show操作
2020/04/24 Python
keras分类模型中的输入数据与标签的维度实例
2020/07/03 Python
python中pivot()函数基础知识点
2021/01/03 Python
Priority Pass机场贵宾室会籍计划:全球超过1200间机场贵宾室
2018/08/26 全球购物
惠普香港官方商店:HP香港
2019/04/30 全球购物
优秀员工自荐书
2013/12/19 职场文书
电子商务助理求职自荐信
2014/04/10 职场文书
初中班主任评语大全
2014/04/24 职场文书
数学复习课教学反思
2016/02/18 职场文书
不同品牌、不同型号对讲机如何互相通联
2022/02/18 无线电
使用Java去实现超市会员管理系统
2022/03/18 Java/Android
《LOL》“克隆大作战”久违归来 幻灵战队皮肤上线
2022/04/03 其他游戏