富文本编辑器 - wangEditor 插入代码

效果:

 

 

 

项目结构:

 

注意事项:

  • highlightJS 代码高亮插件,wangEditor 本身就是集成的highlightJS代码高亮插件。
  • wangEditor-1.3.12.js里找到var hashljs = flase,把它改成var hashljs = true,然后引入JS和css。

 

 

调整代码的字体和大小:

 

 

代码:

 

 

 

原始连接:

http://www.sojson.com/blog/36

http://www.kancloud.cn/wangfupeng/wangeditor/65742

 

转载于:https://www.cnblogs.com/KTblog/p/5137461.html

wangeditor富文本编辑器可以很方便地插入HTML内容。根据引用\[3\]中的示例,你可以在wangeditor富文本编辑器插入HTML内容。首先,在你的Vue组件中创建一个div元素,并给它设置一个id,比如"editor"。然后,在wangeditor富文本编辑器的初始化配置中,将该id作为编辑器的容器。这样,你就可以在编辑器中插入HTML内容了。具体的代码示例如下: ```html <template> <div> <div id="editor" style="background: #ffffff;"></div> </div> </template> <script> import wangEditor from 'wangeditor' export default { mounted() { const editor = new wangEditor('#editor') editor.create() } } </script> ``` 在上述代码中,我们使用了wangeditor的create方法来创建富文本编辑器,并将"#editor"作为参数传入,表示编辑器将被渲染到id为"editor"的div元素中。这样,你就可以在编辑器中插入HTML内容了。希望这个回答对你有帮助!\[2\]\[3\] #### 引用[.reference_title] - *1* *2* [【wangEditor富文本编辑器】富文本三种使用方法,html使用富文本,html套vue脚手架使用富文本,vue使用富...](https://blog.csdn.net/seeeeeeeeeee/article/details/127195533)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [vue 使用 wangeditor 富文本编辑器](https://blog.csdn.net/HH18700418030/article/details/128830011)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值