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

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造成，可参考 nofollow" href="https://segmentfault.com/q/1010000007415253">https://segmentfault.com/q/1010000007415253 　　　　我采用的是链接中答案的第三种方式：添加了babel-plugin-transform-remove-strict-mode，并在.babelrc里添加下列代码；

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

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

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 文件贴入这个代码

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

//使用

import VueUeditor from 'vue-ueditor'; import ueditor from '../components/UE'; export default { components: {VueUeditor,methods: { getUEContent() { // 获取ueditor值 let content1 = UE.getEditor(this.ue1).getContentTxt();; console.log(content1) },editorReady(editorInstance){ editorInstance.setContent("哈哈哈") } } };

　　这样就可以了。

　　附配置清单

1. 实例化编辑器到id为 container 的 dom 容器上： var ue = UE.getEditor('container'); 2. 设置编辑器内容： ue.setContent('

hello!

'); 3. 追加编辑器内容： ue.setContent('

new text

',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编辑器的方法实例代码。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。

原文链接：https://www.f2er.com/vue/30216.html

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

总结

猜你在找的Vue相关文章