HTML中使用富文本工具

KindEditor 使用方法

<head>
    <th:block th:include="include :: KindEditor-css"/>
head>
<body>
	<div>
		<textarea id="description" name="description" style="width: 100%;height: 270px;">textarea>
	div>

	<th:block th:include="include :: KindEditor-js"/>
	<script type="text/javascript">
		var editor;
    	KindEditor.ready(function (K) {
        	editor = K.create('#description',{
            	themeType: 'default'
        	});
    	})
	script>
body>

<div th:fragment="KindEditor-css">
	<link th:href="@{/ajax/libs/KindEditor/themes/default/default.css}"/>
	<link th:href="@{/ajax/libs/KindEditor/themes/simple/simple.css}"/>
div>


<div th:fragment="KindEditor-js">
	<script th:src="@{/ajax/libs/KindEditor/kindeditor.js}">script>
	<script th:src="@{/ajax/libs/KindEditor/lang/zh-CN.js}">script>
div>

参考文档:K.create(expr [, options])
阿里云盘文件提取:https://www.aliyundrive.com/s/mPGjMirHwzF
提取码:4rv6

ueditor 使用方法

<head>
    <th:block th:include="include :: ueditor-css"/>
head>
<body>
	<div>
		<div id="container" name="content">div>
	div>

	<th:block th:include="include :: ueditor-js"/>
	<script type="text/javascript">
		var ue = UE.getEditor('container');
	script>
body>

<div th:fragment="ueditor-css">
	<link th:href="@{/ajax/libs/ueditor/dist/utf8-php/themes/default/css/ueditor.css}"/>
div>


<div th:fragment="ueditor-js">
	<script th:src="@{/ajax/libs/ueditor/dist/utf8-php/ueditor.config.js}">script>
	<script th:src="@{/ajax/libs/ueditor/dist/utf8-php/ueditor.all.js}">script>
div>

参考文档:GetHub

1、下载代码

2、解压进入目录执行 npm install grunt

3、在终端执行 grunt default

4、出现dist文件夹,里面包含 css 和 js

你可能感兴趣的:(笔记,javascript,开发语言,html,css)