ocpview-plus 0.0.1

package/src/components/richtextbox/editor.vue

@@ -0,0 +1,150 @@
+<template>
+  <div>
+    <QuillEditor ref="myQuillEditor"
+      theme="snow"
+      class="quill-editor customEditor"
+      v-model:content="content"
+      :options="data.editorOption"
+      contentType="html"
+      @update:content="setValue()"
+    />
+  </div>
+</template>
+
+<script setup>
+import { QuillEditor,Quill } from '@vueup/vue-quill'
+import { reactive, onMounted, ref, toRaw, watch,computed  } from 'vue'
+// import { backsite } from '@/api'
+const sizes =[false, '42px', '36px', '26px', '24px', '22px', '18px', '16px','15px', '14px', '12px', '10.5px', '9px', '7.5px','6.5px', '5.5px','5px']
+let fontSizeStyle = Quill.import("attributors/style/size");
+fontSizeStyle.whitelist = sizes;
+Quill.register(fontSizeStyle, true);
+const fonts = [false,'SimSun','KaiTi','FangSong','SimHei','Microsoft-YaHei','PmingLiu','Impact','Georgia','Tahoma','Arial','Verdana']
+var Font = Quill.import("formats/font");
+Font.whitelist = fonts; // 将字体加入到白名单
+Quill.register(Font, true);
+const Embed = Quill.import("blots/embed");
+class DividerBlot extends Embed  {
+    static create(value) {
+      let node = super.create();
+      node.innerHTML = value.text
+      node.setAttribute('contenteditable', false);
+      node.setAttribute('class', 'at-some-one');
+      return node;
+    }
+    static value(node) {
+      return {
+        text: node.innerHTML.trim()
+      };
+    }
+ }
+DividerBlot.blotName = 'atusertag';
+DividerBlot.tagName = 'span';
+DividerBlot.className = 'user-at-span';
+Quill.register(DividerBlot);
+
+const titleConfig = [
+                {Choice:'.ql-bold', title:'加粗'},
+                {Choice:'.ql-italic', title:'斜体'},
+                {Choice:'.ql-underline', title:'下划线'},
+                {Choice:'.ql-header', title:'段落格式'},
+                {Choice:'.ql-strike', title:'删除线'},
+                {Choice:'.ql-blockquote', title:'块引用'},
+                {Choice:'.ql-code', title:'插入代码'},
+                {Choice:'.ql-code-block', title:'插入代码段'},
+                // {Choice:'.ql-font', title:'字体'},
+                // {Choice:'.ql-size', title:'字体大小'},
+                {Choice:'.ql-list[value="ordered"]', title:'编号列表'},
+                {Choice:'.ql-list[value="bullet"]', title:'项目列表'},
+                {Choice:'.ql-direction', title:'文本方向'},
+                {Choice:'.ql-header[value="1"]', title:'h1'},
+                {Choice:'.ql-header[value="2"]', title:'h2'},
+                {Choice:'.ql-align', title:'对齐方式'},
+                {Choice:'.ql-color', title:'字体颜色'},
+                {Choice:'.ql-background', title:'背景颜色'},
+                {Choice:'.ql-image', title:'图像'},
+                {Choice:'.ql-video', title:'视频'},
+                {Choice:'.ql-link', title:'添加链接'},
+                {Choice:'.ql-formula', title:'插入公式'},
+                {Choice:'.ql-clean', title:'清除字体格式'},
+                {Choice:'.ql-script[value="sub"]', title:'下标'},
+                {Choice:'.ql-script[value="super"]', title:'上标'},
+                {Choice:'.ql-indent[value="-1"]', title:'向左缩进'},
+                {Choice:'.ql-indent[value="+1"]', title:'向右缩进'},
+                {Choice:'.ql-header .ql-picker-label', title:'标题大小'},
+                {Choice:'.ql-header .ql-picker-item[data-value="1"]', title:'标题一'},
+                {Choice:'.ql-header .ql-picker-item[data-value="2"]', title:'标题二'},
+                {Choice:'.ql-header .ql-picker-item[data-value="3"]', title:'标题三'},
+                {Choice:'.ql-header .ql-picker-item[data-value="4"]', title:'标题四'},
+                {Choice:'.ql-header .ql-picker-item[data-value="5"]', title:'标题五'},
+                {Choice:'.ql-header .ql-picker-item[data-value="6"]', title:'标题六'},
+                {Choice:'.ql-header .ql-picker-item:last-child', title:'标准'},
+                //{Choice:'.ql-size .ql-picker-item[data-value="small"]', title:'小号'},
+                //{Choice:'.ql-size .ql-picker-item[data-value="large"]', title:'大号'},
+                //{Choice:'.ql-size .ql-picker-item[data-value="huge"]', title:'超大号'},
+                //{Choice:'.ql-size .ql-picker-item:nth-child(2)', title:'标准'},
+                {Choice:'.ql-align .ql-picker-item:first-child', title:'居左对齐'},
+                {Choice:'.ql-align .ql-picker-item[data-value="center"]', title:'居中对齐'},
+                {Choice:'.ql-align .ql-picker-item[data-value="right"]', title:'居右对齐'},
+                {Choice:'.ql-align .ql-picker-item[data-value="justify"]', title:'两端对齐'}
+            ]
+
+const props = defineProps(['value','myConfig','toolbarOptions'])
+const emit = defineEmits(['updateValue','imgClick','initQuill'])
+const content = ref('')
+const myQuillEditor = ref()
+watch(() => props.value, (val) => {
+    console.log(toRaw(myQuillEditor.value))
+    const text = toRaw(myQuillEditor.value).getHTML()
+    if (text !== val) {
+        toRaw(myQuillEditor.value).setHTML(val)
+    }
+   })
+const toolbarOptions = computed(() => {
+  return props.toolbarOptions;
+});
+
+
+const fileBtn = ref()
+const data = reactive({
+  content: '',
+  editorOption: {
+    modules: {
+      toolbar: toolbarOptions
+    },
+    placeholder: '请输入内容...'
+  }
+})
+
+const imgHandler = (state) => {
+  if (state) {
+    emit('imgClick', state)
+  }
+}
+const setValue = () => {
+  const text = toRaw(myQuillEditor.value).getHTML()
+  emit('updateValue', text)
+}
+
+onMounted(() => {
+  {
+    if (document.getElementsByClassName('ql-editor') && document.getElementsByClassName('ql-editor').length > 0) {
+        document.getElementsByClassName('ql-editor')[0].dataset.placeholder = '';
+        for (let item of titleConfig) {
+            let tip = document.querySelector('.quill-editor ' + item.Choice);
+            if (!tip) continue;
+            tip.setAttribute('title', item.title);
+        }
+    }
+  }
+  const quill = toRaw(myQuillEditor.value).getQuill()
+  if (myQuillEditor.value) {
+    quill.getModule('toolbar').addHandler('image', imgHandler)
+  }
+  toRaw(myQuillEditor.value).setHTML(props.value)
+  let obj = {};
+  obj.quill = quill;
+  emit('initQuill',obj);
+})
+</script>
+

