关于在vue 中使用百度ueEditor编辑器的方法实例代码
|
1. 安装 2.从nodemodels 取出ueditor1_4_3_3 这整个目录，放入vue 的 static 目录 3.配置 ueditor.config.js 的 21行代码 更改路径 (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造成，可参考 我采用的是链接中答案的第三种方式：添加了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 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编辑器的方法实例代码 。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |