设置百度编辑器代码换行显示和百度编辑器设置代码高亮显示

发布时间:2017-02-08 编辑:小张个人博客 查看次数:4187

引入百度编辑器插件:

    <script src="{{url('Admin/js/ueditor/ueditor.config.js')}}"></script>
    <script src="{{url('Admin/js/ueditor/ueditor.all.min.js')}}"></script>

调用百度编辑器:

 <!-- 加载编辑器的容器 -->
 <script id="content1" name="content" type="text/plain"></script>

设置代码高亮显示:

  <link href="{{url('Admin/js/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css')}}" rel="stylesheet">
  <script  src="{{url('Admin/js/ueditor/third-party/SyntaxHighlighter/shCore.js')}}"></script>
  
   <script type="text/javascript">
       SyntaxHighlighter.all();
   </script>

解决前端代码不换行的问题(style="word-break:break-all"):

  <ul class="infos" style="word-break:break-all">
	{!! $content->content !!}
  </ul>

设置编辑器高宽与按钮(可选):

 var ue = UE.getEditor('content1', {
        /*toolbars: [
            [
                'anchor', //锚点
                'undo', //撤销
                'redo', //重做
                'bold', //加粗
                'indent', //首行缩进
                'snapscreen', //截图
                'italic', //斜体
                'underline', //下划线
                'strikethrough', //删除线
                'source', //源代码
                'blockquote', //引用
                'pasteplain', //纯文本粘贴模式
                'selectall', //全选
                'print', //打印
                'preview', //预览
                'horizontal', //分隔线
                'removeformat', //清除格式
                'time', //时间
                'date', //日期
                'cleardoc', //清空文档
                'insertparagraphbeforetable', //"表格前插入行"
                'insertcode', //代码语言
                'fontfamily', //字体
                'fontsize', //字号
                'paragraph', //段落格式
                'simpleupload', //单图上传
                'insertimage', //多图上传
                'edittable', //表格属性
                'edittd', //单元格属性
                'link', //超链接
                'emotion', //表情
                'spechars', //特殊字符
                'searchreplace', //查询替换
                'map', //Baidu地图
                'insertvideo', //视频
                'help', //帮助
                'justifyleft', //居左对齐
                'justifyright', //居右对齐
                'justifycenter', //居中对齐
                'justifyjustify', //两端对齐
                'forecolor', //字体颜色
                'backcolor', //背景色
                'insertorderedlist', //有序列表
                'insertunorderedlist', //无序列表
                'fullscreen', //全屏
                'directionalityltr', //从左向右输入
                'directionalityrtl', //从右向左输入
                'rowspacingtop', //段前距
                'rowspacingbottom', //段后距
                'pagebreak', //分页
                'insertframe', //插入Iframe
                'imagenone', //默认
                'imageleft', //左浮动
                'imageright', //右浮动
                'attachment', //附件
                'imagecenter', //居中
                'wordimage', //图片转存
                'lineheight', //行间距
                'edittip ', //编辑提示
                'customstyle', //自定义标题
                'autotypeset', //自动排版
                'touppercase', //字母大写
                'tolowercase', //字母小写
                'background', //背景
                'template', //模板
                'scrawl', //涂鸦
                'music', //音乐
                'inserttable', //插入表格
                'drafts', // 从草稿箱加载
                'charts', // 图表
            ]
        ],*/
        initialFrameWidth: 755,
        initialFrameHeight:450,
    });

到了这一步百度编辑器就可以网页中使用了效果如下:

百度编辑器

出处:小张个人博客

网址:http://blog.023xs.cn/

您的支持是对博主最大的鼓励,感谢您的认真阅读。欢迎转载,但请保留该声明。

顶部

Copyright © 小张个人博客 All Rights Reserved 渝ICP备15006773号-1

联系方式:[email protected] | 本站文章仅供学习和参考

渝公网安备 50024102500267号