html5微网站源码,天津网站设计公司,网站开发的流程是怎样的,深圳定制建设网站需求#xff1a; 做一个带有数学公式的富文本编辑器#xff0c;在网上看了很多#xff0c;这个最合适#xff0c;借鉴了wangEditor富文本编辑器 这里面写的是v3的整合富文本编辑器#xff0c;我照着上面改成了v2的#xff0c;本文章主要是实现步骤和错误解决#xff0c;… 需求 做一个带有数学公式的富文本编辑器在网上看了很多这个最合适借鉴了wangEditor富文本编辑器 这里面写的是v3的整合富文本编辑器我照着上面改成了v2的本文章主要是实现步骤和错误解决源码我放在最后了~ 1.效果 2. 需要插件
npm install wangeditor/editor wangeditor/editor-for-vue wangeditor/plugin-formula -S jquery看自己项目里有没有没有就下一个
npm install jquery 3.实现
wangEditor官网用于 Vue React | wangEditor
3.1下载完插件后在所需页面添加如下代码即可实现不包含数学公式
templatedivdivbutton clickprintEditorHtmlprint html/buttonbutton clickgetEditorTextprint text/button/divdiv styleborder: 1px solid #ccc; margin-top: 10px!-- 工具栏 --Toolbarstyleborder-bottom: 1px solid #ccc:editoreditor:defaultConfigtoolbarConfig/!-- 编辑器 --Editorstyleheight: 400px; overflow-y: hidden:defaultConfigeditorConfigv-modelhtmlonChangeonChangeonCreatedonCreated//divdiv stylemargin-top: 10pxtextareav-modelhtmlreadonlystylewidth: 100%; height: 200px; outline: none/textarea/div/div
/templatescript
import { Editor, Toolbar } from wangeditor/editor-for-vue;export default {name: MyEditor,components: { Editor, Toolbar },data() {return {editor: null,html: phellonbsp;world/p,toolbarConfig: {// toolbarKeys: [ /* 显示哪些菜单如何排序、分组 */ ],// excludeKeys: [ /* 隐藏哪些菜单 */ ],},editorConfig: {placeholder: 请输入内容...,// autoFocus: false,// 所有的菜单配置都要在 MENU_CONF 属性下MENU_CONF: {},},};},methods: {onCreated(editor) {this.editor Object.seal(editor); // 【注意】一定要用 Object.seal() 否则会报错},onChange(editor) {console.log(onChange, editor.getHtml()); // onChange 时获取编辑器最新内容},getEditorText() {const editor this.editor;if (editor null) return;console.log(editor.getText()); // 执行 editor API},printEditorHtml() {const editor this.editor;if (editor null) return;console.log(editor.getHtml()); // 执行 editor API},},mounted() {// 模拟 ajax 请求异步渲染编辑器setTimeout(() {this.html pAjax 异步设置内容 HTML/p;}, 1500);},beforeDestroy() {const editor this.editor;if (editor null) return;editor.destroy(); // 组件销毁时及时销毁 editor 重要},
};
/scriptstyle srcwangeditor/editor/dist/css/style.css/style3.1加入数学公式
在components文件下添加kityformula.js内容如下
注意图标地址别写错了不然图标显示不出来
constructor里面就是一些基本的配置
import $ from jquery;
import { formulaIcon } from ../assets/icons/svg-icon.ts;class MyKityFormulaMenu {constructor() {this.title 编辑公式;this.iconSvg formulaIcon;this.tag button;this.showModal true;this.modalWidth 900;this.modalHeight 400;}// 菜单是否需要激活如选中加粗文本“加粗”菜单会激活用不到则返回 falseisActive(editor) {return false;}// 获取菜单执行时的 value 用不到则返回空 字符串或 falsegetValue(editor) {return ;}// 菜单是否需要禁用如选中 H1 “引用”菜单被禁用用不到则返回 falseisDisabled(editor) {return false;}// 点击菜单时触发的函数exec(editor, value) {// Modal menu 这个函数不用写空着即可}// 弹出框 modal 的定位1. 返回某一个 SlateNode 2. 返回 null 根据当前选区自动定位getModalPositionNode(editor) {return null; // modal 依据选区定位}// 定义 modal 内部的 DOM ElementgetModalContentElem(editor) {// panel 中需要用到的idconst inputIFrameId kityformula_ Math.ceil(Math.random() * 10);const btnOkId kityformula-btn Math.ceil(Math.random() * 10);const $content $(diviframe id${inputIFrameId} classiframe height400px width100% frameborder0 scrollingno src/kityformula/index.html/iframe/div);const $button $(button id${btnOkId} classright stylemargin: 5px 0确认插入/button);$content.append($button);$button.on(click, () {// 执行插入公式const node document.getElementById(inputIFrameId);const kfe node.contentWindow.kfe;kfe.execCommand(get.image.data, function (data) {// 获取base64// console.log(data.img);});let latex kfe.execCommand(get.source);latex latex.replace(/\s/g, ); // 去掉空格const formulaNode {type: paragraph,children: [{type: formula,value: latex,children: [{text: ,},],},],};console.log(editor, 编辑器);editor.insertNode(formulaNode);editor.hidePanelOrModal();});return $content[0]; // 返回 DOM Element 类型// PS也可以把 $content 缓存下来这样不用每次重复创建、重复绑定事件优化性能}
}
const menuConf {key: kityFormula, // menu key 唯一。注册之后需通过 toolbarKeys 配置到工具栏factory() {return new MyKityFormulaMenu();},
};export default menuConf;代码讲解content就是数学公式弹窗点击确认插入之后会添加节点在编辑器内 const $content $(diviframe id${inputIFrameId} classiframe height400px width100% frameborder0 scrollingno src/kityformula/index.html/iframe/div);const $button $(button id${btnOkId} classright stylemargin: 5px 0确认插入/button);
3.2在pulic文件下添加数学公式相关代码 3.3主要页面代码讲解
这个代码意思就是插入注册添加到编辑器当中
import kityformula from /components/kityformula;
import { Boot } from wangeditor/editor;toolbarConfig: {// 插入编辑公式菜单insertKeys: {index: 0,keys: [kityFormula, // “编辑公式”菜单],},// excludeKeys: [ /* 隐藏哪些菜单 */ ],},created() {Boot.registerMenu(kityformula);}, 3.4解决编辑完成数学公式后内容没插入编辑器bug
意思就是写完了数学公式后没反应内容没添加进编辑器当中
解决如下
import formulaModule from wangeditor/plugin-formula;
import { Boot } from wangeditor/editor;created() {Boot.registerModule(formulaModule);},
此时再次运行会报错
Module not found: Error: Cant resolve katex in xxx
解决
下载这个默认下载最新版5.1.0下载完成后就不会报错
npm install myscript-math-web
3.5完整页面代码
templatediv classcontent-boxdiv classcontainer stylewidth: 1000px; margin: 0 autodivbutton clickprintEditorHtml获取编辑器html/buttonbutton clickgetEditorText获取编辑器文本/button/divdiv styleborder: 1px solid #ccc; margin-top: 10px; text-align: left!-- 工具栏 --Toolbarstyleborder-bottom: 1px solid #ccc:editoreditor:defaultConfigtoolbarConfig/!-- 编辑器 --Editorstyleheight: 500px; overflow-y: hidden:defaultConfigeditorConfigv-modelhtmlonChangeonChangeonCreatedonCreatedonFocushandleFocus//divdiv stylemargin-top: 10pxtextareav-modelhtmlreadonlystylewidth: 100%; height: 200px; outline: none/textarea/div/div/div
/templatescript
import { Editor, Toolbar } from wangeditor/editor-for-vue;
import kityformula from /components/kityformula;
import { Boot } from wangeditor/editor;
import formulaModule from wangeditor/plugin-formula;
export default {name: MyEditor,components: { Editor, Toolbar },data() {return {editor: null,html: phellonbsp;world/p,toolbarConfig: {// 插入编辑公式菜单insertKeys: {index: 0,keys: [kityFormula, // “编辑公式”菜单],},// excludeKeys: [ /* 隐藏哪些菜单 */ ],},editorConfig: {placeholder: 请输入内容...,// autoFocus: false,// 所有的菜单配置都要在 MENU_CONF 属性下MENU_CONF: {},},};},methods: {onCreated(editor) {console.log(created, editor);this.editor Object.seal(editor); // 【注意】一定要用 Object.seal() 否则会报错},onChange(editor) {console.log(onChange, editor.getHtml()); // onChange 时获取编辑器最新内容},handleFocus(editor) {console.log(focus, editor);},getEditorText() {const editor this.editor;if (editor null) return;console.log(editor.getText()); // 执行 editor API},printEditorHtml() {const editor this.editor;if (editor null) return;console.log(editor.getHtml()); // 执行 editor API},},created() {Boot.registerMenu(kityformula);Boot.registerModule(formulaModule);},mounted() {// 模拟 ajax 请求异步渲染编辑器setTimeout(() {this.html pAjax 异步设置内容 HTML/p;}, 1500);},beforeDestroy() {const editor this.editor;if (editor null) return;editor.destroy(); // 组件销毁时及时销毁 editor 重要},
};
/scriptstyle srcwangeditor/editor/dist/css/style.css/style4.源码
叫我欧皇i的数学公式仓库 (gitee.com)
文章到此结束希望对你有所帮助~
