关于在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-Mozilla和IE中的一个函数直接量的问题分析
Aug 12 Javascript
js函数般调用正则
Apr 08 Javascript
JavaScript 封装Ajax传递的数据代码
Jun 05 Javascript
使用JS实现图片轮播的实例(前后首尾相接)
Sep 21 Javascript
微信小程序实现时间预约功能
Nov 27 Javascript
vue父组件触发事件改变子组件的值的方法实例详解
May 07 Javascript
原生js实现贪食蛇小游戏的思路详解
Nov 26 Javascript
详解Vue的watch中的immediate与watch是什么意思
Dec 30 Javascript
十分钟教你上手ES2020新特性
Feb 12 Javascript
vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果
May 28 Javascript
JavaScript React如何修改默认端口号方法详解
Jul 28 Javascript
Vue实现简单计算器
Jan 20 Vue.js
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实现文件上传二法
2006/10/09 PHP
PHP中捕获超时事件的方法实例
2015/02/12 PHP
js使用正则实现ReplaceAll全部替换的方法
2014/08/22 Javascript
JavaScript检测弹出窗口是否已经关闭的方法
2015/03/24 Javascript
理解JS事件循环
2016/01/07 Javascript
Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案
2016/09/15 Javascript
jQuery中值得注意的trigger方法浅析
2016/12/12 Javascript
jquery表单插件form使用方法详解
2017/01/20 Javascript
JS实现向iframe中表单传值的方法
2017/03/24 Javascript
NodeJS创建最简单的HTTP服务器
2017/05/15 NodeJs
用纯Node.JS弹出Windows系统消息提示框实例(MessageBox)
2017/05/17 Javascript
vue组件与复用详解
2018/04/08 Javascript
vue使用监听实现全选反选功能
2018/07/06 Javascript
详解vue+webpack+express中间件接口使用
2018/07/17 Javascript
vue实现防抖的实例代码
2021/01/11 Vue.js
浅谈python新手中常见的疑惑及解答
2016/06/14 Python
python自带的http模块详解
2016/11/06 Python
python PyTorch参数初始化和Finetune
2018/02/11 Python
python 地图经纬度转换、纠偏的实例代码
2018/08/06 Python
简单分析python的类变量、实例变量
2019/08/23 Python
Python操作SQLite/MySQL/LMDB数据库的方法
2019/11/07 Python
Pytorch基本变量类型FloatTensor与Variable用法
2020/01/08 Python
python3正则模块re的使用方法详解
2020/02/11 Python
Python 将代码转换为可执行文件脱离python环境运行(步骤详解)
2021/01/25 Python
澳大利亚领先的睡衣品牌:Peter Alexander
2016/08/16 全球购物
会计学应届毕业生推荐信
2013/11/04 职场文书
党组织公开承诺书
2014/03/29 职场文书
2014年入党积极分子党课学习心得体会模板
2014/04/03 职场文书
教育基金募捐倡议书
2014/05/14 职场文书
管理岗位竞聘演讲稿
2014/08/18 职场文书
企业三严三实学习心得体会
2014/10/13 职场文书
史上最牛的辞职信
2015/02/28 职场文书
运动会1000米加油稿
2015/07/21 职场文书
承诺书的内容有哪些,怎么写?
2019/06/21 职场文书
python 破解加密zip文件的密码
2021/04/22 Python
Python selenium绕过webdriver监测执行javascript
2022/04/12 Python