|
@@ -5,93 +5,106 @@
|
|
|
</template>
|
|
|
<script>
|
|
|
import E from 'wangeditor'
|
|
|
- export default {
|
|
|
- components: {
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
|
|
|
},
|
|
|
props: {
|
|
|
- index:""
|
|
|
+ index: {
|
|
|
+ type: Number,
|
|
|
+ default: -1
|
|
|
+ },
|
|
|
+ textData: {
|
|
|
+ type: Array,
|
|
|
+ default: () => {
|
|
|
+ return []
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
- data() {
|
|
|
- return {
|
|
|
- tabName: 'exercise',
|
|
|
- editorContent:""
|
|
|
- }
|
|
|
- },
|
|
|
- created() {
|
|
|
-
|
|
|
- },
|
|
|
- methods: {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ tabName: 'exercise',
|
|
|
+ editorContent: "",
|
|
|
+ examInfo: [],
|
|
|
+ editor: null
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- var editor = new E("#textArea");
|
|
|
- editor.customConfig.onchange = html => {
|
|
|
- this.editorContent = html;
|
|
|
- if (this.editorContent !== "") {
|
|
|
- console.log('454564164556')
|
|
|
- this.$emit("change", this.editorContent,this.index)
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getInfo() {
|
|
|
+ this.initEditor()
|
|
|
+ this.examInfo = []
|
|
|
+ console.log('变化数据')
|
|
|
+ console.log(this.textData)
|
|
|
+ if (this.textData.length > 0) {
|
|
|
+ this.examInfo = [...this.textData]
|
|
|
+ this.editor.txt.html(this.examInfo[0])
|
|
|
}
|
|
|
- };
|
|
|
- editor.customConfig.menus = [
|
|
|
- "fontSize", // 字号
|
|
|
- "fontName", // 字体
|
|
|
- "italic", // 斜体
|
|
|
- "underline", // 下划线
|
|
|
- "link", // 插入链接
|
|
|
- "justify", // 对齐方式
|
|
|
- "quote", // 引用
|
|
|
- "emoticon", // 表情
|
|
|
- "image", // 插入图片
|
|
|
- "video", // 插入视频
|
|
|
- "undo", // 撤销
|
|
|
- "redo" // 重复
|
|
|
- ]
|
|
|
- editor.customConfig.zIndex = 1
|
|
|
- //// 选项编辑器失焦隐藏工具栏
|
|
|
- //editor.customConfig.onblur = function () {
|
|
|
- // let allToolbars = document.getElementsByClassName('textArea')
|
|
|
- // for (let i = 0; i < allToolbars.length; i++) {
|
|
|
- // if (allToolbars[i].children.length) {
|
|
|
- // allToolbars[i].children[0].style.visibility = 'hidden'
|
|
|
- // }
|
|
|
- // }
|
|
|
- //}
|
|
|
- editor.customConfig.linkImgCallback = function (url) {
|
|
|
- console.log(url); // url 即插入图片的地址
|
|
|
- };
|
|
|
- editor.customConfig.linkCheck = function (text, link) {
|
|
|
- console.log(text); // 插入的文字
|
|
|
- console.log(link); // 插入的链接
|
|
|
- return true; // 返回 true 表示校验成功
|
|
|
- };
|
|
|
- // 自定义配置颜色(字体颜色、背景色)
|
|
|
- editor.customConfig.colors = [
|
|
|
- "#000000",
|
|
|
- "#eeece0",
|
|
|
- "#1c487f",
|
|
|
- "#4d80bf",
|
|
|
- "#c24f4a",
|
|
|
- "#8baa4a",
|
|
|
- "#7b5ba1",
|
|
|
- "#46acc8",
|
|
|
- "#f9963b",
|
|
|
- "#ffffff"
|
|
|
- ];
|
|
|
- // 自定义字体
|
|
|
- editor.customConfig.fontNames = [
|
|
|
- "宋体",
|
|
|
- "微软雅黑",
|
|
|
- "Verdana"
|
|
|
- ];
|
|
|
- // 隐藏“网络图片”tab
|
|
|
- editor.customConfig.showLinkImg = false;
|
|
|
- // 下面两个配置,使用其中一个即可显示“上传图片”的tab。但是两者不要同时使用!!!
|
|
|
- editor.customConfig.uploadImgShowBase64 = true; // 使用 base64 保存图片不建议使用这种,我只是图个方便
|
|
|
- // editor.customConfig.uploadImgServer = '/upload' // 上传图片到服务器
|
|
|
- editor.create();
|
|
|
-
|
|
|
- }
|
|
|
+ console.log(this.textData)
|
|
|
+ },
|
|
|
+ initEditor() {
|
|
|
+ this.editorContent = ""
|
|
|
+ this.editor = new E("#textArea");
|
|
|
+ this.editor.customConfig.onchange = html => {
|
|
|
+ this.editorContent = html;
|
|
|
+ if (this.editorContent !== "") {
|
|
|
+ this.$emit("dataChange", this.editorContent, this.index)
|
|
|
+ }
|
|
|
+ };
|
|
|
+ this.editor.customConfig.menus = [
|
|
|
+ "fontSize", // 字号
|
|
|
+ "fontName", // 字体
|
|
|
+ "italic", // 斜体
|
|
|
+ "underline", // 下划线
|
|
|
+ "link", // 插入链接
|
|
|
+ "justify", // 对齐方式
|
|
|
+ "quote", // 引用
|
|
|
+ "emoticon", // 表情
|
|
|
+ "image", // 插入图片
|
|
|
+ "video", // 插入视频
|
|
|
+ "undo", // 撤销
|
|
|
+ "redo" // 重复
|
|
|
+ ]
|
|
|
+ this.editor.customConfig.zIndex = 1
|
|
|
+ this.editor.customConfig.linkImgCallback = function (url) {
|
|
|
+ console.log(url); // url 即插入图片的地址
|
|
|
+ };
|
|
|
+ this.editor.customConfig.linkCheck = function (text, link) {
|
|
|
+ console.log(text); // 插入的文字
|
|
|
+ console.log(link); // 插入的链接
|
|
|
+ return true; // 返回 true 表示校验成功
|
|
|
+ };
|
|
|
+ // 自定义字体
|
|
|
+ this.editor.customConfig.fontNames = [
|
|
|
+ "宋体",
|
|
|
+ "微软雅黑",
|
|
|
+ "Verdana"
|
|
|
+ ];
|
|
|
+ this.editor.customConfig.showLinkImg = false;
|
|
|
+ // 下面两个配置,使用其中一个即可显示“上传图片”的tab。但是两者不要同时使用!!!
|
|
|
+ this.editor.customConfig.uploadImgShowBase64 = true; // 使用 base64 保存图片不建议使用这种,我只是图个方便
|
|
|
+ // editor.customConfig.uploadImgServer = '/upload' // 上传图片到服务器
|
|
|
+ this.editor.create();
|
|
|
+ this.editor.txt.clear()
|
|
|
+ if (this.examInfo.length > 0) {
|
|
|
+ this.editor.txt.html(this.examInfo[0])
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.initEditor()
|
|
|
+ this.getInfo()
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ index() {
|
|
|
+ console.log(this.index)
|
|
|
+ this.getInfo()
|
|
|
+ deep: true;
|
|
|
+ immediate:true
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</script>
|
|
|
<style>
|