package/src/components/richtextbox/index.js

@@ -0,0 +1,2 @@
+import RichTextBox from './richtextbox.vue';
+export default RichTextBox;

package/src/components/richtextbox/richtextbox.vue

@@ -0,0 +1,448 @@
+<template>
+  <div  v-show="myConfig.visible" @keydown.enter.stop="keyDown" @blue="onEditorBlur">
+    <!-- 图片上传组件辅助-->
+    <UploadBox v-show="false" id="iviewUp"  ref="uploadbox"  class="avatar-uploader" :config="myConfig"  @success="handleSuccess" :headers="headers"/>
+    <Editor ref="myQuillEditor" :style="myConfig.editorStyle" :myConfig="myConfig" :toolbarOptions="myConfig.toolbarOptions" :value="value"  @updateValue="onEditorChange" @imgClick="imgClick" @initQuill="initQuill" />
+  </div>
+</template>
+<script>
+// 工具栏配置
+import Base from '@/components/base/controlbase.vue';
+import UploadBox from '@/components/picturebox/uploadbox.vue'
+import { Quill } from '@vueup/vue-quill'
+import Editor from './editor.vue';
+export default {
+    name: 'richtextbox',
+    components:{
+        UploadBox,Editor
+    },
+    extends: Base,
+    data () {
+        return {
+            myConfig:{
+                fileType:['jpg','jpeg','png','gif'],
+                fileSize: 2,
+                multiSelect:true,
+                editorStyle:{
+                    'height':'auto'
+                },
+                simpleFlag:false,
+                showImage:true,
+                uploadfile:'',
+                toolbarOptions:[
+                    ['bold', 'italic', 'underline', 'strike'],
+                    [{ 'header': 1 }, { 'header': 2 }],
+                    [{ list:'ordered' }, { list:'bullet' }],
+                    [{ script:'sub' }, { script:'super' }],
+                    [{ 'indent': '-1' }, { 'indent': '+1' }],
+                    [{ 'color': [] }, { 'background': [] }],
+                    [{ 'size': [false, '42px', '36px', '26px', '24px', '22px', '18px', '16px','15px', '14px', '12px', '10.5px', '9px', '7.5px','6.5px', '5.5px','5px'] }],
+                    [{ 'font': [false,'SimSun','KaiTi','FangSong','SimHei','Microsoft-YaHei','PmingLiu','Impact','Georgia','Tahoma','Arial','Verdana'] }],
+                    [{ header:[1, 2, 3, 4, 5, 6, false] }],
+                    [{ 'align': [] }],
+                    ["clean"]
+                ],
+              },
+          
+            quillUpdateImg:false, // 根据图片上传状态来确定是否显示loading动画，刚开始是false,不显示
+            headers:{
+                'billmoduleid':'img',
+                'billno':'img'
+                // token: sessionStorage.token
+            }, // 有的图片服务器要求请求头需要有token
+        };
+    },
+
+    mounted () {
+        //eslint-disable-next-line no-labels
+        this.onEditorFocus();
+    },
+    methods:{
+        customInit () {
+            if (!this.myConfig.simpleFlag) {
+                if (!this.myConfig.uploadfile) {
+                    this.myConfig.uploadfile = this.OmdUrl.uploadfile;
+                }
+            }
+            if (this.myConfig.showImage) {
+              this.myConfig.toolbarOptions.push(['link', 'image'])
+            }
+        },
+        onEditorBlur () {
+        // 失去焦点事件
+            this.onEditorChange(this.quill.getHTML());
+        },
+        onEditorFocus (e) {
+            if (this.myConfig.readOnly) {
+                this.quill.enable(false);
+            } else {
+                this.quill.enable(true);
+            }
+        // 获得焦点事件
+        },
+        onEditorChange (value) {
+            this.value = value;
+        // 内容改变事件
+            this.setFatherValue();
+            //this.$emit('inputValue', this.content);
+        },
+   
+        // 富文本图片上传前
+        beforeUpload () {
+        // 显示loading动画
+            this.quillUpdateImg = true;
+        },
+        imgClick(value) {
+            if (value) {
+                if (!this.myConfig.readOnly) {
+                    document.querySelector('#iviewUp input').click();
+                }
+            } else {
+                this.quill.format('image', false);
+            }
+        },
+        handleSuccess (res) {
+        // res为图片服务器返回的数据
+        // 获取富文本组件实例
+            let quill = this.quill;
+            // 如果上传成功
+            if (res.returncode === '0') {
+                // 获取光标所在位置
+                let length = quill.getSelection().index;
+                // 插入图片  res.url为服务器返回的图片地址
+                let url = '';
+                if (res.data[0].url) {
+                    url = res.url;
+                } else {
+                    if (res.data[0].fileKey) {
+                        res.data[0].filekey = res.data[0].fileKey;
+                    }
+                    url = this.OmdUrl.downfile + res.data[0].filekey;
+                }
+                quill.insertEmbed(length, 'image', url);
+                // 调整光标到最后
+                quill.setSelection(length + 1);
+            } else {
+                this.$message.error('图片插入失败');
+            }
+            // loading动画消失
+            this.quillUpdateImg = false;
+        },
+        // 富文本图片上传失败
+        uploadError () {
+        // loading动画消失
+            this.quillUpdateImg = false;
+            this.$message.error('图片插入失败');
+        },
+        addQuillTitle () {
+            // eslint-disable-next-line one-var
+            const oToolBar = document.querySelector('.ql-toolbar'),
+                aButton = oToolBar.querySelectorAll('button'),
+                aSelect = oToolBar.querySelectorAll('select');
+            aButton.forEach(function (item) {
+                if (item.className === 'ql-script') {
+                    item.value === 'sub' ? (item.title = '下标') : (item.title = '上标');
+                } else if (item.className === 'ql-indent') {
+                    item.value === '+1'
+                        ? (item.title = '向右缩进')
+                        : (item.title = '向左缩进');
+                } else {
+                    // eslint-disable-next-line no-undef
+                    item.title = titleConfig[item.classList[0]];
+                }
+            });
+            aSelect.forEach(function (item) {
+                // eslint-disable-next-line no-undef
+                item.parentNode.title = titleConfig[item.classList[0]];
+            });
+        },
+        keyDown (e) {
+            //e.stopPropagation();
+        },
+        initQuill(obj) {
+            this.quill = obj.quill;
+        },
+        setDynamicText(value) {
+          let quill = this.quill;
+          let range = quill.getSelection(true);
+          quill.insertEmbed(range.index, 'atusertag', {text:value}, Quill.sources.USER);
+          quill.setSelection(range.index + 1, Quill.sources.SILENT);
+          //quill.focus();
+          //quill.update();
+        },
+        setCustomPro(obj) {
+            if (obj) {
+                this.myConfig = Object.assign({}, this.myConfig, obj);
+            }
+            if (obj.readOnly !== undefined) {
+                this.onEditorFocus();
+            }   
+        }
+    }
+};
+</script>
+
+<style>
+  .customEditor {
+    line-height: normal !important;
+  }
+  .ql-snow .ql-tooltip[data-mode=link]::before {
+    content: "请输入链接地址:";
+  }
+  .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
+    border-right: 0px;
+    content: '保存';
+    padding-right: 0px;
+  }
+
+  .ql-snow .ql-tooltip[data-mode=video]::before {
+    content: "请输入视频地址:";
+  }
+
+.ql-snow .ql-picker.ql-size .ql-picker-label::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item::before {
+  content: "四号";
+  font-size: 14px;
+}
+
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before {
+  content: "四号";
+  font-size: 14px;
+}
+
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="42px"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="42px"]::before {
+  content: "初号";
+  font-size: 42px;
+}
+
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="36px"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="36px"]::before {
+  content: "小初";
+  font-size: 36px;
+}
+
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="26px"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="26px"]::before {
+  content: "一号";
+  font-size: 26px;
+}
+
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24px"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24px"]::before {
+  content: "小一";
+  font-size: 24px;
+}
+
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="22px"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="22px"]::before {
+  content: "二号";
+  font-size: 22px;
+}
+
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before {
+  content: "小二";
+  font-size: 18px;
+}
+
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
+  content: "三号";
+  font-size: 16px;
+}
+
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="15px"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="15px"]::before {
+  content: "小三";
+  font-size: 15px;
+}
+
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before {
+  content: "小四";
+  font-size: 12px;
+}
+
+
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="10.5px"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="10.5px"]::before {
+  content: "五号";
+  font-size: 10.5px;
+}
+
+
+
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="9px"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="9px"]::before {
+  content: "小五";
+  font-size: 9px;
+}
+
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="7.5px"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="7.5px"]::before {
+  content: "六号";
+  font-size: 7.5px;
+}
+
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="6.5px"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="6.5px"]::before {
+  content: "小六";
+  font-size: 6.5px;
+}
+
+
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="5.5px"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="5.5px"]::before {
+  content: "七号";
+  font-size: 5.5px;
+}
+
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="5px"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="5px"]::before {
+  content: "八号";
+  font-size: 5px;
+}
+
+.ql-snow .ql-picker.ql-header .ql-picker-label::before,
+  .ql-snow .ql-picker.ql-header .ql-picker-item::before {
+    content: '文本';
+  }
+  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
+  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
+    content: '标题1';
+  }
+  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
+  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
+    content: '标题2';
+  }
+  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
+  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
+    content: '标题3';
+  }
+  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
+  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
+    content: '标题4';
+  }
+  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
+  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
+    content: '标题5';
+  }
+  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
+  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
+    content: '标题6';
+  }
+
+  .ql-snow .ql-picker.ql-font .ql-picker-label::before,
+  .ql-snow .ql-picker.ql-font .ql-picker-item::before {
+    content: '黑体';
+  }
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='SimSun']::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='SimSun']::before {
+  content: "宋体";
+  font-family: SimSun,sans-serif;
+}
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='KaiTi']::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='KaiTi']::before {
+  content: "楷体";
+  font-family: KaiTi,sans-serif;
+}
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='FangSong']::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='FangSong']::before {
+  content: "仿宋";
+  font-family: FangSong,sans-serif;
+}
+
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='SimHei']::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='SimHei']::before {
+  content: "黑体";
+  font-family: SimHei,sans-serif;
+}
+
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='Microsoft-YaHei']::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='Microsoft-YaHei']::before {
+  content: "微软雅黑";
+  font-family: Microsoft YaHei,sans-serif;
+}
+
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='PmingLiu']::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='PmingLiu']::before {
+  content: "PmingLiu";
+  font-family: PmingLiu,sans-serif;
+}
+
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='Impact']::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='Impact']::before {
+  content: "Impact";
+  font-family: Impact,sans-serif;
+}
+
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='Georgia']::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='Georgia']::before {
+  content: "Georgia";
+  font-family: Georgia,sans-serif;
+}
+
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='Tahoma']::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='Tahoma']::before {
+  content: "Tahoma";
+  font-family: Tahoma,sans-serif;
+}
+
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='Arial']::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='Arial']::before {
+  content: "Arial";
+  font-family: Arial,sans-serif;
+}
+
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='Verdana']::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='Verdana']::before {
+  content: "Verdana";
+  font-family: Verdana,sans-serif;
+}
+.ql-font-SimSun {
+      font-family: SimSun , sans-serif;
+}
+.ql-font-KaiTi {
+      font-family: KaiTi , sans-serif;
+}
+.ql-font-FangSong {
+      font-family: FangSong , sans-serif;
+}
+.ql-font-SimHei {
+      font-family: SimHei , sans-serif;
+}
+.ql-font-KaiTi {
+      font-family: KaiTi , sans-serif;
+}
+.ql-font-Microsoft-YaHei {
+      font-family: Microsoft YaHei , sans-serif;
+}
+.ql-font-PmingLiu {
+      font-family: PmingLiu , sans-serif;
+}
+
+.ql-font-Impact {
+      font-family: Impact , sans-serif;
+}
+
+.ql-font-Georgia {
+      font-family: Georgia , sans-serif;
+}
+
+.ql-font-Tahoma {
+      font-family: Tahoma , sans-serif;
+}
+
+.ql-font-Arial {
+      font-family: Arial , sans-serif;
+}
+.ql-font-Verdana {
+      font-family: Verdana , sans-serif;
+}
+.ql-picker-options {
+    height: 300px;
+    overflow: auto;
+}
+</style>

package/src/components/textbox/index.js

@@ -0,0 +1,2 @@
+import TextBox from './textbox.vue';
+export default TextBox;