元气智驾官网后台前端页面
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

235 lines
7.8 KiB

  1. <template>
  2. <div>
  3. <VueUeditorWrap
  4. class="ueditor"
  5. @beforeInit="addCustomButtom"
  6. :id="setSessionid()"
  7. @ready="readyCustom"
  8. v-model="content"
  9. :config="config"
  10. ></VueUeditorWrap>
  11. <el-dialog v-if="uploadDiolagVisible" :visible.sync="uploadDiolagVisible" append-to-body title="图片上传">
  12. <el-form>
  13. <el-form-item label="上传图片">
  14. <uploadFile :url.sync="imgUrl" :imgWidth.sync="imgWidth" type="image" width="auto" height="auto" />
  15. </el-form-item>
  16. <el-form-item>
  17. <el-button type="primary" @click="saveImg()">保存</el-button>
  18. </el-form-item>
  19. </el-form>
  20. </el-dialog>
  21. </div>
  22. </template>
  23. <script>
  24. import VueUeditorWrap from 'vue-ueditor-wrap'
  25. import uploadFile from '@/components/uploadFile'
  26. export default {
  27. components: {
  28. VueUeditorWrap,
  29. uploadFile
  30. },
  31. props: {
  32. btnShow: {
  33. type: Boolean,
  34. default: false
  35. },
  36. comeContent: {
  37. type: String,
  38. default: ''
  39. },
  40. zIndex: {
  41. type: Number,
  42. default: 999
  43. },
  44. isDisabled: {
  45. type: Number,
  46. default: 0
  47. }
  48. },
  49. data() {
  50. return {
  51. content: '',
  52. editor: null,
  53. config: {
  54. toolbars: [
  55. [
  56. 'source', // 源代码
  57. 'undo', // 撤销
  58. 'redo', // 重做
  59. 'bold', // 加粗
  60. 'indent', // 首行缩进
  61. // 'snapscreen', //截 图
  62. 'italic', // 斜体
  63. 'underline', // 下划线
  64. 'strikethrough', // 删除线
  65. 'subscript', // 下标
  66. 'fontborder', // 字符边框
  67. 'superscript', // 上标
  68. 'formatmatch', // 格式刷
  69. 'blockquote', // 引用
  70. // 'pasteplain', // 纯文本粘贴模式
  71. 'selectall', // 全选
  72. // 'preview', // 预览
  73. 'horizontal', // 分隔线
  74. 'removeformat', // 清除格式
  75. // 'time', // 时间
  76. // 'date', // 日期
  77. 'unlink', // 取消链接
  78. /* 'insertrow', // 前插入行
  79. 'insertcol', // 前插入列
  80. 'mergeright', // 右合并单元格
  81. 'mergedown', // 下合并单元格
  82. 'deleterow', // 删除行
  83. 'deletecol', // 删除列
  84. 'splittorows', // 拆分成行
  85. 'splittocols', // 拆分成列
  86. 'splittocells', // 完全拆分单元格
  87. 'deletecaption', // 删除表格标题
  88. 'inserttitle', // 插入标题
  89. 'mergecells', // 合并多个单元格
  90. 'deletetable', // 删除表格
  91. 'cleardoc', // 清空文档
  92. 'insertparagraphbeforetable', //" 表格前插入行"
  93. 'insertcode', // 代码语言 */
  94. 'fontfamily', // 字体
  95. 'fontsize', // 字号
  96. 'paragraph', // 段落格式
  97. // 'edittable', // 表格属性
  98. // 'edittd', // 单元格属性
  99. 'link', // 超链接
  100. // 'emotion', // 表情
  101. 'spechars', // 特殊字符
  102. // 'searchreplace', // 查询替换
  103. 'justifyleft', // 居左对齐
  104. 'justifyright', // 居右对齐
  105. 'justifycenter', // 居中对齐
  106. 'justifyjustify', // 两端对齐
  107. 'forecolor', // 字体颜色
  108. 'backcolor', // 背景色
  109. 'lineheight' // 行间距
  110. /* 'insertorderedlist', // 有序列表
  111. 'insertunorderedlist', // 无序列表
  112. 'directionalityltr', // 从左向右输入
  113. 'directionalityrtl', // 从右向左输入
  114. 'rowspacingtop', // 段前距
  115. 'rowspacingbottom', // 段后距
  116. 'pagebreak', // 分页
  117. 'imagenone', // 默认
  118. 'imageleft', // 左浮动
  119. 'imageright', // 右浮动
  120. 'imagecenter', // 居中
  121. 'wordimage', // 图片转存
  122. 'edittip ', // 编辑提示
  123. 'customstyle', // 自定义标题
  124. 'touppercase', // 字母大写
  125. 'tolowercase', // 字母小写
  126. 'inserttable' // 插入表格 */
  127. ]
  128. ],
  129. zIndex: this.zIndex,
  130. autoHeightEnabled: false, // 编译器不自动被内容撑高
  131. autoFloatEnabled: false,
  132. initialFrameHeight: 300, // 初始容器高度
  133. initialFrameWith: '100%',
  134. postParams: this.postParams,
  135. // serverUrl: process.env.baseUrl + '/product/uploadFiles', // 上传文件地址
  136. UEDITOR_HOME_URL: 'https://admin.meta-autotv.com/ueditor/' // UEditor资源文件的存放路径
  137. },
  138. imgUrl: '',
  139. uploadDiolagVisible: false,
  140. imgWidth: 0
  141. }
  142. },
  143. watch: {
  144. content(val) {
  145. this.$emit('editorChange', val)
  146. },
  147. comeContent: {
  148. handler(newVal, oldVal) {
  149. this.content = newVal
  150. },
  151. immediate: true,
  152. deep: true
  153. }
  154. },
  155. mounted() {
  156. },
  157. methods: {
  158. readyCustom(editor) {
  159. this.editor = editor
  160. console.log(this.isDisabled)
  161. if (this.isDisabled) this.editor.options.readonly = true
  162. },
  163. saveImg() {
  164. let imageHtml = '<p><img src=\"' + this.imgUrl + '\"/></p>'
  165. if (this.imgWidth > 800) {
  166. imageHtml = '<p><img width="100%" src=\"' + this.imgUrl + '\"/></p>'
  167. }
  168. this.editor.execCommand('inserthtml', imageHtml)
  169. this.uploadDiolagVisible = false
  170. },
  171. addCustomButtom(editorId) {
  172. let _this = this
  173. window.UE.registerUI('test-button', function(editor, uiName) {
  174. // 注册按钮执行时的 command 命令,使用命令默认就会带有回退操作
  175. editor.registerCommand(uiName, {
  176. execCommand: () => {
  177. _this.imgUrl = ''
  178. _this.uploadDiolagVisible = true
  179. _this.editor = editor
  180. }
  181. })
  182. // 创建一个 button
  183. var btn = new window.UE.ui.Button({
  184. // 按钮的名字
  185. name: uiName,
  186. // 提示
  187. title: '图片上传',
  188. // 需要添加的额外样式,可指定 icon 图标,图标路径参考常见问题 2
  189. cssRules: 'background-position: -380px 0;',
  190. // 点击时执行的命令
  191. onclick: function() {
  192. // 这里可以不用执行命令,做你自己的操作也可
  193. editor.execCommand(uiName)
  194. }
  195. })
  196. // 当点到编辑内容上时,按钮要做的状态反射
  197. editor.addListener('selectionchange', function() {
  198. var state = editor.queryCommandState(uiName)
  199. if (state === -1) {
  200. btn.setDisabled(true)
  201. btn.setChecked(false)
  202. } else {
  203. btn.setDisabled(false)
  204. btn.setChecked(state)
  205. }
  206. })
  207. // 因为你是添加 button,所以需要返回这个 button
  208. return btn
  209. } /* 指定这个 UI 是哪个编辑器实例上的,默认是页面上所有的编辑器都会添加这个按钮 */)
  210. },
  211. setSessionid(num) {
  212. var len = num || 32
  213. var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'
  214. var maxPos = chars.length
  215. var pwd = ''
  216. for (var i = 0; i < len; i++) {
  217. pwd += chars.charAt(Math.floor(Math.random() * maxPos))
  218. }
  219. return pwd
  220. }
  221. }
  222. }
  223. </script>
  224. <style lang="scss" scoped>
  225. ::v-deep.ueditor{
  226. .edui-editor{
  227. width: 100% !important;
  228. }
  229. }
  230. </style>