| | |
| | | <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
| | | <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"> |
| | | <include file="common:element-plus" /> |
| | | <link rel="stylesheet" href="/static/admin/css/blog/add.css"> |
| | | <!-- 富文本编辑器 --> |
| | | <link rel="stylesheet" href="/static/plugin/wangeditor/style.css" media="all"> |
| | | <script type="text/javascript" src="/static/plugin/wangeditor/index.js"></script> |
| | |
| | | </head> |
| | | |
| | | <body> |
| | | <input type="hidden" id="id" value="{$id}"> |
| | | <div id="vue_item" v-cloak> |
| | | <el-container> |
| | | <el-aside class="el-menu-container" :width="el_aside_width"> |
| | |
| | | <div id="toolbar-container"><!-- 工具栏 --></div> |
| | | <div id="editor-container" style="height: calc(100% - 40px);"><!-- 编辑器 --></div> |
| | | </div> |
| | | <!-- <div id="editer_data" style="width: 100%;">{{addBlogForm.content}}</div> |
| | | <textarea name="content" id="content" style="display:none;" v-model="addBlogForm.content"></textarea> --> |
| | | <!-- <div id="editer_data" style="width: 100%;" v-html="addBlogForm.content"></div> --> |
| | | <!-- <textarea id="editer_data" style="display:none;" v-model="addBlogForm.content"></textarea> --> |
| | | </el-form-item> |
| | | <el-form-item label="内容(英文)"> |
| | | <div id="editor—wrapper-en" class="editor—wrapper" style="height: 500px;"> |
| | | <div id="toolbar-container-en"><!-- 工具栏 --></div> |
| | | <div id="editor-container-en" style="height: calc(100% - 40px);"><!-- 编辑器 --></div> |
| | | </div> |
| | | <!-- <div id="editer_data_en" style="width: 100%;" v-html="addBlogForm.en_content"></div> --> |
| | | </el-form-item> |
| | | <el-form-item label="封面图"> |
| | | <el-upload class="avatar-uploader" action="/admin/blog/upload_cover_img.html" :show-file-list="false" :on-success="handleCoverImgSuccess" :before-upload="beforeCoverImgUpload"> |
| | | <template v-if="addBlogForm.cover_img"> |
| | | <div> |
| | | <img :src="addBlogForm.cover_img" class="avatar" /> |
| | | <el-button type="danger" icon="Delete"></el-button> |
| | | <!-- <el-button type="danger" icon="Delete"></el-button> --> |
| | | </div> |
| | | </template> |
| | | <el-icon v-else class="avatar-uploader-icon"> |
| | |
| | | placeholder: '请输入中文内容...', |
| | | onChange(editor) { |
| | | const html = editor.getHtml(); |
| | | setHtmlValue(html); |
| | | getHtmlValue(html); |
| | | }, |
| | | MENU_CONF: {}, |
| | | } |
| | |
| | | }, |
| | | } |
| | | |
| | | var editor_data = $("#editer_data").html(); |
| | | if (editor_data == '') { |
| | | editor_data = '<p><br></p>'; |
| | | } |
| | | const editor = createEditor({ |
| | | selector: '#editor-container', |
| | | html: '<p><br></p>', |
| | |
| | | placeholder: '请输入英文内容...', |
| | | onChange(editor) { |
| | | const html = editor.getHtml(); |
| | | setHtmlValue(html, 2); |
| | | getHtmlValue(html, 2); |
| | | }, |
| | | MENU_CONF: {}, |
| | | } |
| | |
| | | }, |
| | | } |
| | | |
| | | |
| | | var editor_data_en = document.getElementById('editer_data_en'); |
| | | if (editor_data_en == '') { |
| | | editor_data_en = '<p><br></p>'; |
| | | } |
| | | const editor_en = createEditor({ |
| | | selector: '#editor-container-en', |
| | | html: '<p><br></p>', |
| | |
| | | selector: '#toolbar-container-en', |
| | | config: toolbarConfigEn, |
| | | mode: 'default', // or 'simple' |
| | | }) |
| | | </script> |
| | | <script> |
| | | /** |
| | | * 富文本编辑器 |
| | | */ |
| | | // var E = window.wangEditor |
| | | // const editor = new E('#editer_data') |
| | | // var textarea = $('#content') |
| | | }); |
| | | |
| | | // editor.config.onchange = function (html) { |
| | | // // 监控变化,同步更新到 textarea |
| | | // textarea.val(html) |
| | | // } |
| | | |
| | | // // editor.config.onblur = function (html) { |
| | | // // // 编辑区域失去焦点后的操作,保存内容 |
| | | // // save_reading_data(); |
| | | // // } |
| | | |
| | | // //设置提示文字 |
| | | // editor.config.placeholder = '请输入文章内容...' |
| | | |
| | | // //设置编辑区域z-index |
| | | // editor.config.zIndex = 100 |
| | | |
| | | // // 自定义菜单配置 |
| | | // editor.config.menus = [ |
| | | // 'bold', |
| | | // 'fontSize', |
| | | // 'italic', |
| | | // 'underline', |
| | | // 'strikeThrough', |
| | | // 'indent', |
| | | // 'lineHeight', |
| | | // 'foreColor', |
| | | // 'backColor', |
| | | // 'link', |
| | | // 'list', |
| | | // 'justify', |
| | | // 'image', |
| | | // ] |
| | | |
| | | // //粘贴内容去掉图片 |
| | | // editor.config.pasteIgnoreImg = true |
| | | |
| | | // // 配置粘贴文本的内容处理 |
| | | // editor.config.pasteTextHandle = function (pasteStr) { |
| | | // // 对粘贴的文本进行处理,然后返回处理后的结果 |
| | | // return pasteStr.replace(/<[^>]+>/g, ""); |
| | | // } |
| | | |
| | | // //上传图片服务端地址 |
| | | // editor.config.uploadImgServer = "/admin/upload/index_v1.html" |
| | | |
| | | // // 隐藏“网络图片”tab |
| | | // editor.config.showLinkImg = false |
| | | |
| | | // // 将图片大小限制为 10M |
| | | // editor.config.uploadImgMaxSize = 20 * 1024 * 1024 |
| | | |
| | | // // 限制一次最多上传 20 张图片 |
| | | // editor.config.uploadImgMaxLength = 20 |
| | | |
| | | // //编辑器初始化 |
| | | // editor.create() |
| | | |
| | | // // 初始化 textarea 的值 |
| | | // textarea.val(editor.txt.html()) |
| | | ////////////////////////////////////////富文本编辑器-end////////////////////////////////// |
| | | function setHtmlValue(html, type = 1) { |
| | | if (type == 1) { |
| | | editor.setHtml(html); |
| | | } else { |
| | | editor_en.setHtml(html); |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | </html> |